How to Use WordPress Advanced Menu Options

In the WordPress 3.0 version called the “Menu Update”, there were some nifty things added to the menu options but only a few of us uses them. The reason for this is, because they need to be activated. These options are not shown as default we need to activate. But if we make use of these options we can do a lot of cool stuff to make our blogs, websites more unique.

WordPress Advanced Menu Options

How to Activate the WordPress Advanced Menu Options

To activate these options, go to your WordPress dashboard then Appearance -> Menus. When you are at the menu options look for a button called, screen options, it should be at the top right of your screen. When you click it the following should appear.

Screen Options WordPress Menus

Then you can activate the ones you would like to. After you activated them, when you add a new menu item or you modify one, the options for you should look like the following:

WordPress Menu Options Screenshot

Link Target

The first option is the “Link target” this is pretty self explanatory. Using this option you can change how the links in the menu open. If you tic the check box the if you click on the menu link, it will open in a new tab in your browser.

CSS Classes

Using this option you can add custom CSS classes to each of your menu links. And with that you can stylize each menu link separately. If you know a bit of CSS the possibilities are endless. For example: name our menu item dev and we add the following Style to it:

.dev {
background:#efefef;
}

We should get something like this:

WordPress Menu Custom CSS

Link Relationship

Link Relationship is used to make relationships between links and websites easier. You can define it as “friend”, “nofollow” or what ever you’d like to. This option is the most useful when we are talking about backlinks. Using this method search engines can understand the relationship between the websites linked to each other via backlinks.

Description

You can add descriptions to any of your menu links using this options. Through not many themes support this. But you can add this option so your theme will display the description of each menu link if it is set by created a walker script then implementing it into your menu registration.

The walker script

Open your theme’s functions.php and add the following code at the bottom:

class My_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
        $class_names = $value = '';
 
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = '';
 
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
 
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
 
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '<span>' . $item->description . '</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;
 
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}
?>

Then add your new walker script to your menu. This is NOT in your functions.php, you can find the code below where you menu is displayed.

<?php
       $walker = new My_Walker;
    wp_nav_menu(array(
                'theme_location' => 'primary-menu',
        'walker' => $walker
    ));
?>

Conclusion

As WordPress updates, they add a lot of cool new features for us to use. So why not play attention to them? Many people didn’t know about these options because they are hidden and require ONE click to be shown. The options listed above can make a huge difference in your blog.


About Andor Nagy

Andor Nagy is a 17 years old student, who is interested in modern technology, mostly web development and web design.

Andor has written 4 awesome articles for us at TechLila.


Comments

  1. Nice wordpress feature i really like it. Thanks for sharing.

  2. Earlier wordpress was just a blog platform but they really work hard. Now WordPress has really developed and loaded with great features. You can customise in any way you want. It’s really cool feature you shared here. I was not aware of the same but will try to use on my blog.
    Prashant recently posted – How to Restore a Bad Superblock in Solaris 10My Profile

  3. Great this post is really helpful for the beginners thanks.

  4. I will say this post making my mind to use WordPress platform in Advance way to Make nice posts. Really helpful & easy step by step description of features. Going to share this post to my friends community who are really interested in making Good blog posts.
    Narendra Kumar recently posted – How to Create Windows 8 Bootable USB flash Drive from ISO ImageMy Profile

  5. Gret post!

    I must say I am just starting to use wordpress and what you say is really helpful …

    Thank you and I hope to read you soon!

    Daphne

  6. I have two websites that build on WP. I am thankful to you to post this. Such a helpful post.

  7. Great article.
    I am using WordPress platform.
    This is more useful for me.
    Pavan Lipare recently posted – Waterproof Cell PhonesMy Profile

  8. This is quite interesting..I never thought there will be an option which will allow the blogger to specify the relationship of the backlink with the website..Pretty cool stuff.
    Joe Hart recently posted – Dental ImplantsMy Profile

  9. I’ve been using WP for about 3 years. Thanks for these tips, I want to try them in practice. They look rather trustworthy))) Please wish me good luck
    Anna recently posted – 9 Cool Websites of 9 MotoCMS Clients – Can You Do Better?My Profile

  10. This article is useful for me as i use wordpress. Thanks for sharing this article.
    Visit this link:- http://kushagrabajaj1.blogspot.com/
    khusi singh recently posted – Kushagra BajajMy Profile

  11. Wow this information so inspiring. Previously i am not aware about this. Thanks for your sharing bro.
    Julidarma recently posted – Best Food To Fight Acne NaturallyMy Profile

  12. For my own site, there’s no real advantage as I’m happy to code the menu manually. But if you are writing a theme that other people will use, that makes it much easier for the end user.

    Note also, that the vast majority of the 10 million people using WordPress are not web developers, so they are probably much more comfortable using a menu interface compared to manually coding a menu.
    Paul D. Mitchell recently posted – Way to reset wordpress admin password if you can not log inMy Profile

  13. Many features that WP provide.
    This ease of acces makes webmaster set their website option simply.

    I think I should try this good tips.

    Thank you.
    Artikel Kimia recently posted – Tata Nama KetonMy Profile

  14. Hi. Thanks for the article. This is definitely very helpful. I’m wondering how — if at all — these instructions would differ for buddypress. I’ve created a custom menu in my WordPress theme, but it’s only showing up on the front page of my site. How can I get it to show up on every page of my site? Will this need to be done in header.php, functions.php and in buddypress_navigation.php? Anybody know?
    Binh Le recently posted – The Free Traffic Boom ReviewMy Profile

  15. it is a great tip, and it is very useful to me and i learned more from it,
    keep sharing.

  16. Thanks a lot for the info. I just recently shifted to wordpress and found it really hard to cope up. But your explanation is very clear, it surely has made difference to my site.
    Regards
    Rushikesh
    Rushikesh recently posted – Safari Download Manager for iOS 6My Profile

  17. Creating menus in normal site is a difficult task. Helpful feature for those who are not expert in coding.
    Bretcutts recently posted – Top Japanese Songs – Best Songs ListMy Profile

  18. WordPress Custom Menus is a great addition to WordPress that now we can easily create custom navigations and also menus for sidebar and footer. Andor Nagy you wrote a superb article and completely explain the whole scenario of custom menus. Thanks
    Anjum Hashir recently posted – Update AT&T LG Nitro HD P930 To Android 4.2.2 AOKP Build 6 ROMMy Profile

  19. Thank You for this great tutorial….let me test this on my WordPress site. You have written a fully explained post.
    Hamza Ahmad recently posted – Netflix Updated For iOS, Bringing Better Controls And New FeaturesMy Profile

Trackbacks

  1. [...] How to Use WordPress Advanced Menu Options [...]

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

CommentLuv badge
This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 5 approved comments. Use your Real Name and then @ your keywords (maximum of 3)