Using Child Themes In WordPress

This is the second tutorial in my series on creating and using child themes in WordPress. The first tutorial showed you how to create a basic child theme.

Now we will learn about using a child theme, and see some of the things that can be accomplished using a child theme.

In order to modify your theme template files, you will need a working knowledge of CSS, PHP, HTML and the specific WordPress template tags and program logic. This tutorial does not attempt to cover those subjects, so it is suggested you visit the WordPress codex and spend the necessary time to acquire a basic knowledge of those items. The skills you will need in those areas depends on the complexity of the modifications you wish to add to the child theme.

Just a quick note here…..You can take advantage of some really great training, and it’s free (can’t beat free), and you will find the schedule of upcoming events at WP training – GREAT webinars w/Benjamin Bradley at WebDesign.com

The following examples are made using the iThemes Builder Theme as the parent theme. The code might be slightly different when modifying a different parent theme, but the examples should give you a good idea what is involved in changing font colors, sizes, alignment, etc.

Making Your Child Theme Work For You

We will do a couple of random changes just to demonstrate some of the effects you can achieve using child themes

1. Change overall font size, color and style, and alignment

Add the following code to your child stylesheet to change the default font. Important….. any code preceded by /* and ending in */ is comment text, and it is there to remind you what the code does. I strongly advise you to use comments in all of your code so that you will remember when, why and what you did when you review your changes at some later date.

/* Example Number One: Change overall font size, color and style, and alignment
------------------------------------------------*/

body {
    font-size: 70%;
    color: #990000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

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

Add the following code to your child theme stylesheet to change the text alignment for the content text, and to change font size and text alignment in the widget.

/* Example Number Two: Change text alignment only in the content, change font size and text alignment in the widget text
------------------------------------------------*/

#content p {
    text-align: justify;
}

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

3. Change hyperlinks and hover styles

/* Example Number Three: Change hyperlinks and hover styles
------------------------------------------------*/
a {
    color:#0000ff;
    text-decoration: none;
}

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

4. Do not display "By" and "Comments"

/* Example Number Four: Do not display "By" and "Comments&quot on post;
------------------------------------------------*/
.post .post-meta {
    display: none;
}

5. How to add your own function to your theme

This is more advanced. In this example, we will be adding a new widget area to the theme. We can use this widget area to allow us to add text that will appear above all posts (in detail view). It could be used for whatever you want, advertisements, announcements, affiliate ads, etc.

Create a new file and name it functions.php, then add the following code. Save this file and then upload it 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' => '
','after_widget' => '

','before_title' => '
','after_title' => '

',));

?>

Next you will need to copy the single.php file from your 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') ) : ?>

This is our Top of Post Widget Section

For demo purposes, we created this widget that will show above a post. This Widget Section is called "Top of Post".

        <?php endif; ?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); // the loop ?>

Hopefully this will give you a brief introduction into what can be done using child themes.