When I started creating websites with WordPress in about 2007, I absolutely fell in love with it. It has an easy to understand code reference library and the community is great. There are many websites built with WordPress today and it is great to contribute back to the community too. This is the beginning of a series of tutorial I will be writing on WordPress development. This one is all about creating custom WordPress sidebar menus in your Theme or Child Theme.
WordPress has many functions you can use when you build a theme, one of the many is register_sidebar(). Using this function will create a new custom sidebar in your WordPress theme. These are found under Appearance > Widgets. And on the right side you will see the sidebars that exist. Our new sidebar will be here once we create it.
How to Create Sidebar in WordPress
To create the sidebar edit the file functions.php located in \wp-content\themes\themeName directory, where themeName is the name of your theme, if you are using a child theme then the folder will be called themeName-child. If you do not have this file in your child theme directory create it, and be sure to read the documentation that came with you theme.
In this file you will create a function that will be added to the ‘widget_init’ action hook to register the sidebar with WordPress. The name of the function does not matter. You will be adding this function name to the add_action() function which hooks it to ‘widget_init’ to register it, as in the example below.
functions.php:
1 2 3 4 5 | add_action(‘widget_init’, ‘slug_widgets_init’); function slug_widgets_init() { } |
Inside this function you will add the register_sidebar function. This function has some arguments that you need to assign values for.
• Name – the name of the sidebar
• Id – the id of the sidebar
• Description – the description of what the sidebar is used for and where it is
• Class – the CSS class to assign the sidebar on the admin page
• Before_widget – HTML to place before every widget in the sidebar
• After_widget – HTML to place after every widget in the sidebar
• Before_title – HTML to place before the title of every widget in the sidebar
• After_title- HTML to place after the title of every widget in the sidebar
In the example below I have assigned the values, you can see what the HTML output would be in the picture below it. When you create the before_widget argument notice the variable in the id, this adds the name of the widget to the name of the ID or class.
functions.php:
1 2 3 4 5 6 7 8 9 | register_sidebar( array ( 'name' => 'Right Footer', 'id' => 'right-footer-widgets', 'description' => 'Widgets place here will go to the right of the newsletter and social icons', 'before_widget' => '<div id="footer-%1$s" class="footer-right">', 'after_widget' => '</div>', 'before_title' => '<h5 class="widget-title">', 'after_title' => '</h5>' ) ); |
So far in the functions.php file we should have this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | add_action(‘widget_init’, ‘slug_widgets_init’); function slug_widgets_init() { register_sidebar( array ( 'name' => 'Right Footer', 'id' => 'right-footer-widgets', 'description' => 'Widgets place here will go to the right of the newsletter and social icons', 'before_widget' => '<div id="footer-%1$s" class="footer-right">', 'after_widget' => '</div>', 'before_title' => '<h5 class="widget-title">', 'after_title' => '</h5>' ) ); } |
This will give us the sidebar under Appearance > Widgets. But how do you show it in your theme?
How to add WordPress Sidebar to Your Theme
To get it to show in your theme you need to use the function dynamic_sidebar(). This function is best called from within a sidebar template file so all you have to do is use the function get_sidebar() when you want to add it to your theme.
To create a sidebar template file make a new file in your theme or child theme directory, and name it sidebar-[ID name].php, where ID name is the name you used in your register_sidebar function. So for our example we would call the file sidebar-right-footer-widgets.php. Open this file and enter the following code:
1 2 3 4 5 | <?php if ( is_active_sidebar( 'right-footer-widgets' ) ) : ?> <ul id="sidebar"> <?php dynamic_sidebar( 'Right Footer' ); ?> </ul> <?php endif; ?> |
In this example we use the function is_active_sidebar and dynaminc_sidebar. The function is_active_sidebar function looks to see if the specified sidebar is being used or not. If the sidebar has no widgets then it is not being used, if it does then it outputs the HTML and widgets in the sidebar. You specify the sidebar ID or name within the function, in this example we used the ID ‘right-footer-widgets’.
The function dynamic_sidebar outputs the specified sidebar, if you do not specify a sidebar name or ID it outputs the default sidebar. In our example we use the sidebar name ‘Right Footer’.
To show this sidebar in your theme you use the function get_sidebar() and specify the ID used for the sidebar template file, it will call this sidebar template file and show it in your theme. In our example we use ‘right-footer-widgets’ because the sidebar template file is called sidebar-right-footer-widgets.php. If you do not specify a template it will use the default sidebar template file sidebar.php.
Open the template file in your theme or child theme where you want to show this sidebar, in our example we want to show the sidebar in our footer, so we open the footer.php file in our theme.
To find more information about WordPress template files and the template hierarchy go here: https://developer.wordpress.org/themes/basics/template-hierarchy
In the footer.php file we add the following code:
1 | <?php get_sidebar( 'right-footer-widgets' ); ?> |
So if you go to your WordPress site, under Appearance > Widgets and add widgets to the sidebar you created you should now see them listed on your website where you added the get_sidebar() function.
I hope you have a good understanding of how sidebars are created and used in WordPress themes. If you have any questions please post them in the comments below. I will do my best to answer them in a timely manner. Look for more posts on WordPress development soon to come.
