Custom Sidebar in WordPress Theme


In this article, we will create a Custom sidebar in WordPress theme. In WordPress tutorial 03 we had created functions.php file. So using this file we will create a custom sidebar in WordPress. WordPress has a built in sidebar widget function. We will use this function to create our WordPress Theme Sidebar.

Custom Sidebar in WordPress Theme

 

In the previous article, we had created a bootstrap column for a sidebar but we did not provide any function to it. This article will demonstrate how to create custom sidebar widget. So you can add the widget to the sidebar.

So let’s jump into the code.

In the functions.php file we will create a function call  widgets_sidebar() . In this function, we will call WordPress built-in function  register_sidebar() this function will register our sidebar to WordPress. This function takes array parameter. In this array parameter, we will provide sidebar name, description, ID and more.

So we will provide Name, ID, before widgets and after widget parameters. if you wanted to place some code before and after the widget you can use it.  we will create two sidebars.

Make sure you write  add_action('widgets_init','widgets_sidebar'); this code because if you did not specify this code then you will not see the widget area in the appearance. The add_action() function will take two parameters. first, one is initialized widgets and the second is your function which we had created before.

Specify Location for Sidebar

Don’t worry about where the sidebar will appear because you can specify it anywhere you want. So we will specify sidebar on the left side of the theme and also in the footer.

So in the Index.php file, we will specify sidebar location.

In above code, we had added division with the class sidebar. In Style.css file we remove the bullets from the sidebar. after that, we added PHP code that accesses sidebar. Using  dynamic_sidebar('sidebar_1'); function we will call sidebar with their ID. You can access with sidebar name also.

After that, we will if you wanted to add the sidebar to footer section then it is also possible. You just wanted to change the sidebar ID and his location.

Just place this code in the footer. You will see the result. we will discuss footer sidebar later in next articles. So now we will add some code to Style.css file to remove bullets.

Using list-style-type we will remove the bullets from the sidebar. we will style sidebar in future articles.

If you look to Index.php file it looks like this.

Index.php

Your Custom sidebar in WordPress theme is Created.

If you have any question then comment us and also share this article with your friends.

We will see you in the next article.

Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *