HOW TO: Customize Wordpress Part 1

There are two main ways that I can see to go about customising themes in WP. I'm not really a theme user, as I tend to build from scratch, so it's difficult for me to say which way would be easier for everyone. One way is to customise the functionality of the blog itself this involves getting into the "Loop" (more on this later), the other is just to build around the existing CSS of an already stable theme. There is a lot you can do by just dissecting your chosen base theme and using the CSS to do the work.

Tinkering with the Templates

First off it is very easy to switch and/or edit templates from within the WordPress Dashboard, but you should make sure that you keep the original intact and work with a copy as you can immediately switch back if something goes wrong.

1. Pick a theme that vaguely resembles what you would like i.e. 2 column, 3 column etc. I've chosen to use the default template for this example.
2. If choosing other than one of the defaults, download and extract the file to the your \wordpress\wp-content\themes\ directory
3. Either extract the same downloaded file to the same place giving it a different name or simply navigate to the themes folder and copy/paste it into same directory giving it a different name.
4. You now have 2 identical themes one with the correct name and one with the name you gave.
   
5. From Your Theme directory, Open up the style.css file in your favourite text editor and edit the first few lines to suit e.g. Theme Name, Theme Description, version and urls.
   
6. I made the changes shown below:
   
7. That's it, save and close the style.css file. Then, if you haven't already, upload those two theme directories (default and MY Theme) to the themes directory online.
8. Login and Open up your WordPress dashboard under Presentation > Themes you should see both themes, with the correct names beside them, activate the one with your name.
   
9. At this point this theme is exactly the same as the original (default), and if any edits you make to your theme do not do as expected, then you can do real-time switching back to the default.

Editing the files

Switch over to the Presentation > Theme Editor Tab

You now see your theme selected by default and all the files that go along with it listed down the right side. From here you can directly edit the template files and/or the Stylesheet in the left pane.

Some people like myself are very comfortable getting down and dirty with the CSS, and find the PHP template syntax a little more difficult to get to grips with, while others find it easier the other way around. You can do either or both from within the Theme Editor, though I'm just going to stick with the CSS for now.

I've recently read that WP is not PHP, but I think that headline is oversimplifying it a bit, those delimiters in:

Sure look like PHP to a novice like me! However to a non-programmer a better description is that the PHP delimiters contain "tokens", or to use Wordpress's own words they are Template Tags. These tags are what call the functions already PHP coded in The WordPress core, all you need to learn is which one does which and that they will work inside of the Wordpress Loop. That's the technical bit if you're PHP minded, and there is a great deal of documentation on how to develop functional themes which you would need to go into especially if using a non-typical blog application.

However also in those template files is nice static HTML, and that is where you can get to tinkering with CSS quite easily.

Replacing Existing Template Images

Replacing or personalising existing images, particularly header images is the easiest first step.

In the Kubrick based default template which I used the images relating to the design are kept in a separate folder within the theme directory. So finding and opening them up to edit them is a simple matter. All you have to remeber is that by keeping them dimensioned the same as they are already will ensure they still fit in with the existing CSS.

Step by Step

I opened up kubrickheader.jpg:

I changed it (ever so slightly due a lack of imagination!) for this demo, and saved it as myheader.png in the My Theme/images directory, and uploaded to the same directory on the site:

Then in the WP Theme Editor Pane, I went into change to the CSS call to that image ~ Note: The Kubrick default is slightly different in that it has the CSS for the images embedded in the head of the document, so you need to open the Header Template file to access the required bit of the CSS. However once there I followed the very nice instructions in the page. I commented out the two lines that were calling and positioning the default image:

And replaced the personalheader.jpg filename with the image name I just saved.

The immediate result on refresh..

Phew, that's it..

That's only a small tweak, but obviously you could change the image more imaginitively and also change all the other background images to suit a bigger change, but this post is getting too long, I thought it important to cover how to preserve the default / backup first.

This is also a good place to stop, as once you're happy with one stage of tweaks you can obviously repeat the steps above saving your own stable stage of a theme as your back up. I'll follow this up a bit later this week, please feel free to leave comments, questions as to what you would like covered.

[added: follow up: Customize WordPress Part 2]