WordPress Menus, Sidebars and Widgets

It's easier than this...promise

Post taken from my slides on 12/15/11 during a Columbus WordPress User Group talk (view here).

There are several ways to create menus in WordPress

Hard Code it in: limits flexibility, not friendly for clients, not future-proof

Let WordPress do it for you: better than hard-coding, fairly flexible, won’t always have desired result, wp_nav_menu()

Add one line of code and create a menu: my favorite option, future-proof, maximum Customization, wp_nav_menu( array(‘menu’ => ‘Main Menu’ ));

Thumbnail image from Aliso the Geek

The Menu Admin Panel

From the admin panel, you can create a menu, and if wp_nav_menu is in place, your menu will show with only the selected items.

Be sure you hit the “Save Menu” button, or it, you know, won’t save.

NOTE: If no menu is created, but wp_nav_menu is still used, WordPress will display ALL of your pages

The code behind this

Even if you have limited coding experience, this is incredibly easy.

Open your header.php file:

<div id="header">
 	<?php wp_nav_menu(); ?>
 </div>
 
 // That's it...that's all you have to put for WordPress to display your menu
 // The other way is this
 
 <div id="header">
 	<?php wp_nav_menu( array('menu' => 'Main Menu' )); ?>
 </div>

The second example defaults to a created menu but if ‘Main Menu’ is the name of a created menu, it will take precedence.

In the previous examples, it’s important to understand the sequence of the menus

NOTE: To read up on wp_nav_menu yourself, click HERE

1. Each menu that is generated has a class of ‘menu’

2. Each menu-item that is generated has a class of ‘menu-item’

3. This allows you to write CSS once, for all menus that will be created.

Sidebars

Sidebars, like menus, are easy to add to your WordPress site.

Most themes come with some form of sidebar, but if you find that you have no sidebar.php file, or your index, page, whatever.php has no reference to the sidebar, you can add the code below:

<?php get_sidebar(); ?>
 
 // This will attach sidebar.php to your page 
 // simple right?

Since almost every theme comes with sidebar.php, we’ll move forward and wait to discuss adding your own sidebar until the very end.

WordPress Codex on customizing sidebars – Click HERE

As I just said, WordPress comes standard with a sidebar, mostly because it started out as a blogging platform and the sidebar is a staple of blogs.

Every Theme uses the sidebar differently:

Sidebars and Footbars are easy to use and are complimented by widgets. Speaking of widgets…

Widgetizing Your Site

Now that we’ve covered the very basics of Sidebars, let’s look at what goes in those sidebars.

If you’re not too code savvy, you’ll want to make sure the theme you choose has the pictured containers, troughs, barrels, whatever containing device you want to call them.

That’s where your widgets go

Standard Widgets:

These widgets are put in the Sidebar and Footbar containers by a drag-and-drop process.

Then there are usually other options.

WordPress Codex on widgets – Click HERE

More Code Regarding Sidebars

There are two main ways to add a sidebar.

The first is to create a new .php file for your sidebar (in this case sidebar-custom.php)

Once you have created sidebar-custom.php:

  // add this to page.php, or whatever.php file you want
  
  <div id="sidebar">
              
 		<?php get_sidebar('custom'); ?>
  
  </div>
  
// Then in functions.php you need to add this
  
  // register sidebar-custom.php
  if ( function_exists ('register_sidebar')) { 
      register_sidebar ('custom'); 
  } 

This then registers your new sidebar, allowing for the top code to output whatever is contained in sidebar.php

The second way, the way I prefer, is to create a new dynamic sidebar because no extra PHP file is required, and a bin/crate/container for widgets is created

Add the following code into functions.php:

<?php  if (function_exists('register_sidebar')) {
     register_sidebar(array(
     'name' => 'Custom Sidebar', // the name that calls the sidebar
     'id'   => 'custom-sidebar',
     'description'   => 'These are widgets for the sidebar.',
     'before_widget' => '<div id="%1$s" class="widget sidebar">',
     'after_widget'  => '</div>',
     'before_title'  => '<h2>',
     'after_title'   => '</h2>'
     ));
 } ?>
 
 // to load this in a page, paste this code wherever you like
 
 <?php dynamic_sidebar('Custom Sidebar') ?>

This then outputs your new sidebar, allowing you to add whatever widgets you would like.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

0
Would love your thoughts, please comment.x
()
x