• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
TechRT Logo

TechRT

Technology, Real Time

  • Home
  • About
  • Contact
  • Deals and Offers
TechRT Logo
FacebookTweetLinkedInPin
Self Hosted Wordpress Vs Free Wordpress
Up Next

Self-Hosted WordPress.org Vs. Free WordPress.com

WordPress Advanced Menu Options

TechRT  /  WordPress

How to Use WordPress Advanced Menu Options

Avatar of Rajesh Namase Rajesh Namase
Last updated on: July 13, 2022

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 that 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, and websites more unique.

How to Activate the WordPress Advanced Menu Options

To activate these options, go to your WordPress dashboard and 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 tick the check box 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 whatever 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 these 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 creating a walker script and 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 . '

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 .= '' . $item->description . '';
$item_output .= '';
$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 your 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 pay 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.

Disclosure: Content published on TechRT is reader-supported. We may receive a commission for purchases made through our affiliate links at no extra cost to you. Read our Disclaimer page to know more about our funding, editorial policies, and ways to support us.

Sharing is Caring

FacebookTweetLinkedInPin
Avatar of Rajesh Namase

Rajesh Namase

Rajesh Namase is one of the top tech bloggers and one of the first people to turn blogging and digital marketing into a full-time profession. He is the co-founder of TechRT. He has a great passion for technology, digital marketing, and SEO.

Category

WordPress

Tags

WordPress Tips, WordPress Tutorials

Reader Interactions

No Comments Logo

Leave a comment

Have something to say about this article? Add your comment and start the discussion.

Add Your Comment Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Popular

  • Hulu Keeps Crashing or Shutting Down (10+ EASY Fixes)
  • How to Ping a Phone: 8 Ways to Find Location
  • What is Carrier Hub App? How to Uninstall it?
  • Hotmail Not Receiving Emails (You Should Try This Fix FIRST)
  • 12+ Google Workspace Alternatives: G Suite Alternatives (Free and Paid)

Trending Topics

  • Android
  • Gaming
  • Internet
  • iPhone
  • macOS
  • Social Media
  • Technology
  • Windows
image/svg+xml image/svg+xml

Footer

About

Hello and welcome to TechRT. TechRT, which stands for Technology, Real Time, aims to be a holistic space for all things tech. We talk about anything and everything that comes under the umbrella of ‘tech’ and ‘science.’

Founded and managed by some of the most passionate tech geeks you will come across, TechRT wants to become more than a resource hub. We would like to build a community that can offer the best technology experience to everyone!

Links

  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms

Follow

Cloud Hosting by Cloudways

Copyright ©  2016–2023 TechRT. All Rights Reserved. All trademarks are the property of their respective owners.