A few months ago my site received a much needed overhaul. I updated the structure and looks and went crazy on Googly Web 2.0 mark-up stuff. Considering I am not a webdesigner, I am quite pleased with the result.
There are probably many more non-designers like me, also looking to build their own personalised WordPress site, so I thought I’d share my experiences. This post is aimed at amateurs who want to give their personal site an own look without too much hassle.
Don’t start from scratch
The previous theme was written entirely from scratch, using a few pieces of code copied from the default TwentyTen theme. What I learned from that enterprise is that it is very hard to do everything yourself, if you’re not a professional. Many rough ends will make your theme look less tidy and your lack of skill results in a theme that is harder to navigate and read.
So, I decided to go with an often forgotten feature of WordPress theme development: child themes. The TwentyTen is a very solid base to build upon, the way it presents texts is very easy on the eyes. By using a good theme as a starting point for your child theme, you have all its advantages. Because you’re creating a child theme and not forking TwentyTen directly, updates to the original theme will automatically benefit your theme as well.
The simple start
The only file you really need is the CSS file. Create a new directory with the slug name of your theme in wp-content/themes/ and add an empty file to it named style.css. I added the following header:
/*
Theme Name: seh
Theme URI: http: //www.sensehofstede.nl/
Description: Theme for SenseHofstede.nl, child theme of Twenty Ten
Author: Sense Hofstede
Author URI: http: //www.sensehofstede.nl/about/
Template: twentyten
Version: 0.1.0
Tags: blue, white, threaded-comments, translation-ready, microformats,
custom-menu
*/
@import url("../twentyten/style.css");
With a stylesheet containing just these few lines of code, you’ve already got a working theme. It does look quite similar to TwentyTen though. But now you can start working on adapting the style. Make sure that you place all your own CSS after the @import rule, so you will override existing entries in the stylesheet of TwentyTen!
If you only want to make a few adjustments, just adding the stylesheet will do the trick. Maybe all you want are a different font and some changes to the default colour palette. If you want more, however, you will have to add PHP files.
WordPress processes child themes like this: it first looks for files in the child theme’s directory, then in the directory of its parent theme. When you don’t create a custom header.php, your theme will continue to use the TwentyTen header. This rule, however, does not apply to the important functions.php file. Every file with that name present in both the child and parent theme will be loaded, the child theme’s first. This behaviour gives you a very powerful to adapt important parts of the theme without having to create new template files.
Playing with functions
If you look to the top of this blog post you will see that underneath the title the date and time this post was published are shown. The function responsible for this is defined in a specific way that allows overriding.
if ( ! function_exists( 'twentyten_posted_on' ) ) :
function twentyten_posted_on() {
STUFF
}
endif;
If you write your own twentyten_posted_on() function in your child theme’s function.php, TwentyTen will not try to define it again, but instead use yours. You can change more parts of the theme without having to create your own template files.
Template files
But if you want to do more, you will have to dive deeper in the code. I wanted to change my header a lot from what TwentyTen offers, so I created my own header.php file and used that. As soon as I placed it in the child theme’s directory, it replaced the default header. This can be done to replace all PHP files you find in the parent theme’s directory.
Interesting template files you could consider replacing, are loop.php and loop-single.php, which are used everywhere to display a post or lists of posts and searchform.php, which is used to display the search form when available.
Here another advantage of child themes becomes clear: you can create template files for the most common pages and leave the rarely used ones to the parent theme. Also, if WordPress decides to add a new page, your theme will automatically support it as soon as the update arrives.
Important to notice
There are some things to keep in mind while working on the child theme. By default you would use bloginfo(‘template_directory’); to print the base path when embedding images. But when you want to use images in the directory of the child theme, you will have to use bloginfo(‘stylesheet_directory’); instead.
I wrote this post for the TwentyTen theme, but since then TwentyEleven has been published. Although it probably works just as well for the greatest part, there might be some minor differences. Also check the new template files like content-*.php.