Themeforest

Wordpress Tutorial – Adding A Widget Area To Your Theme Files

Following up to the 2 recent Wordpress menu plugins we launched we thought we should do a quick tutorial on how to add a widget area to your Wordpress theme.

Both of the plugins, the jQuery Mega Menu and the jQuery Vertical Accordion Menu use widget areas as a quick and easy way to add custom menus to your Wordpress site. If your theme does not have widget areas already set up in the locations where you need the menu then you need to create a new one in your theme files.

Its a fairly simple process, which involves 2 steps:

1. Register The Widget

To register the new widget you need to open the functions.php file in your Wordpress themes editor.

Add the following code to the functions file, making sure you place it in between php tags:

if ( function_exists('register_sidebar') ){
    register_sidebar(array(
        'name' => 'my_mega_menu',
        'before_widget' => '<div id="my-mega-menu-widget">',
        'after_widget' => '</div>',
        'before_title' => '',
        'after_title' => '',
));
}

Give the widget area a name – e.g. my_mega_menu and in the before/after options you can place code which you wish to appear wrapped around either the widget itself or the title.

Since we are wanting to use one of the menu widget themes, which come with plugins we dont want to wrap it in the standard widget tags, which may interfere with the CSS.

For this example we have just wrapped it in a div tag with the id – my-mega-menu-widget.

2. Add The Widget Code To Your Theme

Now we can add the code that will call the widget to the correct location in our theme files. Since we are creating a horizontal mega menu we obviously want to display this in the header.

In your Wordpress themes editor open the header.php file.

Find the location where you want to place the menu and add the following code to the header.php file:

<?php /* Widgetized sidebar */
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('my_mega_menu') ) : ?><?php endif; ?>

Make sure that you change the “my_mega_menu” text to be the same as the name you gave to your widget area in the functions file.

Save the changes to the header.php file

If you now go to the widget area in Wordpress admin you should see a new widget area in the right hand column with the name of your widget.

You can now add your mega menu, accordion menu or any other widget to this area.

