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 Comments

  1. I know Photoshop quit well but when I enter #eee I do not get a grey like the grey in the sidebar. I search the Internet. I see charts for 3-digit hex and #eee is not grey. I sure this is a simple question for you, but please help! Thank you much. I live F2 theme!

    • i think you’ll find Klaus that three digit hex codes are used for six digit codes that repeat themselves, ie: eee is the same as eeeeee.

      Happy Christmas

  2. Thanks Srini,

    This has made the transition from an awkward journey using Drupal to WordPress an easy journey. I’ve got a question that probably sit outside of the remit of this theme per se, but if so – could you direct me to suitable resources?

    I want to create submenus of pages that will open in the righthand sidebar when the top-level page is invoked. Easy to do in Drupal – how so in WordPress?

    Many thanks

    Charlie

  3. Srini,

    In addition, I’ve been unsuccessful in replacing the list arrow icons with circles as per my desire. which element of the css requires this edit? Should be easy, but feeling foxed.

    Thanks

    Charlie

  4. Hi Srini.

    I’m having a problem getting Google Analytics to record visitor data to my. Their page says it is reading the site, but no data is being recorded. I added the Google XML Sitemaps plugin thinking this might help, but it didn’t.

    Looking at Google’s page, they want me to put the code after a tag. I don’t think F2 uses these, but perhaps I missed something.

    Do I need to put the Google code in a custom inheritance sheet to make it all work?

    • I put the Google Analytics code right above in the footer template and it is working well. Access the footer by logging into WP, clicking Editor, and choosing footer.php under Templates.

  5. Hi Srini,

    I really like the F2 but am having problems with the margin for the title and description. I am using a logo in the left corner of the header and want the title and description to appear to the right of it. However when I change the margins on the style sheet nothing happens. Any ideas?

  6. Hi,
    I’ve added a search widget and trying to customize it so it’s width will be less than 120px.

    I did exactly what you’ve wrote here but it seams that when I add:

    .sidebar #searchform #s {
    width: 80px;
    padding: 2px;
    }

    in the style.css file in f2-costum theme, it has no effect on the input area…

Comments are closed.