Categories
Lynda.com Video Tutorials

Building WordPress Child Themes with Twenty Twelve – new and updated course on lynda.com


If you are following my courses on lynda.com you may have noticed that there is an update for my WordPress 3: Building Child Themes course. But this is more than an update. With all the developments and new features of WordPress, I thought it better to completely revamp the course to incorporate new tips, techniques, functions and features to make your experience building child themes as up to date as possible.

For the all new WordPress 3: Building Child Themes course I also chose to use the new Twenty Twelve theme as the parent theme. Twenty Twelve has been out for a little over a month, but only as an add-on. When WordPress 3.5 comes out in early December however, it will become the new default theme in WordPress. That means if you jump in now, you’ll have a head start on everyone else using Twenty Twelve and building child themes off it.

The course looks at how to build a standard child theme and best practices around how to create new styles, add new functions, and alter the different template files to give the child theme a personal touch and make it do what you want. I’ve also added in some clever new elements towards the end like a dynamic welcome message that only appears on the front page.

The original Building Child Themes course was hugely popular and I am hoping that this new and improved version will be even more so. But don’t take my word for it: Head on over to lynda.com and check WordPress 3: Building Child Themes out for yourself!

If you don’t already have a lynda.com account and you want to try it out, go to lynda.com/trial/mor10 and get a free 7 day trial.

Categories
24 Days of WordPress Tutorials

Day 10: Creating New Widgetized Areas

When I say “widget” you probably think “sidebar”, right? And you’d be right… well, sort of anyway. In WordPress you’ll normally find widgetized areas in the sidebar of the theme. But there is no reason why widgets can’t be placed elsewhere and used for other things. On this 10th Day of WordPress we’ll look at how to create new widgetized areas in WordPress and how to override the existing widgetized areas in the twentyten theme.

Widgetized areas for just about anything

There are many reasons why you may want to add widgetized areas to your site. You may want to add a seccond column in a sidebar or add a whole new sidebar, you may want to add widgets to your footer or you may want to add a different sidebar alltogether to one of your page or post templates. But widgets and widgetized areas can be used for other things as well. I’ve used them to populate content on the front page, as pop-up messages and as optional spanning banners. A widgetized area is in all honesty just a box controlled from the Appearance -> Widgets area. What you do with that box is up to you.

Setting up a new widgetized area

To set up a new widgetized area you need to do two things: One, define the new widgetized area in your theme’s functions.php file and two, add a call to that widgetized area in one of the template files for your theme. Let’s tackle functions.php first:

More than likely your theme already has widgets activated. You’ll find them by going to your functions.php file and looking for a function called widgets_init() or something to that effect. Within that function you have definitions for each of the widgetized areas. The default use function looks like this:


$args = array(
	'name' => sprintf(__('Sidebar %d'), $i ),
	'id' => 'sidebar-$i',
	'description' => '',
	'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ' );

    The variables listed here are more or less optional but as a rule of thumb I recommend leaving them all in. For ease of use it’s a good idea to be quite explicit about what you are building. Say for example I’m adding a widgetized area that will display an ad at the top of my site I would create a new widgetized area using this code:

    
    register_sidebar( array(
    	'name' => ('Header Ad Zone'),
    	'id' => 'headerAdZone',
    	'description' => ('The ad zone that appears at the top of the page'),
    	'before_widget' => '
    ', 'after_widget' => '
    ', ) );

    New Widgetized areaThis produces a the new widgetized area you see to the right.

    The next step is to call this widgetized area from one of your template files. Here we’re going to add a conditional statement that checks whether there is an active widgetized area with content first. That way we’ll avoid trying to activate a widgetized area with nothing in it. The call looks like this:

    
    <?php if ( ! dynamic_sidebar('headerAdZone') ) : ?>
    <?php endif; ?>
    
    

    Here you can choose to insert something between lines 1 and 2 that will be inserted if the widgetized area does not have any widgets in it. The name of the widgetized area (in between the brackets) can be either the name or the ID defined in functions.php

    Changing the widgetized areas in a twentyten child theme

    The twentyten theme has 6 widgetized areas, two in the sidebar and four in the footer. But what if you want to change these or add new ones in your child theme? If you read my earlier tutorial Day 2: Creating a WordPress Child Theme the Smart Way you should already have an idea. Because the widgets_init() function has already been called in the twentyten functions.php file you need to unregister this function and then build a new one yourself. You do this with the following lines of code:

    
    // Remove the default sidebar function
    function remove_twentyten_widgets() {
        remove_action( 'widgets_init', 'twentyten_widgets_init' );
    }
    // Call 'remove_twentyten_widgets' (above) during WP initialization
    add_action('after_setup_theme','remove_twentyten_widgets');
    
    

    Now you can create a new function and create new widgetized areas:

    
    function MY_widgets_init() {
    	register_sidebar( array(
    		'name' => ('Header Ad Zone'),
    		'id' => 'headerAdZone',
    		'description' => ('The ad zone that appears at the top of the page'),
    		'before_widget' => '
    ', 'after_widget' => '
    ', ) ); }

    And finally you need to call the new function:

    
    // Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
    add_action( 'widgets_init', 'MY_widgets_init' );
    
    

    If you want to keep the existing widgetized areas from twentyten and add on to them simply copy and paste the widgetized areas you want from twentyten’s functions.php over to your child theme functions.php. Then all that’s left is to call the areas from your template files like we did above. Easy as π.

    This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.