1. Let's take a look at index.php, where we have this <div> tag with the class of main. What we want to do is go right between main and the ending </div> tag. We'll create a <div> tag with the class of sidebar, as shown in the following code:

      <div class="sidebar">
      TEST
      </div>

We have also added TEST in the next line, which shows up as follows:

Now we want to float the main <div> and set a width, and then have the sidebar float to the right.

2. Let's go to the style sheet, where we have main with margin:15px, both at the top and bottom. Let's go ahead and float this to the left, and let's set a width of 68%, as shown in the following code block:

      .main{
          margin:15px 0;
          float:left;
          width:68%;
      }

      footer{
          background:#393939;
          color:#fff;
          padding:10px 10px;
          text-align:center;
      }

Let's see what that gives us:

The reason that this looks really weird is because we didn't clear the float.

3. So what we'll do is go under the sidebar div and enter <div class="clr">:

      <div class="sidebar">
      TEST
      </div>

      <div class="clr"></div>

4. Now, we'll go to our CSS, add a class called clr, and we'll just say clear:both;:

      .clr{
          clear:both;
      }

5. Then let's add the sidebar class; that's going to float to the right, and we'll set a width of 28%, as shown in the following code:

      .sidebar{
          float:right;
          width:28%;
      }

6. Now, we'll want to put a container around both of the files—index.php and style.css, because right now, main has a container inside of it, but what we want is to remove that and put it above main, as shown in the following code:

      <?php get_header(); ?>

      <div class="container">
         <div class="main">

We will end it here:

         <div class="sidebar">
         TEST
         </div>

         <div class="clr"></div>
      </div>
      <?php get_footer(); ?>

Now, let's run this:

7. So now we have the main area and a sidebar.

8. Next, we will see how to add widgets, and to do that, we'll go to functions.php. Here, we can actually use widgets and define what location we want the widgets to be allowed in. We'll go down to the very bottom of the file and create a function, as shown in the following code block. We'll call it init_widgets, and that'll take in id, and we'll call it register_sidebar. Now we will create a sidebar widget, but just know that no matter where you put it, register_sidebar is the function that we'll use, even if it's not a sidebar—if it's down below, or in the header, or wherever it may be, this is what's used to actually register widget locations. Now, that's going to take in an array, and it's going to take a name; let's set that to Sidebar, and then the ID, which is usually the same, just lowercase and no spaces. You can use hyphens if there's more than one word. Then, we can also use before_widget. We can also use <div class="side-widget">, and then we can add after_widget; that's going to be the ending </div> tag. Then, we can also add before_title and after_title for the widget, as shown in the following code block. We want an <h3> tag before the title. Now, this code isn't going to run yet. We need to perform add_action, and the hook we want is called widgets_init; we want to put in our function name, which is init_widgets:

      //Excerpt Length
      function set_excerpt_length(){
          return 60;
      }

      add_filter('excerpt_length', 'set_excerpt_length');

      //Widget Locations
      function init_widgets($id){
          register_sidebar(array(
              'name' => 'Sidebar',
              'id' => 'sidebar',
              'before_widget' => '<div class="side-widget">',
              'after_widget' => '</div>',
              'before_title' => '<h3>',
              'after_title' => '</h3>'
          ));
      }

      add_action('widgets_init', 'init_widgets');

9. Now we'll save the code. If we go back and reload, we get this:

We have a Widgets item at the side and a Sidebar location.

10. Let's drag the Categories widget and bring that over to the Sidebar. We will also bring Recent Posts:

Save and go to the frontend; if we reload now, we'll not see anything because we need to add it to our template.

11. Let's go down to where we have the sidebar in the index.php file, and we'll first check for the widget using the following code:

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

We'll check whether it'll be a function called is_active_sidebar(), and like I said before, even if it's not a sidebar, this is still going to work. We will also add our location, which happens to be sidebar. We will also add a dynamic_sidebar() function, and then the ID of the widget again is sidebar.

12. Save it, reload, and take a look at it:

We get our two widgets: Categories and Recent Posts.

13. Now, remember that we put the side-widget class in the function.php file so that we can style widgets using the style.css file, as shown in the following code block:

      .side-widget{
          border:1px #ccc solid;
          padding:10px 10px;
          margin-bottom:20px;
          margin-top:20px;
      }

We have added side-widget with a border and padding of 10px 10px. We have added margin-bottom. Now if we reload, you can see that they have a border. Therefore, we will add margin-top too. We'll say margin-top:20px.

14. To make this look a little better, we will use the following code:

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

      .Side-widget a{
          text-decoration: none;
      }

Here, we have taken away text-decoration.

15. When you save and reload, you get this:

So this looks good.

16. We can see that the pages will be messed up now:

This is because in page.php, we still have the container class inside of main.

17. What we want to do is just copy what we did in index.php:

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

         <div class="clr"></div>
         </div>
      <?php get_footer(); ?>

We need to add the sidebar after main ends, and then we actually want to take the container out and put that above main. We'll need to make sure to take the ending </div> tag and put that on the outside down.

18. Let's go ahead and check that out:

So this looks good.

19. We will repeat the same thing with Single.php, and we will get the following result:

So all the different formats and all the different pages are all set; they have the sidebar implemented. And, of course, if you didn't want the sidebar on one of those, you don't have to have it. If we want to kind of minimize the code a little bit, we can put the following code inside the footer.php:

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

      <div class="clr"></div>
      </div>

20. We can cut and save, and then add that code in footer.php at the top, as shown here:

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

      <footer>
         <div class="container">
           <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
           </p>
         </div>
      </footer>

      <?php wp_footer(); ?>
      </body>
      </html>

21. Save, and then get rid of the following code from page.php and index.php, because it's now in footer.php:

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

      <div class="clr"></div>
      </div>

Our frontend should look the exact same way. So that's good, that's widgets.