Using theme inheritance to customize your theme

If you want to add your own customizations to a readymade WordPress theme downloaded from here or elsewhere, the most obvious way to do it is to directly edit the template files and style.css of the theme. But this method can lead to complications when the theme author updates the theme to a newer version. If you directly overwrite the files from the newer version, you will lose all your customizations. So, you will have to check every file of the new version for changes, and apply those changes to your customized files. This can be a demanding process especially if you are using a theme that’s updated frequently. Alternatively you may choose to skip the upgrade process, in which case you may miss out on important security updates.

This is where theme inheritance is such a versatile method to add your own customizations to a theme. Creating a child theme is as simple as creating a folder and putting a style.css file into it with a just a few lines of code. With theme inheritance, you don’t have to miss out on updates to the parent theme, and your customizations will never be overwritten.

For example, if you want to customize the F2 theme, here is how to do it.

Firstly create a new folder in the wp-content/themes directory and name it something like ‘f2-custom’.

In the new folder, create a file ‘style.css’ and put in the following content

/*
Theme Name: F2 Custom
Theme URI: http://srinig.com/wordpress/themes/f2/
Description: Customized version of the F2 theme.
Version: 1.0.4
Author: Srini G
Author URI: http://srinig.com/wordpress
Template: f2
*/

@import url("../f2/style.css");

The line Template: f2 is important as it tells the system that the theme inherits from the F2 theme. Note that the parent theme is identified with ‘f2’, the parent theme directory, and not ‘F2’, the parent theme name. This value is case sensitive.

Also important is the line @import url("../f2/style.css");

That is all, you have now created a child theme that inherits for them F2 theme. You can go to your WP admin -> Appearance -> Themes and select your new theme. But your new theme will render your site in exactly the same way as the parent theme as we have not added any customization yet. So, let us now add something to the style.css of the child theme.

/*
Theme Name: F2 Custom
Theme URI: http://srinig.com/wordpress/themes/f2/
Description: Customized version of the F2 theme.
Version: 1.0.4
Author: Srini G
Author URI: http://srinig.com/wordpress
Template: f2
*/

@import url("../f2/style.css");

body { background: #000; }
#page { width: 740px; }

Here, we are changing the body background from #888 (greyish (F2 default)) to #000 (black). We are also fixing the width of the layout to 740px thereby converting this fluid width theme into a fixed width theme.

You can add any styling you want, but make sure that the line @import url("../f2/style.css"); precedes all your custom styling.

The customization is not limited to style.css file. You can customize other template files as well. For example, if you want to add some introductory note in the blog home page, you can customize the index.php file.

Firstly, copy the index.php file from the ‘f2’ directory (the parent theme) to the ‘f2-custom’ directory (child theme). Then edit the file and add the highlighted line.

<?php get_header(); ?>

	<div id="content">
	<div style="margin:10px 0; padding: 10px 20px; background: #eee; border:1px solid #aaa;">Welcome to Srini's WordPress Laboratory.</div>
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>

			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
.
.
.

Contents of the rest of the file is omitted here for the sake of convenience, you must of course save the full content of the file.

Another thing you can do is to customize the way comments are displayed by specifying your own comments structure instead of the wp_list_comments() function call in the comments.php.

Similarly you can customize any template file in any whichever way you want. The sky is the limit!

You may also want to check out these links:

25 thoughts on “Using theme inheritance to customize your theme”

  1. Don’t laugh, but I’m having a heck of a time changing body text color in my static pages. I changed the style sheet under “body” color but no-go. What am I doing wrong? (Change color from light grey to near black)

    body {
    margin:0;
    padding:20px;
    background:#888;
    color:#555;
    font-size: 72.5%; /* Resets 1em to 10px */
    font-family: ‘Lucida Grande’, Sans-Serif;
    text-align:left;

  2. Thanks,

    How (where) do I change the sidebar (right or left)background color? I’ve looked everywhere in the stylesheet.

  3. If;

    #page { width: 740px; }

    is the command for fixing a width, what is the command to make it fluid/unfixed for a theme that has a fixed width?

    1. Turning a fluid width theme into a fixed width theme is quite easy, but making a fluid width theme is a difficult task. So, a fixed width theme can’t be turned into a fluid width theme that easily with a single command/line of code, generally. It depends on the theme you are using.

  4. Hey, thanks for your answers.
    First i am sorry for my bad English 🙂

    I want to change sidebar width.
    But i can’t.

    I am using firebug extension for firefox i can change sidebar width by firebug.

    But I am changing, adding or deleting some codes in style.css but i didn’t change it.
    How can i change sidebar width?

    Thanks for now.

  5. Hi,

    I am using quote collection pligins for my site in side bar which shows randomly quotes but i donot want to display randomly. Is there any how an i prevent randomly.
    I am using this function in side bar.

    quotescollection_quote(‘ajax_refresh=0&char_limit=300’);

    Please help me.
    Thanks in advance.

    Best Regards,
    Tanveer Hussain

    1. Right now, only random quote is possible, if you want to refresh by order you will have to wait for a future version where it may become possible. If you want a custom solution, contact me.

  6. Cheers and bless you, Srini, for the F2 theme. It is very nice, and XHTML and CSS! This week I have customized my first WP blog using F2. I have successfully made minor changes to almost every template, plus style.css. Now I realize I will have a problem if I download an updated version of the theme…

    So here is what I do today: I create ‘f2-custom’ directory in the wp-content/themes directory. I copy ‘style.css’ file AND the changed template files and place them into this directory.

    I edit the child ‘style.css’ file to add the code above before the divs and classes. Then I go to Appearance, my ‘f2-custom’ theme will be listed, I activate it. Then I can download an updated F2 theme sometime, but still keep ‘f2-custom’ as my active theme. Is this all correct?

    Q1: Do I have to delete from the child ‘style.css’ file the code that did not change?
    Q2: If I put no special code in the template files, how does WP relate them to the parent F2 templates? Via the css file?
    Q3: My updated files are still sitting in the main F2 directory, but they will be overwritten when I download an updated theme someday. Is there any reason I can’t just leave the changed files in the F2 directory for now?

    I thank you VERY much for your reply.

Comments are closed.