Creating a custom menu/widget area

Question

I'm looking to create a /menu/widget area like the following site:

http://www.microsoft.com/en-gb/default.aspx

please see sections under downloads, security, support, about

is this considered a footer menu as well? my theme's footer menu is just a standard menu on the bottom right corner of the theme like the example site as well but i want to creat a similar area just above it.

thanks

Answer 1

I'm going to assume you're using Twenty Eleven theme, or another theme that supports child themes. If you're using a custom theme, then you can just edit the existing Functions.php and add your additional functionality there, and then edit the existing Style.css. However, if your situation is different, please post back, and I'll update to work with whatever theme you're using.

As of Dec. 2012, this site's footer is an example: http://dev.artbeforehygiene.com/

1. Create a Child Theme in directory in your /wp-content/themes/ called twenteleven-child (or whatever you wish to call it, I'll use that name for the sake of these steps)
2. Create two files: functions.php and a Style.css in that directory.

3. In Style.css, add the following code:

   /*
   Theme Name: Twentyeleven Child: Triple Footer Addition
   Description: Child theme for the twentyeleven theme with footers 
   that look like http://www.microsoft.com/en-gb/default.aspx
   Author: [Your Name Here], Will Lanni
   Template: twentyeleven
   */
   
   @import url("../twentyeleven/style.css");
   /* Style Twentyeleven Footer to resemble Microsoft site */
   #colophon {
       background: #eee;
   }
   #site-generator,
   #supplementary {
       background: transparent;
   }
   #supplementary h3 {
       font-family: "wf_SegoeUI","Tahoma","Verdana","Arial","sans-serif";
       font-size: 1.2em;
       font-weight: normal;
       line-height: 1.25em;
       margin-bottom: 0.65em;
       color: #1a1a1a;
       text-transform: none;
   }
   #supplementary ul.menu {
       list-style-type: none;
       margin: 0 0 1.5em;
       padding: 0.25em 0 0.5em;
   }
   #supplementary ul.menu li {
       padding-bottom: .7em;
       font-size: .9em;
   }
   
   #supplementary ul.menu li a {
       font-weight: normal;
       color: #1570A6;
       transition: color 0.1s linear 0s;
   }
   #supplementary ul.menu li a:hover {
       color: #083947;
   }
   

4. In functions.php, add the following code (this will create a bunch of extra nav menus that you can control within the WP Dashboard > Appearance > Menus). Twentyeleven already comes with three footer widget areas. However, if your theme only has one, you can add additional footer areas by uncommenting out the add footer code below.

   <?php
   
   // register additional custom menu slots
   function childtheme_register_menus() {
       if ( function_exists( 'register_nav_menu' )) {
           register_nav_menu( 'footer-1st-menu', '1st Additional Footer Menu' );
           register_nav_menu( 'footer-2nd-menu', '2nd Additional Footer Menu' );
           register_nav_menu( 'footer-3rd-menu', '3rd Additional Footer Menu' );
           register_nav_menu( 'footer-4th-menu', '4th Additional Footer Menu' );
           register_nav_menu( 'footer-5th-menu', '5th Additional Footer Menu' );
       }
   }
   add_action('init', 'childtheme_register_menus');
   
   /*
   Create additional footer areas ONLY IF THEY DON'T EXIST!!!
   Just uncomment out the add_action... but...
   If you're using twentyeleven, these are already there, just leave this alone!
   */
   //add_action( 'widgets_init', 'childtheme_widgets_init' );
   function childtheme_widgets_init() {
       register_sidebar( array(
           'name' => __( 'Footer Area One', 'twentyeleven' ),
           'id' => 'sidebar-3',
           'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
           'before_widget' => '<aside id="%1$s" class="widget %2$s">',
           'after_widget' => "</aside>",
           'before_title' => '<h3 class="widget-title">',
           'after_title' => '</h3>',
       ) );
   
       register_sidebar( array(
           'name' => __( 'Footer Area Two', 'twentyeleven' ),
           'id' => 'sidebar-4',
           'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
           'before_widget' => '<aside id="%1$s" class="widget %2$s">',
           'after_widget' => "</aside>",
           'before_title' => '<h3 class="widget-title">',
           'after_title' => '</h3>',
       ) );
   
       register_sidebar( array(
           'name' => __( 'Footer Area Three', 'twentyeleven' ),
           'id' => 'sidebar-5',
           'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
           'before_widget' => '<aside id="%1$s" class="widget %2$s">',
           'after_widget' => "</aside>",
           'before_title' => '<h3 class="widget-title">',
           'after_title' => '</h3>',
       ) );
   }
   
   ?>
   

5. Create your footer menus in Appearance > Menus. You'll create a single menu for each of those sub menus in the footer you want. Make sure to save!

6. Add a single one of those menus to one of the drop down slots on the left. Save!
7. Go to Appearance > Widgets.
8. Drag a Custom Menu widget into one of the Footer slots, name it appropriately, and select the Nav menu you wish to appear.
9. Repeat for the other menus you wish to add.
10. Save and view your site!

Answer 2

FYI, what you should be looking/googling for is usually referred to as a "Mega Menu".

There are several plugins on CodeCanyon to help with it, I don't know of one on wordpress.org for it.

Not endorsing any solution but as an example: http://codecanyon.net/item/mega-menu-reloaded/1593152

You might also look over this post on WPMU http://wpmu.org/create-highly-customized-and-beautiful-mega-menus-for-wordpress/