/ Hosting portal /
How to Create Custom WordPress Sidebar Menu
  • Home
  • About Us
  • Services
    • Web Design
    • Search Engine Optimization (SEO)
    • SEO Packages
    • Web Development
    • Web Maintenance
    • Web Hosting
  • Portfolio
  • Blog
  • Contact
  • Questionnaires
    • Website Questionnaire
    • SEO Questionnaire
Home » Blog » How to Create Custom WordPress Sidebar Menu

How to Create Custom WordPress Sidebar Menu

by Peter Giammarco on October 30, 2017 with 0 comments
Web Development, WordPress
wordpress development

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.

Related Posts:

  • 5 WordPress Plugins for Websites in 20185 WordPress Plugins for Websites in 2018

Share

Share
Share
Tweet
Share2
Share1
Pin
Share
Email
Print
  • « Responsive Web Design Tutorial
  • WordPress Custom Fields Tutorial »

Written by: Peter Giammarco

Avatar of Peter Giammarco

Enjoys Nature. Hockey. Being Inspired. Good Coffee. Good Music. Good Design.

http://www.pgiammarco.com

Leave a Reply

Click here to cancel reply.


Categories

  • Blog
  • CSS
  • SEO
  • Social Media
  • Web Design
  • Web Development
  • WordPress

Recent Posts

  • 5 WordPress Plugins for Websites in 2018
  • WordPress Custom Fields Tutorial
  • How to Create Custom WordPress Sidebar Menu
  • Responsive Web Design Tutorial
  • SEO Tips How to Find The Best Keywords

Tags

boot volume CSS DDoS Denial of service DoS attack Keyword Research Plugins Responsive Design SEO SocialMedia Tutorial unmountable boot Web Design Web Development Windows 7 Repair WordPress WordPress Development

Latest Tweets

Shimmer Technologies@ShimmerTechno·
Aug 2020

#webdesign #HTML #CSS #landingpage #Website #PsdToHtml #Bootstrap #WordPress #wordpresswebsite #Fiverr #freelance

Shimmer Technologies@ShimmerTechno

Check out my Gig on Fiverr: design a wordpress website from scratch, from PSD to site https://www.fiverr.com/share/xr8Nb1

Shimmer Technologies@ShimmerTechno·
Aug 2020

Shimmer Technologies - Web Maintenance Services - Plans
https://www.shimmertechno.com/services/web-maintenance/

#Webdesign #webdevelopment #webmaintenance #SocialMediaMarketing #webredesign

Posts

  • 5 WordPress Plugins for Websites in 2018
  • WordPress Custom Fields Tutorial
  • How to Create Custom WordPress Sidebar Menu
  • Responsive Web Design Tutorial
  • SEO Tips How to Find The Best Keywords

Services

  • Web Design
  • Web Development
  • Web Maintenance
  • Local SEO Services
  • SEO Packages
  • Web Hosting

Contact

Shimmer Technologies
West Warwick, RI
02893

1-888-747-1143

[email protected]

Projects

  • AquaMed Pool
  • Organized for Life
  • 5 Ink Screen Printing
  • Sentinel Safe Floors
  • Happy Place MV
Best SEO Experts in Providence

© 2021 Shimmer Technologies. All Rights Reserved / RI Web Design . Web Development . SEO Company

  • Home/
  • About Us/
  • Services/
  • Portfolio/
  • Blog/
  • Contact/
  • Questionnaires/
  • Sitemap/