How To Take Full Control Of Workpress Menu Change WordPress menu structure, layout, location

[imjjss 0]

WorkPress Menu brief introduction

Whatever theme you choose to use in WordPress, you will have a menu (or a menu system in some feature rich themes). This is a very handy featrue in WordPress, and some themes even provide you an option to choose the way you prefer how your navigating system look. With a few steps of settings, you'll porbably satisfied. If not, that means you will be diving into some coding stuffs. Don't be scared. I'm going to provide you a detailed guide.

How to add extra menu without coding

Before we start coding our own menu, I still want to introduce the WordPress Custom Menu feature. Just because it's so handy!
To use this feature, your theme must support "Custom Menu". Go to Dashboard / Appearance / Menu , if your theme doesn't support this feature, it will tell you so on this page. If your theme support this feature, you can easily create your own menu here in 4 steps:

• 
  
• First step, On the right side of Menu option page, click Create Menu, give your menu a name and click Save;
  
• Second step, On the left side of Menu option page, there are several panels showing your different types of links. Check any link you like to add, click Add to menu and you are almost done;
  
• Third step, now you have your newly added links showing up on your mene panel on the right side of menu option page. Each link has its own property panel. Click the arrow on the panel title bar, you'll see the options for this link including URL, Label, Atributes, link target, CSS class, XFN, Description. Customize those settings to your like here;
  
• Final Step, Go to Apearance / Widget page, drag and drop "Custom Menu" widget into one of your widget area. It will let you choose which menu to show. Choose one and save. Done!
  

Now, go to your view your site, you'll see your newly created menu showing up. This is the simplest way to create your customized menu.
Next, I'm going to walk you through a few hacks in order to take full control of the menu system.

[imjjss 0]

So, now, here is the part 2--

How to take full control of Workpress Menu

In many cases, you might not satisfied at the way your theme arrange your menu. Ok, let's create our own.

First Step, Remove the navigating menu in your theme completely

This sounds scary, but don't worry, after clean it out, we will gain completely freedom of managing our menues. 2 jobs to do here:

Go to your theme folder, open header.php, browse through, find the second where your theme code the menu. Let's take WordPress default theme TwentyTen as an example, find this line:

function register_my_menus() {	register_nav_menus(		array(			'main-menu' => __( 'Main Menu' ),			'extra-menu' => __( 'Extra Menu' ),			'important-menu' => __( 'important Menu' )		)	);}

In this function, we registered 3 menus-- Main Menu, Extra menu, Important Menu. You can change the name to your like. You can add more menues inside this funtion.

Third step, Add your menu in your prefered location

There are 2 ways to add your custom menus in your site. The simple way is to use the Custom Menu widget. This method is described in previous post. Another way is to code it in your theme. Here we go-

Go to your theme folder, open header.php, find a place your prefer the Main Menu to show up, put in this code:

<?php wp_nav_menu( array( 'theme_location' => 'main-menu' , 'menu'=>'main','container' =>'ul', 'menu_class' =>'my-menu-class') ); ?>

Notic, there's a parameter of "container" and "menu_class". This is the way you generate html tags and attributes for styling purpose. In this example, I start the menu by "ul", and set the CSS class as "my-menu-class".

 

This is how you register and locate your menu in WordPress system. You can try it out by yourself-- add the "Extra" in sidebar.php, add the "important" in some other templates. Fairly simple, right?

Forth step, add links to your menu

Now your menus are ready for you to pick. All you need to do is to go to Apearance / Menu, then, add links to any of the menu you just registered. Visit your pages, you'll see the result.

You can also add the menus in widget. By adding it in widget, the menu will show up on all pages and posts unless you use another technic to tell WordPress which widget to show on which page. There is a handy plugin "Wedgit Logic" to do the job. I will not go further in how to show different menu in different page or post without any plugin. If anybody interested in this topic, I will create another tutorial about it.

Final step, styling

This is my favorit step. in previous step, we set the html tag and the CSS class for the menu, now we can open the style.css file, create rules to make our menu look wonderful. In this step, it's very helpful using Firefox extention Firebug to observe the theme structures. Once you get the html structure, you can start styling.

 

Enjoy!

Edited December 16, 2011 by yordan
"Wordpress" changed to "workpress" (see edit history)

[iGuest 3]

the title is work press not word press

[yordan 10]

the title is work press not word press

Nicely seen. Thanks. Fixed.