In the last WordPress post we looked at how to get up and running on a local server. Next we're going to take a look at how to get stuck in with creating your own theme, step by step.
There's plenty of reasons why you might want to create a WordPress theme from scratch, but creating what is known as a 'Child theme' can save you a bit of leg work when you're getting started. Why? Themes like the default 'twentythirteen' will have a lot of functionality already built in - like being responsive so it works on multiple devices, allowing you to focus on the branding / styling of your site. Here's some of the advantages of starting with a child theme:
Taking the quick route always has it's downsides though, so to give a balanced argument it's worth noting there will be a mild performance reduction as WordPress will be looking in more than one location for your files (and files will be imported from others). Using more complex parent themes may also mean you're starting with functionality you may not need. For this reason the default 'twentythirteen' is a great starting point as it's fairly light-weight.
Inside the wp-content > themes folder you'll find all the themes that are currently available for you to use. Add a new folder here titled with your new theme name, and inside create a new file titled 'style.css'
The style file defines some of the default information that WordPress needs to know to register your theme. Here's a default template:
So a couple of important things to note here, firstly this information has be be placed in /* comment tags */ so that it is ignored by the actual css, and secondly that the 'Template:' refers to the parent theme that we will be building on.
Just with this folder and CSS file you can now enable your theme. To do this login to the admin panel at /wp-admin and go to 'Appearance' > 'Themes'. You should see your theme as an option - click 'Activate'. If you go back to your home page now you should see that it's a total mess. The reason for this is that the site no longer has any CSS styling, so what we're going to do now is inherit the styling from our parent theme. To do this, add the following to your style.css file:
Take a look at your home page now, and you'll see we're back to where we started in terms of styling. The benefit now though, is that we can override the parent theme without modifying it directly - any CSS that you place in your style.css file will take presedence over anything in the parent.
WordPress will look in your new theme folder for any of the template files before trying to look in the parent folder, this allows you to easily override the structure or content. As an example, let's say we wanted to simplify the footer - simply copy 'footer.php' from the parent theme folder into your new theme folder and then you can start making amendments to the code without affecting the parent.
To add or override functionality via WordPress hooks, simply add a functions.php file to your theme folder as well. Note that the functions.php file doesn't take precedence over the parent functions.php file. The child functions.php is included first and then the parent functions.php. You can use the parent file functions but you can't override the parent theme functions unless they have a function_exists round them.
Referencing the path to your child theme is different to how you would do it for the parent. Here's the two different methods you would use:
// Parent theme
// Child theme
This is one of the most common questions when getting started with WordPress - how do I customise the home page? By default it will show a list of all your posts, to override this so you can start customising your child theme home page follow these instructions:
Go to 'Settings' > 'Reading' and you'll see by default the front page is set to display your latest posts. Simply switch this to 'A static page' and choose from the drop down which page (from the pages section) you would like to use.
And that's it, you can now customise the styling and code on your own theme with the benefit of using an existing parent configuration.