In this section, we'll take a look at widgets.

Right now, we have a sidebar, but this is just static content in our php file. So we want this to come from the widget system. Also, we should be able to add multiple widgets in the sidebar. Now, on the blog page, and on any other page, this is going to be the only widget aside from a custom Home page that we'll create later on. However, we will add those positions in our functions file.

So, let's open up functions.php, and go right under the after_theme_setup action; this will be to set up widget locations. We'll create a function, call it init_widgets() and it will take an id; then, we'll say register_sidebar. Now, even though this is called register_sidebar, this is used with all widget positions, not just a sidebar. It takes in an array and it's going to take a name; this happens to be Sidebar, but it could be anything. Then, we'll also say before_widget and after_widget. Also, we'll say before_title and after_title of the widget:

add_action('after_setup_theme', 'adv_theme_support');

//Widget Locations
function init_widgets($id){
    register_sidebar(array(
        'name' => 'Sidebar',
        'id' => 'sidebar',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => ''
    ));
}

So, basically, these will be HTML tags that we want. If we say index.php and look at the sidebar, it has <div> with the class of block:

<div class="side">
   <div class="block">
   <h3>Sidebar Head</h3>

Now I don't want to add this div element in functions.php; so let's put it in index.php and <div class="block">. Let's also add a class called side-widget and, after widget, we'll close that </div> element. For the title, I'll put <h3>:

'before_widget' => '<div class="block side-widget">',
'after_widget'  => '</div>',
'before_title'  => '<h3>',
'after_title'   => '</h3>'

Let's save this and then go into index.php. We'll take out everything that's in this side div element and check to see whether there are any widgets in that position. To do this, we'll say if(is_active_sidebar) and then pass in the widget ID, which is sidebar. Then we'll say <?php dynamic_sidebar(); ?> and pass in the ID, sidebar:

<div class="side">
   <?php if(is_active_sidebar('sidebar')) : ?>
      <?php dynamic_sidebar('sidebar'); ?>
   <?php endif; ?>
</div>

If we look at the index page, nothing's there because we haven't added any widgets:

Now we'll need to replace all of the static sidebar code. Let's copy it; we'll start with archive.php. Then, we'll just paste that in. We'll go to page.php. Of course, you don't need to have a sidebar with all these pages: search, single, and company-template, but we're going to.

Now, we'll go to our backend and then to Appearance:

Now see how there's no widget. We need to initialize it, so back to functions.php, and then, right under init_widgets() we need to say add_action(). Now the hook we want to use is widgets_init, and then we just want to put the name of our function, which is init_widgets:

add_action('widgets_init', 'init_widgets');

Let's go back to our backend, reload, and now under Appearance, you should be able to go to Widgets:

Now we'll add a custom Text widget, and let's just put title; we'll say My Text Widget. Then, I'll just paste a sentence or two in Content, and click on Save:

Now go back to our frontend and reload:

So this is coming from the Text widget.

Let's add a button in here as well, just for looks. Let's also put two line breaks. You can put whatever you like in a custom Text widget:

Now, another thing that we could do is to add some kind of dynamic widget, like, let's say, Categories.

Let's take that Categories widget, put it in Sidebar, and we'll save it. Let's go take a look:

I want to make this look a little better, which we can do that with CSS. Let's go to the bottom and say .side-widget. I'll add margin-bottom: 20px, that will move it down a little. Then, to do the list items, we'll say list-style:none; we'll give it line-height of 2.1em, and for border-bottom, we'll do dotted, with the color gray:

.side-widget{
    margin-bottom: 20px;
}

.side-widget li{
    list-style: none;
    line-height: 2.1em;
    border-bottom: 1px dotted #ccc;
}

Save this.

Now, it looks a lot better:

We can also put, let's say, Recent Posts, and change this to 3:

We actually didn't give a title for the gallery. So, let's just say Photo Gallery:

Now, I'll add the rest of the widgets into functions.php, or the rest of the widget positions, even though we'll not do it in this section. In the next section, we'll create a custom home page with those widgets.

We'll go right under init_widgets(), and copy and paste it four more times. So Sidebar, then we'll enter the Showcase area and change the class name. Then we'll have Box 1, Box 2, and Box 3. This will have a class of box and box1. I'll actually replace these two with box and box1. In next register_sidebar we'll change name to Box 2, and change name in final register_sidebar to 3. Save it, and now if we were to go back into the widgets area, you can now see that we have those widgets. At least, we have the positions. If we put something in them now, nothing's going to happen because we don't have them in our template.