WordPress Menus, Sidebars and Widgets

Posted on: December 15th, 2011

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

  • wp_nav_menu
    • Defaults to a created menu
    • Not sure how it chooses:
      • Not alphabetical
      • Not by creation date
      • Unpredictable
      • Thoughts?
    • Troubling if you want to create more than one menu or sub-menu
  • That’s where wp_nav_menu( array(‘menu’ => ‘Main Menu’ )); comes in handy
    • Specifies a specific menu
    • Defaults like wp_nav_menu if ‘Main Menu’ does not exist
    • Allows for multiple instances
    • Predictable

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:

  • Twenty-Eleven – shows the sidebar depending on which page template is used, has three main footbar containers or ‘Footer Widget Areas’
  • Twenty-Ten – opposite of twenty-eleven, shows sidebar all the time unless template is used ‘one page, no sidebar’
  • Other themes – may very depending on how much time, love and care the developer put in. Be sure to check out the widget section first if sidebars are important to you
  • My personal themes – tend to have a sidebar with widget capabilities showing all and footbars as well

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:

  • Recent Posts
  • Archives
  • Calendar
  • Subscription
  • Pages
  • Categories
  • Search Bar

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.

previous post: Stop American Censorship next post: Code Explosion – Week 6