WordPress is constantly being upgraded, improved and securitized. You should change the functionality with plugins and the look with the theme so, whenever WordPress gets updated, the functionality and look of your site will remain whilst the engine that powers it gets an upgrade.
The number one reason for getting a site hacked is a failure to update the WordPress core. So, make sure you update your plugins, your themes and the WordPress installation regularly!!!
However, things don’t always run smoothly during an upgrade as themes and plugins can cease to work. Sometimes plugin and theme authors will release updated versions around the time of a WordPress update. Sometimes they don’t. This is why it’s important to choose plugins and themes that are well-used and well-supported.
Themes
Themes are a collection of PHP files, CSS file(s), associated images and sometimes JavaScript files and there are thousands of them. Typically, we are so excited about getting the site up and running that the choice of theme is hurried and not perfect.
The WordPress Free Themes Directory gives you an Average Rating as well as the latest links from the troubleshooting forum pertaining to that theme. Themes can be changed and amended through the Appearance section of the WordPress back-end.
Theme Frameworks and Child Themes
Another important way to ensure that your WordPress site stays functioning through multiple upgrades is to use Child Themes. Child themes are to your theme what plugins are to the WordPress core. They sit on top of the theme (in this case the theme framework) and alter things in it so that when the theme needs updating the changes aren’t lost.
I’m convinced this is the way to go when amending themes: “Child themes are the only way you should build your WordPress site on top of a framework” says Matt Mullenweg, the founder developer of WordPress.
So, what are the best frameworks to build on? There are a lot of great premium theme frameworks out there:
- Genesis is used by blogging heavyweights Darren Rowse of ProBlogger, Chris Brogan author of Trust Agents and Brian Clark of CopyBlogger. It claims that whether you’re a novice or an advanced developer, Genesis will provide a secure and search engine optimized foundation that takes WordPress to places you never thought it could go..
- Thesis is a rock-solid foundation beneath any kind of website. Over 36,319 people use the airtight SEO, incredible design flexibility and lightning-fast loading times that Thesis provides. Yes, that’s pasted from their website!
- Elegant Themes is another popular premium theme framework providing attractive and userfriendly WordPress templates.
- Woo Themes provide top quality, cutting edge themes on top of their framework with awesome customer support.
- PageLines is revolutionary drag & drop theme framework.
However, there are plenty of good free theme frameworks to consider:
- Thematic The ultimate in SEO-ready themes, Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus, grid-based layout samples, plugin integration, shortcodes for your footer, and a whole lot more.
- Atahualpa Pretty ugly out the box but it’s proponents swear by it. Fixed or flexible width layout, with min/max width, 0 – 4 sidebars, very browser safe (incl. IE6), create custom widget areas, import/export styles, javascript color pickers, over 200 options.
- Hybrid A user-friendly, search-engine optimized parent theme, featuring 15 custom page templates and multiple widget-ready areas, allowing you to create any type of site you want.
The reason I am talking a lot about frameworks is because I’m sure they are the future of WordPress theme design. As WordPress develops the themes are going to have to get more adaptive as a result.
So how does this help us customize WordPress?
Whether you are customizing a theme framework or a theme, I would advise you to create a child theme. I want to show you a child theme I made for the default theme that ships with WordPress called Twenty Ten. You can see it in action here for this site called the easy way to give up smoking.
I think Twenty Ten has been overlooked by the WordPress community because most people have their own theme already so haven’t checked it out. Plus, the words “free” and “default” don’t always sound sexy. But I think Twenty Ten is a really intelligent theme to use and it is well coded in HTML5.
But, if you are thinking of using Twenty Ten, make sure that you create a child theme for it. Because, Twenty Ten will need updating in the future and if you’ve made changes to the core Twenty Ten files and update it, your changes will be lost.
How to make a child theme
So, here’s how you make a child theme. And, we’re going to call the child theme “Henry”.
The first step is to create a folder called “Henry” and put a blank style.css and functions.php in it. These blank files, of course, should be created by NotePad in Windows or TextEdit in MacOS as plain text. In the style.css insert the following:
/*
Theme Name: Henry
Theme URI: https://robcubbon.com
Description: A child theme of the 2010 default theme for WordPress.
Author: Rob Cubbon
Author url: https://robcubbon.com
Version: 1.0
Template: twentyten
*/
@import url('../twentyten/style.css');
Now you will need an FTP program (like Filezilla for instance) to upload the Henry folder into the wp-content/themes/ folder alongside Twenty Ten and activate Henry via Appearance > Themes in the WordPress administration area.
Congratulations, you have made your first child theme. If you check out the appearance of the site after having activated Henry you will see Henry looks exactly the same as Twenty Ten – only it’s not Twenty Ten, it’s Henry.
Changing design of WordPress Twenty Ten theme with a child theme
In this video I show how I identify the CSS that needs to be changed in the theme and how I add it to the child theme in the WordPress back-end.
You can add different styles to the style.css in Henry and they will override the Twenty Ten styles (if you add the styles after the call to import the Twenty Ten styles, of course).
Here again is a link to the site I created with a child theme of Twenty Ten: www.quitcigs4free.com.
As you can see, I’ve increased the size of the sidebar, added bullets, changed colors and generally messed around with Twenty Ten until it doesn’t look like Twenty Ten. It looks like Henry ;)!
The beauty of styling a child theme is that you start out with a mercifully short style.css – as you have called the parents styles with @import url('../twentyten/style.css'); – so no endless scrolling and squinty eyes trying to find a line of code!
There are a few tools that are essential for styling websites. These are Developer Tools in Chrome or Internet Explorer and the Firebug extension in Firefox. Personally I use Developer Tools in Chrome. On the Mac a quick Command-Option-I brings it up, then I can click on an element with the magnifying glass icon and the styles and style sheet that is affecting it will show up in the panel.
These tools will also show you which CSS selectors effect an element and which are overridden. And you can make HTML and CSS changes on the fly and view those changes.
Changing the functionality
As discussed, functionality can be changed or enhanced with plugins. Make sure you choose popular and well-supported plugins. The WordPress Plugin Directory shows you the number of downloads as well as crowdsourced compatibility stats.
You can also use functions.php to add functionality and code using WordPress Filter Hooks. For example, here is my function for adding a favicon.ico call to the header. You can use functions.php to put just about anything anywhere in your site and change or enhance the actions of the WordPress core.
<?php function my_head_function() {
echo '<link rel="shortcut icon" href="http://www.quitcigs4free.com/favicon.ico"/>';
}
add_action('wp_head', 'my_head_function');
?>
This all seems complicated but it really isn’t. And it is a great way of controlling every pixel of your site whilst leaving WordPress and the theme to produce your website with the some of the most clean, validated, search engine friendly code there is.
Sources
- Child Themes -WordPress Codex
- Theme Development – WordPress Codex
- How to Modify WordPress Themes the Smart Way – excellent four-part series on child themes by Ian Stewart, creator of Thematic.
- How to make a child theme for WordPress: A pictorial introduction for beginners – illustrated introduction to child themes
- Introducing Thirty Ten – guide to creating a Twenty Ten Child Theme
- Twenty Ten theme site
What about you?
If there’s one question I’m asked more than any other by the visitors to my blog it’s this: “How do you amend your WordPress website”. The reason this is only the first time I’ve tackled this issue is because all themes and plugins are different so it is difficult to advise people on what to do.
Has this been helpful? How do you amend and customize your WordPress site? I’m always keen to hear your comments.
I have heard of child themes, but never really looked into them. Although I may do so in the future.
Currently, I design and create my own theme, from scratch. I enjoy doing it, and have learned a lot about WordPress and CSS from creating my own theme.
As for plugins, I try to limit which plugins I have running, but there are so many good ones that I do get carried way. I clean up my plugins folder once in a while by uninstalling plugins that I don’t feel are really beneficial for my blog.
Hello again, Paul, I would definitely recommend you to take a look at child themes.
As per-usual Rob, you’ve written a post that is quite useful to me. Much like Paul, I’ve never really looked into child themes.
I’m currently searching for a suitable theme to work on for the next redesign of my blog. I’ve been looking into some Obox themes recently, but I’m also going to check out some of the resources you’ve linked to…
Thank you, Andrew, I’m glad that this is useful. I’m the same as you too, I’ve been using my own themes for years but now I’m coming over to the child theme camp. I’ve already seen some of my code in older websites superseded (especially comments.php) and that’s worrying. Plus a theme framework has lots of goodies already expertly coded which can save you time.
I’ve made the plunge already and have bought Genesis (affiliate link) and I will probably redo this site with that as some stage. But I can recommend Thematic, which is free, as is building a child theme off Twenty Ten. Let me know how you get on.
Rob, I really do like the current theme that’s on your site right now.
Is it a free theme that I could download and use or is it part of of theme framework?
The recent Google’s panda update has affected my site so I’m on a mission to redesign my site.
Thanks! Will definitely be visiting again.
Hi Rob,
Excellent article. If I may add, I used TwentyTen as a theme framework in a couple of projects, and it worked like a charm after stripping out some of the unnecessary stuff that was not needed to the projects in hand.
One of the projects is still in the pipeline, but once published, I’ll come back here and post a link to it as a demonstration of using child themes!
Hi Bob, this is my own custom theme which I haven’t released through the WordPress themes directory because I’m not sure about some of the code. If you want to use it or have a look at it, drop me an email and I’ll send it to you. Best of luck with your site!
Hi Ayman, yes, please post your link to your Twenty Ten child theme site when it’s ready. How did you strip out unnecessary stuff – did you do it with a filter hook in the functions.php or did you recreate the respective php files in the child theme?
Thanks Rob. You’ve inspired me! I’m going to try and create a child theme around Twenty Ten when I eventually get around to my own proper blog.
You are so right reminding us of the merits of the default theme.
Firebug is fantastic freebie, but then I discovered Stylizer – http://www.skybound.ca/ . It feels like cheating, but it’s made life so much easier.
Hey, I’m so glad I’ve inspired you, David, thanks for the heads up about Stylizer 🙂
Hi Rob,
Thanks for this very useful post. The Theme Frameworks list you gave is a eye opener. Didn’t know there where free good frameworks around. A eyeopener for me. I don’t like to code that much, so a good framework save a lot of hassle.
Thank you, McBart, I’m glad you found it useful. Definitely check out some of the free frameworks, I’ve heard some great things about Thematic. Don’t forget to create a child theme if you want to change it though!
Thanks for pointing out the Thematic framework and it’s good feedback. I will certainly test Thematic, as I am going to setup a new blog in the next weeks. You drove home the point of creating a child theme very well. I’ll remember that 🙂
For my sites I used before the generator templates, but now I do it all yourself. And the code is better at the site and obtain various.
thank you for post
WordPress has been a savior to me as a marketer / web designer! No longer do I have 20 minor text changes to client’s websites sitting in my to-do list, my client can take care of that him/herself.
I love using Elegant Templates! They truly are beautiful and easy to set up. Stay away from TemplateSold, as most of their templates haven’t been updated for WordPress 3.0+.
You’re absolutely right, Brandy, getting the client to make their own changes is one of the benefits of WordPress that benefits both the designer/developer and the client. Thanks for the recommendation for Elegant Templates, they certainly look good. And good point about 3.0+ compatibility – Genesis has just released an update to their theme framework so I know that’s bang up-to-date as well!
The reason some of us do not always get upgraded is because it takes time, and therefore money. Added to that the fact that most of us would rather run the business behind the website and not the website itself. This means hiring a professional to upgrade and paying for this is like pulling teeth, beneficial, but painful. Your points on the necessity of it are valid though.
Fair enough, Garrett, whether you do this yourself or get an agency to do it for you, upgrading and backing up are essential tasks. Thanks for the comment.
Hey Rob… Great article-thanks…
Didn’t know much about child themes until now. Decided to implement this approach on a current site mod. Ran into a few problems, the biggest being that the child theme is not recognised by the mother theme due to the header.php file calling the parent template. Even after modifying header.php to say ‘stylesheet’ instead of ‘template_url’ nothing gives. Spent a couple of hours researching the issue but no fix yet. Any clues on that particular issue?
Keep up the good work!
Hello Stewart, which theme are you using as the parent theme? It’s possible that this works with certain themes (Twenty Ten, Twenty Eleven, etc.) but not others.
I’m a bit confused by your question as the header.php file in the parent theme should be calling the parent template. The child theme shouldn’t have a header.php, you should make changes to the header with functions.php.
Sorry I can’t be of more help.
Rob…
My header.php of the PARENT theme will always call the parent template even if I have a child importing its own styles (apparently). Because the code in the header.php says this
instead of this
I found this out by typing “Child theme style.css not overriding parent” into WordPress org and tried a solution mooted there…to no avail. It’s the top returned answer if you fancy a look.
Oh, and im using executive-wp ..and the author isn’t responding to contact request.
Cheers
Oops.
Trying to post the code so you can see: [code] INSTEAD OF [/code]
I didn’t get the code there, Stewart, WordPress doesn’t convert it in comments, unfortunately. However, the header.php of the parent theme should call the parent styles, etc., that shouldn’t be a problem. The child theme should override the parent styles by having that line in the CSS. Stupid question: you did activate the child theme not the parent theme?
By the way, the Theme Forest forum should be good for this, shouldn’t it? You’ve spent money there. No that I mind you asking questions here. 🙂
Thanks for your time Rob.
I’ll get it sorted eventually….
Come back and let us know what happened when you do, if you get a chance.
I use an online editor called Lubith that is based on the twenty ten theme, that’s the default layout that you work upon, but there are a lot of things that you can do from there. there are a lot of ways in which you can change the layout, the look and feel of the site, plus it has some really cool editing tools that give you a lot of freedom. + some CSS and some plugins and I have the professional looking site that I always wanted
Thanks Trevor, I’ve got to give Lubith a go.
Wow this is very detailed. Knowing how to customize your own WP theme can save you a lot of headache and money. Thanks to open-source systems and WP in particular the cost of creating a website has dropped significantly.
Glad you liked it, Reg.
Hi Rob,
I see how making a child them is beneficial so that your changes aren’t overridden, but if the framework is updated and changes are made, then doesn’t that mean that some of your overwritten css and other changes might also not work at that time and will therefore have to be changed accordingly? Same goes for any changes made in the functions.php file?
Thanks,
Susan
Hello Susan, no, the functions.php and the style.css that sit in the Child Theme will never be updated and will never get overwritten. The theme framework will get updated from time to time but it is very unlikely to effect your site. If you want you can completely copy all the styles from the framework into the child theme and then amend as necessary. But when frameworks get updated they hardly ever update the style anyway.
so hook names and css styles are never changed in updates from wordpress?
I believe that WordPress would never change a hook name that they’ve already used – although they might add new ones. I’m pretty sure about that. And WordPress doesn’t ever affect the style of the site, as far as I know, that’s all in the theme.
Rob, thank you for the quick responses! I’m making a child theme from twentyeleven. So when there is an update from that theme, I won’t have to worry about css styles changing?
No. Make sure you copy all of the styles from Twenty Eleven into your child theme to make doubly sure. But I’m not even sure that is necessary.