?
Solved

How do I add a second menu next to the main menu in a Wordpress theme?

Posted on 2014-12-27
5
Medium Priority
?
151 Views
Last Modified: 2014-12-28
I have a site here:

http://rentawebguy.com/jen/

which is a Wordpress theme.  It currently has one menu in the header that is on the right side below the logo.

I need a second menu on the left side and then both menus positioned on either side of the logo.

Attached is a graphic showing what I want it to look like.

Any help is appreciated.
header.png
0
Comment
Question by:Donnie Walker
  • 2
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40519914
You have to be comfortable working with the PHP side of WordPress.  Are you?
0
 

Author Comment

by:Donnie Walker
ID: 40519937
enough to be dangerous.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 40520164
So the instructions on how to do this are found in this Codex article:

http://codex.wordpress.org/Navigation_Menus#Register_Menus

To paraphrase (aka copy/paste shamelessly), somewhere in your current functions.php file you have some code that looks like this:

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

Open in new window


What you need to do is alter that to make it look like this:

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

Open in new window


That change will define an extra custom menu in your theme.  Build the menu in Appearance | Menus the normal way.  Then, in your header.php file you have something that looks like this:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Open in new window


You would place this code (or a variant of it) on the other side of the logo:

<?php wp_nav_menu( array( 'theme_location' => 'extra-menu' ) ); ?>

Open in new window


The Codex article talks about how to how better to use wp_nav_menu so you can assign different container classes to each menu to make sure you get the floats the way you want them.

You may also want to read:

http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 40520324
a couple of thoughts -
- it looks like you are using a theme called 'Make'  from theme foundry  which has a 'drag and drop page builder'  and maybe they have a way  of  placing the main menu and the custom menu widget in the header in the way you want?
- Web use is really switching over to smart devices/tablets where the screen is a lot smaller and  the 2 menus ether side of the logo would be only seen on a large screen
0
 

Author Closing Comment

by:Donnie Walker
ID: 40520457
Thanks Jason! That really helped.
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Ecommerce has truly become one of the most prosperous ways of monetizing your brand on the Internet. However, when it comes to it, auditing is undoubtedly the lifeblood of this type of business.  This article will help you to conduct your ecommerce …
Why WooCommerce is one of the majorly favored choices when it comes to having an eCommerce store. This article will acquaint you with some reasons that I believe make it one of the best eCommerce platforms available.
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question