HOME       >>       Websites and Web Designing

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


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: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.


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.




the title is work press not word press


the title is work press not word press

Nicely seen. Thanks. Fixed.


Xisto.com offers Free Web Hosting to its Members for their participation in this Community. We moderate all content posted here but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2001-2019 by Xisto Corporation. All Rights Reserved.