How to Use Widgets to Display Custom WordPress Menus
About 99.99 percent of the WordPress themes available today are coded with widgetized sidebars — which means you can use the widgets within WordPress to populate your sidebar area with content, navigation menus, and lists.
With widgets in place, you generally have no reason to mess around with the code in the sidebar.php template file because most of the content you want to add into your sidebar can be added through the use of widgets.
In a WordPress theme, the Theme Functions template (functions.php) and the Sidebar template (sidebar.php) create the functionality and the possibility for widgets to exist within your theme. You’re not limited to where you place and use widgets, by and large. The Sidebar template (sidebar.php) is used in this example.
First, you have to define the widgets in your theme. This means that you need to alert WordPress to the fact that this theme can handle widgets — which is known as registering a widget with the WordPress software. To register a widget, add the register_sidebar function to the Theme Functions template (functions.php). In the functions.php file in the Twenty Fourteen theme, the code for registering a widget looks like this:
register_sidebar( array( 'name' => __( 'Primary Sidebar', 'twentyfourteen' ), 'id' => 'sidebar-1', 'description' => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h1 class="widget-title">', 'after_title' => '</h1>', ) );
Within that code, you see seven different arrays. An array is a set of values that tells WordPress how you would like your widgets handled and displayed:
name: This name is unique to the widget and appears on the Widgets page on the Dashboard. It is helpful if you register several different widgetized areas on your site.
id: This is the unique ID given to the widget.
description (optional): This is a text description of the widget. The text that gets placed here displays on the Widgets page on the Dashboard.
before_widget: This is the HTML markup that gets inserted directly before the widget. It is helpful for CSS styling purposes.
after_widget: This is the HTML markup that gets inserted directly after the widget.
before_title: This is the HTML markup that gets inserted directly before the widget title.
after_title: This is the HTML markup that gets inserted directly after the widget title.
With that code in your functions.php file, WordPress now recognizes that you’ve registered a widget called Primary Widget Area for your theme and makes the widget area available for you to drag and drop widgets onto the Widgets page on the Dashboard. All that’s left to do now is to call that widget into your sidebar.php file.
By doing so, you allow the widgets to display on your site. Follow these steps to call widgets to your site (these steps assume that the widget code isn’t already in the Sidebar template):
Click the Editor link below the Appearance menu.
The Edit Themes page opens.
Click the Sidebar (sidebar.php) template.
The Sidebar template opens in the text box on the left side of the page.
Type the following code in the Sidebar (sidebar.php) template:
<?php if ( ! dynamic_sidebar( 'Primary Widget Area' ) ) : ?> <?php endif; ?>
The parameter within the dynamic_sidebar template tag corresponds to the name that you provided in the widget array called name. It must be the same; otherwise, it will not display on your website.
Click the Update File button.
The changes you’ve made to the Sidebar (sidebar.php) template file are now saved.
You can register an unlimited number of widgets for your theme. This flexibility allows you to create several different widgetized areas and widget features in different areas of your site.