In the last section, we made a custom widget plugin for our showcase area. We'll now implement the sidebar.

We've already done half the work. If we look at functions.php, we already have registered our sidebar area.

So what we need to do now is go to index.php and go down to where we have our sidebar. Before I get rid of this, let's make sure that we create our widgets.

So we already have the Categories one; we don't have to worry too much about that. But let's create the sidebar heading:

OK, so if we go to our backend, we have Categories, we can bring that over to the sidebar at the right, enter the title as Categories and save that. Then we also want the custom text present at the bottom-left of the window; we'll put that right under Categories. Paste in our heading, Sidebar heading, and then our text and the button from the code. We'll save and now we can go ahead and replace this stuff. We remove both the callout divs.

We'll then check to see if the sidebar is active, so we'll put if(is_active_sidebar) and the position is also called sidebar:

<div class="large-4 medium-4 cell">
   <?php if(is_active_sidebar('sidebar')) : ?>
      <?php dynamic_sidebar('sidebar'); ?>
   <?php endif; ?>
</div>

In the preceding code, we'll type in php dynamic_sidebar and save that. Let's go to the frontend and reload. So there are our widgets, and these are coming from the backend:

Now for the categories let's create some. By default, it's only going to show categories that have posts in them:

Now these aren't the ones we want at all. So we'll get rid of these and then add Shirts, Hats, and Shoes:

If we go and reload, you still don't see them because we don't have anything in them.

Now just to make sure that the categories will show up, we'll add this Hello world to all of the categories and reload them:

So now you can see they're showing up. That doesn't look great, so we want it to use some custom classes, Foundation classes. We'll create a widgets folder in the themes folder, and let's grab the widgets folder. We'll go to wp-includes | widgets, and grab the class-wp-widget-categories.php file, so we'll copy that and then bring it to the widgets in the themes folder.

Then we can open that from within Sublime Text. We'll add Custom to the end of the class name and search for the ul tag. We will add some classes. OK, so class="menu vertical" and save it. Then we have to include that file in our functions.php file. We'll go to the top and let's type in require_once and then we'll pass in widgets/class-wp-widget-categories.php.

require_once('widgets/class-wp-widget-categories.php');

We'll include that file now. Now we'll have to register it. So, let's go down to the bottom and create a function called ms_register_widgets. We will pass in the class name, WP_Widget_Categories_Custom. We'll then add an action:

//Register Widgets
function ms_register_widgets(){
    register_widget('WP_Widget_Categories_Custom');
}

add_action('widgets_init', 'ms_register_widgets');

Save it, and let's just go and look at the frontend now. You can see that Categories has changed and looks a little better:

Now the next big thing we have to do is the main content area. We'll do that in the next section, but before we go there, we just want to split up the index.php file into our header and footer files. So we'll go from the very top of the file to the end of the header tag. We'll cut the code and in its place, we'll say <?php get_header(); ?>. We'll then create a file called header.php and paste that in there. We should see no change.

So we'll do the same thing with the footer. So in index.php we'll go from the bottom up to, let's see, till the footer tag, cut that out, and then we'll put in get_footer. We'll then create a file called footer, and paste that in, go back to the frontend, reload and everything's fine.