WordPress Theme Development From Scratch Part 5 : Sidebar Wi...

WordPress Theme Development From Scratch Part 5 : Sidebar Widgets, Archive Page

Category: WordPress   Updated by Ryan Dhungel



In this part of WordPress theme development from scratch series, we will learn how to implement sidebar widgets functionality to our theme and also create archive page. Currently we have static html text in our sidebar. We don't want that right? Let's start working on widgets, It will be fun.

Requirements


Goals

  • Implement widgets support to our theme
  • Create sidebar widgets
  • Create archive page

One quick not here is that you can use widgets anywhere on the page right, left, top or bottom. You are not limited to use it on sidebar. It is just named sidebar!


Create widgets function

If you go to WordPress admin and look into Appearance, you will not see the widgets. That is because we have not put the widget's function into our functions.php yet. Let's do that.

Open up functions.php and add the code below:

// Widgets
function my_init_widgets($id)
{
    register_sidebar(array(
        'name' => 'Sidebar',
        'id' => 'sidebar',
        'before_widget' => '<div class="sidebar-module">',
        'after_widget' => '</div>',
        'before_title' => '<h4>',
        'after_title' => '</h4>'
    ));
}
add_action('widgets_init', 'my_init_widgets');


Here we created a function and named it my_init_widgets then supplied an array of information. We have specified  the name, before widget and after widget div and title h4 etc. Remember the div class with sidbar-module <div class="sidebar-module"> in our page sidebar where all the static sidebar text is sitting at the moment? We will populate that ares with the widgets instead.

Then we hook it with WordPress using add_action. There we supplied the hook name and the name of our function as a second parameter. You can read more about hooks in WordPress codex.

You can go ahead and reload the page to see the widgets option available in Appearance. Go ahead click on the widgets, drag and drop categories to the sidebar. Give it a title and save. Now if you reload the page, you will see no change because we still have that static html text on the sidebar.


Delete the static html content from the sidebar

Go to your index.php and delete everything we have inside the blog sidebar. Your div must be empty now.

See the code below:

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">

</div><!-- /.blog-sidebar -->

 

Display sidebar widgets

index.php

First thing we need is to determine if we have any sidebar widgets at all. Put the code below inside the the div that we just made empty. The code speaks for itself right? It first checks if there is active sidebar, then displays dynamically.

<?php if(is_active_sidebar('sidebar')): ?>
  <?php dynamic_sidebar('sidebar'); ?>
<?php endif; ?>

 

Go ahead, save your index.php and reload your site. Do see you categories in sidebar? Of course you do because you created categories earlier while creating posts right? If not go ahead and create some categories and assign them to your posts. Let's further customize our sidebar by dragging more items to it. I am adding archive and calendar.

Make sure you also add archive on the sidebar. We will be creating archive.php soon.


Move the widgets to sidebar

Widgets working great but we don't want to repeat this code to all other pages such as single.php and page.php. So the better solution here is to move them to sidebar.php instead. Let's do that.

Create sidebar.php

Create a file called sidebar.php and put inside your theme folder. Then go to index.php and copy the div that contains blog sidebar and paste it in sidebar.php. Here is the code to copy and paste into sidebar.php.

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
  <?php if(is_active_sidebar('sidebar')): ?>
    <?php dynamic_sidebar('sidebar'); ?>
  <?php endif; ?>
</div><!-- /.blog-sidebar -->


Now go back to index.php and replace the div that contains blog sidebar with the code below:

<?php get_sidebar(); ?>


Now reload the page to see the sidebar widget working as expected. You can include sidebar in each page you like using the code above. We will include it in single.php and page.php.

single.php and page.php

Now that we have sidebar.php that contains widgets. Let's use it on single.php and page.php. Delete the entire sidebar from those pages and replace with the code below.

 

<?php get_sidebar(); ?>


That's it. It is easy to work with sidebar widgets in WordPress.

Reload you page and click on the blog posts, categories or archives. You can see the sidebar is working great.

Create archive.php

If you click on the link of archives, you will see the page layout similar to others. However you can customize it the way you like. Let's go ahead and create archive.php and save it in our theme folder. Now if you reload one of your archive page you will see nothing. Lets copy all the code from index.php and paste into archive.php to begin with. Now if you reload the page, It looks similar to any other page.

We can do a lot with it, feel free to play around and customize further. You can remove the sidebar <?php get_sidebar(); ?> or make the main blog div full width by changing the bootstrap div class from col-md-8 to col-md-12 etc. Just play around with it.

The idea here is to understand how all these pages work in WordPress. We now know how archive.php works, it works in a similar fashion as the index.php or single.php.

Conclusion

When we first start to learn WordPress theme development, we see all these pages such as sidebar, archives, single, comments, functions etc that makes us confused. You don't know where to begin. But if you have been following me from the part 1 you now understand how all these pages are coming to work together. I am sure you feel much comfortable with WordPress by now. Which is exactely what we want.

We are making really good progress here. In the next part we will work on custom post format which is one of the most powerful feature of WordPress. This is it for this part, leave your comments below and feel free to use our forum for any questions you have.

Download source code from github 



Back to articles