Written by on

iThemes and Child Themes – a quick tutorial #1

This is the second post on Child Themes. In the previous post I explained a bit on the background, now it’s time to start using a child theme, and see some of the things that can be achieved using a child theme.

When modifying theme template files, you do need a working knowledge of CSS, PHP, HTML and the specific WordPress template tags and program logic. Of course, this all depends on the complexity of the modifications you wish to add to the child theme.

A Basic Child theme

I have prepared a basic Child Theme for Builder, you can download it here.

The Child theme contains a stylesheet, and images used in the theme, in particular those referenced in the stylesheet. I’ve also included a preview screenshot of the the parent theme, just so that there’s a preview image in the WordPress Theme overview panel.

Once you’ve downloaded the sample Child theme, upload it to your theme folder, and activate the theme just as you would do with a “normal” theme.

Your themes panel will look like this (assuming you have the Builder Parent theme activated):

Builder Child theme intro

Builder Child theme intro

Note the description of the child theme:
The template files are located in /themes/BuilderChild-Tutorial. The stylesheet files are located in /themes/BuilderChild-Tutorial. Builder Theme > Child Theme Tutorial uses templates from Builder. Changes made to the templates will affect both themes.

After you have activated the Child theme, and since we have not made any modifications, your site will look just as the Parent theme.

The Child Theme in Action

I’ll just do a couple of unrelated, random changes, only to demonstrate some of the effects you can achieve using child themes.

iThemes Builder customers can attend an exclusive training workshop on Builder next Friday, Jan. 8, 2010 (reserve your seat here) and they can also put their specific questions and issues on the agenda.

1. Change overall Font size, colour and style, and alignment

Add the following code to the Child’s stylesheet to change the default font. Note, code preceeded by /* is just comment text, that I can advise you to use, so that you will remember when, why and what you did when you review your changes after a while.

/* EXAMPLE 1: Change overall Font size, colour and style, and alignment
------------------------------------------------*/

body {
    font-size: 80%;
    color: #2c5b8e;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

2. Change alignment only in the content, change font size and alignment in the widget text

Add the following code to the Child’s stylesheet to change the text alignment for the content text.

/* EXAMPLE 2: Change alignment only in the content, change font size and alignment in the widget text
------------------------------------------------*/

#content p {
    text-align: justify;
}

.widget p {
    text-align: right;
    font-size: 75%;
    line-height: 1em;
    font-style:italic;
}

3. Change hyperlinks and hover styles

/* EXAMPLE 3: Change hyperlinks and hover styles
------------------------------------------------*/
a {
    color:#e1771e;
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: underline;
}

4. Do not display “By” and “Comments”

/* EXAMPLE 4: Do not display "By" and "Comments"
------------------------------------------------*/
.post .post-meta {
    display: none;
}

5. Add your own function to the theme

Slightly more advanced, we will be adding a new widget area to the theme. The purpose of this widget area is to allow us to add text that will appear above all posts (in detail view). It could be an advertorial, a general announcement, or whatever use you can think of.

Create a new file, named functions.php, and add the following code. Save the file, and upload to your Child Theme folder on the server.

<?php //Custom functions for the Builder Child theme Demo

// Register another widget, just because we can
register_sidebar(array('name'=>'Top of Post','before_widget' => '<div id="top_of_post">','after_widget' => '</div>','before_title' => '<h4>','after_title' => '</h4>',));

?>

Then, you will have to copy the single.php file from the parent theme to your child theme, and change it to include the widget code, if entered. Replace the first lines of code as indicated:

<?php

function render_content() {
	
?>

<?php   // Child Single page:
        // - added the Top of Page widget ?>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Top of Post') ) : ?>
                <div class="widget">
                <h4>This is our Top of Post Widget Section</h4>
                <p>For demo purposes, we created this widget that will show above a post. This Widget Section is called "Top of Post".</p>
                </div>
        <?php endif; ?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); // the loop ?>

Try these out, and hopefully this will give you a brief indication of what can be done using Child themes.

Comments

  1. Ronald,

    This is truly amazing what can be achieved with code….I am not a wiz at CSS, html or php but I fiddle around a bit, but I can see where it’s going. It is very complex, but extremely intriguing to say the least! Thanks Ronald!!!

    Regards, Randa Kassisieh

    I will come back and absorb more of this. If you don’t mind me asking, where would you change the borders, like rounded edges etc…???

  2. Nice tutorial, should help a lot of people out. It was especially nice how you mentioned copying the single.php file from the master theme to the child theme.

    there seems to be a ton of confusion in the forums about upgrading builder. I don’t think most people get it, that you can bring virtually all the files over to the child theme to work on, thus having no worry about upgrading builder as those files are not touched.

    I actually find it good practice to bring over virtually all of the files to my child theme from the builder core theme. It’s only a very rare case that I would ever have to modify something in the actual parent theme, and even then that would not apply to 99% of the users out there anyhow.

    Best practice is to never edit anything in the builder core theme if possible.

    —Once we can also bring over the template folders from the core to the child, then I can see no reason to really ever touch the core theme.

    @Randa – You change borders, edges, etc via your child theme stylesheet. If it’s more involved than a few tweaks you may also have to edit your child theme files like single.php as well. Question is better suited for the forums….

  3. Shawn,

    I added the example of modifying the functions.php and single.php to point out that functionality of Child Themes.

    And my approach to Child Themes (and it’s my personal preference) is to ONLY add customisations to the Child theme code.

    Only copy the theme template files that I wish to modify, and only add the css code to the child theme template where it should override the parents stylesheet.

    That way, it will be easy to find out where a parent update will affect the Child theme.

    Example, some times, a fix to a certain issue will involve adding something silly like display:block;, clear:both; or overflow:none; to a certain selector in the CSS.

    When using a complete duplicate of the parent CSS and modding that, you will face the same challenge as if you weren’t using a child theme. You will need a source diff tool, or an application like Winmerge to find out how to reapply your specific mods (e.g. changing a hover colour, a font size, which, in the end of the day is the kind of customisations most customers look for) to your child theme stylesheet, whereas, if the child theme files only contain your specific customisations, in 90% of the Parent updates you won’t have to worry about the impact on your own mods.

    If all I want is to remove the post date from the single post file, that is the file I copy to my child theme and modify. I will also realise that when the parent updates, all I have to focus on is the differences between the Child themes’ single.php and the updated parents’ single.php. If I have all theme files in my child theme, even the unmodified ones, again I will be back at square one, and would have to verify each and every template file for changes.

    I guess it all depends on the level and complexity of the theme modifications.

  4. Couldn’t edit the child theme’s CSS until I had modified it outside of WP and then uploaded it. The required change: remove the > symbol in the theme name, replace with – (hyphen). Until I did that, WP kept giving me the error message “The requested theme does not exist” every time I tried to save the style sheet.

  5. Hi Max, that is curious. It may be a server issue, I’m using this with the > in the title without any problems.

    Thanks for letting us know, we’ll keep this in mind should we encounter similar issues.

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35