Making a WordPress Theme: #3

The third stage of making a WordPress Theme I wanted to concentrate on is Widgets; and it is trickiest to date. Not in terms of the technicalities of making WordPress recognise widget areas. But simply finding a place for the widget to go.

Because at the time I didn’t know if I wanted widget areas in my theme I didn’t think so far ahead as to prepare a widget area in my static theme. For the most part, I planned for the site will be free of widget areas visually but I did find I wanted a couple of widgets in the top and bottom of my blog content i.e. the home.php template.

In terms of finding getting widgets to work it is quite straight forward.

  1. Create a widget area in functions.php
  2. Find a place in your templates for the widget to actually go.

As a WordPress Developer, you are in complete control of where your widgets appear.

This is how I did it for my theme.

Hello WordPress, I’m adding a widget area to this theme

There are 2 main functions that WordPress uses to create Widget areas. These are create_widget and inside it, register_sidebar. Sidebar is the WordPress speak for a widget area. I suspect although I’ve not researched it, that’s simply a throwback to early days WordPress terminology.

function create_widget($name, $id, $description) {
       register_sidebar(array(
       'name' => __( $name ),
       'id' => $id
    ));
}

What happens here is that  an array of objects by using some parameters.   These control the name. id and the description of the widget area; so customisable strings that describe the widget and what it will do.

function create_widget($name, $id, $description) {
    register_sidebar(array(
    'name' => __( $name ),    'id' => $id,
    'description' => __( $description),
     'before_widget' => '
',
     'after_widget' => '
',
     'before_title' => '<h2 class="module-heading">',
     'after_title' => '</h2>'
    ));
}

The ID key doesn’t go in the admin area.  It is merely a unique identifier for the individual widget.  This is the id or slug that WordPress will use to distinguish it from another.

Then the function is then called and the values for the parameters passed in. You’d then see this values in the Widgets page of the admin area. That’s all you need to make the widget area appear in the admin area. There are a few other customisable options such as using dynamic HTML classes as containers for your widgets but these are optional.

create_widget('Page Sidebar','page','description');

Once added, all the widgets are available and can be dragged into the widget areas via admin area.  But much like we did with the menu area for WordPress, all we’ve really done is let WordPress know that a widget area exists.  The next stage is to let WordPress know where in the template it is.

Now WordPress, here’s the place for my widget

WordPress uses a specific template file for widgets that is used to store the widget markup. So this is where the building blocks of the widget will go.

sidebar.php
<?php if(!dynamic_sidebar('blog') ) : ?>
     <p>Problem pulling in widget to widget area</p>

<?php  endif; ?>

We generate a widget by first checking that a widget with a certain id exists. If it doesn’t we generate some markup telling us that there is a problem. But if everything does work we should see the widgets below.

wordpress-widgets

How did I get it there?

I carefully placed  a function call anywhere in your desired template file to finally display the widget.  I used a word press function called get_sidebar that directly called the sidebar.php function.

<?php get_sidebar();

That is how to use the function in its simplest form.  And that’s all that is needed to display the widget in this case. But there are a couple of issues regarding using the function I think are worth talking about.

First of all, if you wanted to retrieve a widget that’s been given a particular id you simply pass in that widget id as a string.

<?php get_sidebar("blog");

Whereas

<?php  get_sidebar();  ?>

will call the contents of sidebar.php you can also pass in a string like this.

<?php get_sidebar("blog");

Currently all I have is the sidebar.php that has my widget, because that is the widget with the id of blog, but if I put it in its own template such as sidebar-blog. So if “blog” was the ID of the widget, WordPress would call that template file sidebar-blog.php.

The second point is that if you’re using get_sidebar() function it can only be called once. for example if you were to have a function call at the bottom of the template and another at the top then only the one at the top will work.

There is however a work around that I utilised to show 2 copies of the same widget.
 <?php get_sidebar(); ?>
 
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 <h1><?php the_title(); ?></h1>
          <?php the_content(); ?>

        <?php endwhile; else : ?>

 <p>Sorry, found no content.</p>

 <?php endif; ?>
 
 <?php include( TEMPLATEPATH . '/sidebar.php'); ?>

I went into my home.php template and first used the standard WordPress function to call the widget and the top and secondly called the sidebar.php file directly rather than using a function. I called it using an include, using a path to the template folder and the adding the file as a string argument. This was result.

wordpress-widgets-2

Conclusion: What’s next?

So now I have my design, navigation, blog and widgets set up for my theme.

But there’s still some work that can be done with the blog. At the moment, it only displays a certain amount of posts, there’s no pagination or anything that indicates that the blog looks like a WordPress blog.  That needs changing, and this is what I’ll focus on next.

Advertisements