196 Comments

  • I don’t understand how I can put the mega menu in header. I try with this:

    but won’t work. In slidebar such as widget he appears! After this, how I can remove the mega menu from slidebar.

    In conclusion I want to move the mega menu from slidebar in header.

    • create a new widget area in your template header file

  • Hi Lee
    I like the idea of the using the Mega Menu widget – looks cool! I’m using the Thesis Theme but can’t work out how to replace the existing menu with the Mega Menu. Tried the above but I’m pretty much of a beginner and can’t even find the header.php page!

    Can you help me out please.

    Thanks

    Bobby

    • Hi,

      Best way is to check with the theme author then as we dont have the details of each particular theme. Usually the header.php file is in the theme folder

  • hi, thanks so much for posting this tutorial! i followed each step as you said and my banner ads work a treat now!!

    • Hi,

      Great. Glad it helped

  • how can we add white background on this new custom widget ?

    • Hi,

      This would be set in your theme’s style sheet

      • thanks for the reply Lee, well i am totally new to wordpress, can you tell me any start point to doing so ?

  • I have added both lines of code for the mega menu, but there is no header area showing up on my widgets page.

    
    <nav id="access" role="navigation">
    				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    			</nav>
    			<?php /* Widgetized sidebar */
    			    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('MyNavBar') ) : ?><?php endif; ?>
    

    [/text]
    register_sidebar( array(
    ‘name’ => __( ‘Footer Area Three’, ‘twentyeleven’ ),
    ‘id’ => ’sidebar-5′,
    ‘description’ => __( ‘An optional widget area for your site footer’, ‘twentyeleven’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => “”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );
    }
    add_action( ‘widgets_init’, ‘twentyeleven_widgets_init’ );

    /**
    * MyNavBar area
    */
    if ( function_exists(‘register_sidebar’) ){
    register_sidebar(array(
    ‘name’ => ‘MyNavBar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    }
    [/page]

    • Do you have the “endif” code also as shown in the faq?

  • HI LEE,

    I am trying this menu again but I am wondering if there is a way to have specify the “fallback” menu as a choice?

    I have a lot of categories in a custom theme. This theme provides a dropdown menu that is generated by a specific function in that theme. But in the Admin Menu Dashboard this IS the Primary Navigation.

    Is there a way to open up Mega Menu to make the Default Primary Navigation always an option?

    The reason for the request is that I have a lot of categories using Custom Taxonomy.

    I have Parents, Children, and Children of Children & in some Parent Categories one child branch may go 4 or 5 deep.

    I went to a lot of work in the Categories Admin to assign the Parents and Children.

    When I come to the Menu Builder in Wordpress I can select all the categories to Add to a custom menu but they arrive all in the first level as Parents and lined up alphabetically in the Custom Menu I am creating. It is tons of dragging and dropping that makes WordPress gasp. And me.

    Somewhere in the wp tables all of my categories — parents & children — have already been defined.

    is there any way to write a function that takes the relationships I have already built and stored in WordPress and output them in one click to a Custom Menu indented and outdented?

    Or a function that will name this pre-existing categories relationships so that it is Selectable as an Option in your Mega Menu widget?

    Thank you for your consideration!

  • Lee, I am having trouble uploading because it is in a folder. Will it work if I just upload all the individual items in the folders separately? (Sorry if this is a total noob question).

    • Hi,

      The plugin must be uploaded as a complete folder

      • Lee,
        I uploaded it successfully from the Wordpress site. However, I don’t know if it appears to be possibly an older version, which I am not too happy with. The reason is it stays way too large when I look at it on my phone or iPad, unlike when I look at your site on these screens and it is much smaller, in keeping with the rest of your site.

        Any recommendations for me? As I see the contact form on your site I love it.
        Thanks,
        Gene

        • Hi,

          The latest version should be 1.3.4

  • I am from the Economics Department of University of Delhi. We are in the process of redesigning our existing website using wordpress. I am just a beginner and have no prior experience neither in php or html coding. I am just trying my hands on wordpress on my local system and got stuck at a point were each factuly requires a menu at the top of each their posts to navigate between their posts like their official details, research, teaching and under teaching things like courses they teach and within each course their syllabus, lecture notes, readings assignments etc.

    Is it possible I can have the above mentioned kind of menu on top of individual faculty posts (like the sample custom menu in your page) pointing to their posts using your jQuery Mega Menu? If possible could you guide me step buy step to achieve the same?

    Regards
    Vinayan

  • I”m using the twenty eleven theme. I can’t register the widget.

    I’m pasting this code into the functions.php file…..what’s the deal? Thanks!

    if ( function_exists(’register_sidebar’) ){
    register_sidebar(array(
    ‘name’ => ‘my_mega_menu’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    }

    • In twenty eleven there is already a function in functions.php, which is registering the existing widgets – twentyeleven_widgets_init()

      Add the code for the new widget area to this function

  • Hello,
    I love the idea of having this linked to my website, but I can not get it to link to my Facebook. This is what it tells me.. “Could not retrieve id for the specified page. Please verify correct href was passed in.”
    Any help you can offer will be great!
    Thank You!

    • Hi,

      You need to use the profile ID number for your facebook page, not the user name

  • Thank you so much for this!! I was able to get this up and running quickly. 2 questions. 1) can I remove the dot at the beginning of the menu? (please refer to http://www.shecreated.net/photo for example) 2) can I not have the drop down appear below their menu item and not centered?

    I’m new to this and I’m getting by with tutorials – I really cannot thank you enough!!! I started out with a pretty generic template and I’m miles away from where we started with it – and unfortunately I have miles to go as well…

    • Hi,

      In your Wordpress theme style sheet change the following CSS:

      From:

      
      #navbar div {
      	float: right;
      	height: 20px;
      	margin: 0px;
      	padding: 0px;
      	left: -50%;
      	position: relative;
      	text-align: left;
      	}
      

      Change it to:

      
      #navbar .dcjq-mega-menu {
      	float: right;
      	margin: 0px;
      	padding: 0px;
      	left: -50%;
      	position: relative;
      	text-align: left;
      }
      #dc_jqmegamenu_widget-3 {
      	list-style: none!important;
      }
      

      This should fix both problems

  • I have the widget working to show the top level items and second level items but the third is only showing up when you scroll over it and then it is just the first item doesn’t matter how many items are in that section. Any help would be great.

    • Hi,

      Sounds like there are styles from your theme’s style sheet affecting the way the menu is displayed. Which plugin is this for? Do you have a link to the site?

  • Hi,

    I added this pluin to my site but it is displaying vertically not horizontally. Please advise

  • Nice!
    Thanks to this post, now I have the widgets in their place!

    • Hi

      Glad it helped