Customizing a WordPress theme is generally on the wish list of anyone who is using WordPress to power their website. Most people hack into the theme files and try to make modifications to get things to look the way they want them. While this seems to be the way to do this it creates a secondary problem. Often times theme authors (including WordPress for its own default themes) will issue theme updates. If you’ve made any changes, the update breaks them and replaces them.
For this reason, WordPress uses a system called Child Themes. As the name implies, Child Themes are dependent on an installed Parent Theme. This might seem confusing, but its a great, simple way to make modifications that will be safe from future updating. Child Themes are a very simple concept and easy to write.
Lets say you’ve found a great theme, but there’s some simple thing driving you nuts. Perhaps you don’t like the font. Maybe the post title text is the wrong color. You don’t want the site to say “powered by WordPress” in the footer. The simplest way to fix this is by writing a Child Theme. Lets take the last example of removing the “powered by WordPress” text on the bottom of every page.
Customizing a WordPress Theme With Child Themes
Create a folder on your FTP server in wp-content/themes/ and name it what ever you like. I usually name it after the website to keep it clear.
Create a file in this folder called style.css – this is important. The file must be called “style.css”.
Open this file and paste the following – make changes where noted:
/*
Theme Name: The name of your child theme - could be anything
Theme URI: The URL for your website - if you're not distributing this child theme this isn't important
Description: Child theme for the Twenty Twelve theme
Author: Your Name
Author URI: A link to your website
Template: twentytwelve
Version: 0.1.0
*/
The important lines in here are the Theme Name and the Template. The Template must be the proper name of the parent theme or this won’t work.
Below this, paste the following code:
@import url("../twentytwelve/style.css");
This tells WordPress to bring in the stylesheet of the parent theme. Now any CSS you write in this file will override the Parent Theme styles. You could completely rewrite the stylesheet – if that’s what you want to do, skip the import line, but this tutorial is for people who want to make small changes.
You now have a Child Theme set up – congratulations! Go back to the WordPress Admin and activate your new Theme.
So how do you start making changes? For CSS styles, add styles to the style.css file we just created. These will override the parent styles.
For template changes, copy the Parent Template into our new Child Theme folder and make your changes there. Because WordPress knows this is a child theme, it will override any parent template files with files in this folder. We want to take out the “powered by WordPress” statement, so copy the footer.php file from the twentytwelve them into your new child theme folder. After you’ve copied this file, make changes to the file in our new Child Theme. WordPress will ignore the old one.
If you open the new footer.php file you copied, you should see:
<?php
/**
* The template for displaying the footer.
*
* Contains footer content and the closing of the
* #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?>
</div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">
<div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Simply remove the lines that read:
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
You could replace those lines with something else if you want – I usually add a footer menu here so I can link to things like privacy policies, but you could leave it blank as well.
So that’s it! Next time WordPress updates the Twenty Twelve theme you won’t start seeing “powered by” again because your new Child Theme will remain untouched.
Chances are you’ll be making further modifications which is great. If these files were overwritten you’d loose them all which is the whole purpose of using a Child Theme.
 I've been working with WordPress since it came out back in 2003 on various design and photography sites that I've had over the years. Check out my Google+ Profile
|