Screencast: Make changing your theme safer

Add a Comment

In the screencast below, I’ll be guiding you through the process of adding custom stylesheets, Javascript files, and function files so that the people using your theme can make big changes to your theme without threatening the theme’s core during future upgrades. The screencast is intended for intermediate WordPress users. Notes and files for download available below the embedded clip, after the jump.

Screencast notes and files

As I describe in the screencast, the idea here is to allow for users of your themes to make the changes they want to make without threatening the integrity of the original theme. This isn’t the only way to achieve a full editable theme, but is one way that has worked for me in the past.

You’ll need the following zip file containing the custom files in a folder that you can upload straight to your theme folder.

Download the folder of files used in the above screencast.

Just having these files in place won’t completely do it for you, though. You’ll want to add a few things to your theme to make sure everything shows up where it should.

Preparing your theme for handling user styles

These steps are intended to give you a quick reference for what is gone over in the screencast. Refer to the video above for a better walkthrough.

  1. First, you’ll want to make sure you have the zip linked to above and have it uploaded to your theme folder.
  2. In order for the styles to have any effect, they will need to be imported into your current stylesheet. So jump into your current style.css and add this to the top of your file (but after the theme description): @import url(‘custom/style.css’);
  3. Now pull open header.php and add a class of “custom” to your body tag. This takes care of the user stylesheet, and anything you add to custom/style.css will have an effect on your theme, provided each style begins with “body.custom”.
  4. In order to include the Javascript, just add a script tag linking the custom/script.js file. That’s all there is to that.
  5. To link in the functions.php file, require the file /custom/functions.php in your default functions.php file. See the video for how exactly to do it.

That should do it for now. Let me know if you liked this screencast or not, as it’s the first of its kind that I’ve posted here to the Playground. If you like this sort of thing and would like to see more, leave a note in the comments saying so, as well as different things you would like to see screencasted.