How to Add Title Attribute in WordPress Navigation Menus

Recently, one of our readers asked if there’s a way to add title attribute in WordPress menus? Title attribute allows you to provide extra information about a link. It often appears as tooltip text when the mouse moves over the link. In this article, we… Read More »

The post How to Add Title Attribute in WordPress Navigation Menus appeared first on WPBeginner.

Recently, one of our readers asked if there’s a way to add title attribute in WordPress menus? Title attribute allows you to provide extra information about a link. It often appears as tooltip text when the mouse moves over the link. In this article, we will show you how to add title attribute in WordPress navigation menus.

How to Add the Title Attributes in WordPress Menus

Why Use Title Attribute in Menus?

Title attribute is an HTML attribute that can be added to any element, but it is most commonly used with links and images.

It allows you to provide additional information about the link or the image. See our guide on the difference between what’s the difference between image alt text vs title.

Title attribute displayed as a tooltip for an image

Typically web browsers display the title attribute on mouseover. This allows users to see where this link will take them before they click on it.

Screen readers may also read title attribute, but many screen readers will ignore it and will only read the anchor text.

Some SEO experts believe that it is not useful while others claim it is useful for SEO as it allows you to provide more context.

WordPress removed title attribute from insert link popup in version 4.2. However, you can easily add the title and rel=nofollow options in insert link popup.

Having said that, let’s take a look at how to add title attribute in WordPress navigation menus.

Adding Title Attribute in WordPress Navigation Menu Items

First you need to visit Appearance » Menus page and click on the ‘Screen Options‘ tab in the top right corner of the screen.

Enable title attribute for navigation menus in WordPress

This will bring down a menu where you need to click on the check box next to Title Attribute option.

After that, simply scroll down and click on any menu item in your existing menu to expand it. You will now see the title attribute field.

Add title attribute to the menu item

You can now add the text you want to use as title and then repeat it for all menu items in your navigation menu.

Don’t forget to click on the save menu button to store your changes.

You can now visit your website and take your mouse to a link in navigation menu. You will see the title attribute displayed as tooltip.

Title displayed in tooltip

You can take title attributes even further with jQuery by adding fancy tooltips on mouseover effect.

We hope this article helped you learn how to add title attribute in WordPress navigation menus. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Title Attribute in WordPress Navigation Menus appeared first on WPBeginner.

15 Best Tutorials to Master WordPress Navigation Menus

Are you looking for the best tutorials to work with WordPress navigation menus? WordPress navigation menus allow you to easily customize and manage menus on your website. In this article, we will show you the best tutorials to master WordPress navigation menus. Since this is… Read More »

The post 15 Best Tutorials to Master WordPress Navigation Menus appeared first on WPBeginner.

Are you looking for the best tutorials to work with WordPress navigation menus? WordPress navigation menus allow you to easily customize and manage menus on your website. In this article, we will show you the best tutorials to master WordPress navigation menus.

Best tutorials to master WordPress navigation menus

Since this is a lengthy article, we have added a list of contents for easier navigation.

  1. Getting Started with WordPress Navigation Menus
  2. Add Social Media Icons to WordPress Menus
  3. Show Different Menus to Logged In Users in WordPress
  4. Add Conditional Logic to Navigation Menus
  5. Styling WordPress Navigation Menus
  6. Add Image Icons with Navigation Menus in WordPress
  7. Add Custom Navigation Menus in WordPress
  8. Add Slide Panel Menu in WordPress Themes
  9. Creating a Mobile Ready Responsive WordPress Menu
  10. Add a Fullscreen Responsive Menu in WordPress
  11. Adding Description with Navigation Menus in WordPress
  12. How to Add Topics in WordPress Navigation Menus
  13. How to Add Navigation Menus in WordPress Sidebar
  14. Add WordPress Navigation Menu in Posts and Pages
  15. Add NoFollow Links in WordPress Navigation Menus

1. Getting Started with WordPress Navigation Menus

In web design, navigation menu is a list of links that allows your website visitors to visit different pages and sections on your website. It helps users navigate around your website, hence the name navigation menu.

Navigation menu

WordPress comes with a built in tool that allows you to create and use menus on your website. This tool is located at Appearance » Menus page in your WordPress admin area.

Creating and managing navigation menus in WordPress

Here you can create menus by adding items from left hand column to the right. You can add any WordPress post, page, categories, and custom links to your menus.

For detailed instructions see our beginner’s guide on how to add navigation menus in WordPress.

2. Add Social Media Icons to WordPress Menus

WordPress menus can also be used to add social media buttons to your website. This allows you to easily update icons, rearrange them, and add new social media icons whenever you want.

The easiest way to do this is by using the Menu Social Icons plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, head over to Appearance » Menus page. Create a new social menu and then on custom links tab from left column.

Adding social menus

You will see the social media icons below the link text and URL fields. All you need to do is click on a social media icon and enter your social profile URL. When you’re done, click on add to menu button.

Repeat this process for all social media profiles that you want to add. Once you are done select a menu location and then click on the save menu button.

For more detailed instructions see our guide on how to add social media icons to WordPress menus.

3. Show Different Menus to Logged In Users in WordPress

If you run a WordPress membership site, then you may want to show different menus to your logged in users. Here is how you can easily achieve this.

First you need to create two different menus. One for your logged in users and one for users who are not logged in. You can name these menus logged-in and logged-out.

Next, you need to add this code to your theme’s functions.php file or a site-specific plugin.

function my_wp_nav_menu_args( $args = '' ) {

if( is_user_logged_in() ) { 
	$args['menu'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

That’s all. You can now test your navigation menus in action.

For more detailed instructions see our tutorial on how to show different menus to logged in users in WordPress.

4. Add Conditional Logic to Navigation Menus

Want to change menus based on certain conditions? Like a different menu on homepage, or hiding an item on single posts. Here is how you can achieve this in WordPress.

First you need to install and activate the If Menu plugin.

Upon activation, visit Appearabnce » Menus screen and click on a menu item that you want to edit. You will notice a new option to ‘Enable conditional logic’.

Conditional logic option for a menu item

Checking this option will show you two drop down options. You can select show or hide for a menu if it matches the certain conditions. For example, hide menu item if a user is an admin or show a menu item only if a user is vewing a single post.

For more detailed instructions see our article on how to add conditional logic to WordPress menus.

5. Styling WordPress Navigation Menus

Your WordPress theme controls the appearance of navigation menus on your website. Using CSS you can customize the appearance of navigation menus.

The easiest way to do this is by using the CSS Hero plugin. It is a premium WordPress plugin that allows you to customize any WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

You can also style your navigation menus by manually writing CSS. For detailed instructions, see our guide on how to style WordPress navigation menus.

6. Add Image Icons with Navigation Menus in WordPress

Image icons in navigation menus

Many popular websites using image icons next to their navigation menus to make them more noticeable. Here is how you can add image icons with navigation menus in WordPress.

First, you need to install and activate the Menu Image plugin. Upon activation, go to Appearance » Menus. There you will see an option to add images with each item in your existing menu.

Adding image to a menu item in WordPress

You can also use CSS to add image icons. For detailed instructions, see our guide on how to add image icons with navigation menus in WordPress.

7. Add Custom Navigation Menus in WordPress

Most free and premium WordPress themes come with pre-defined locations to display your navigation menus. However, you can also add custom navigation menus to your themes.

First you will need to register your new navigation menu by adding this code to your theme’s functions.php file.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

This code will create ‘My Custom Menu’ for your theme. You can see this by editing a menu on Appearance » Menus page.

Theme location for your custom menu

To display your custom menu, you will need to add this code to your theme where you want to display the menu.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

For more detailed instructions, see our article on how to add custom navigation menus in WordPress themes.

8. Add Slide Panel Menu in WordPress Themes

A slide panel navigation menu in WordPress

Want to show your site’s navigation menu is a slide-in panel? Using slide in panels makes your menus more interactive, less intrusive, and fun specially on mobile devices.

However, in order to add them you will need medium level understanding of JavaScript, WordPress themes, and CSS.

For step by step instructions, see our guide on how to add a slide panel menu in WordPress themes.

9. Creating a Mobile Ready Responsive WordPress Menu

Mobile responsive navigation menu in WordPress

Most WordPress themes are responsive and come with mobile-ready navigation menus. However, if your theme doesn’t handles navigation menus well on mobile devices, then it affects user experience on mobile devices.

Luckily, there are some easy ways for you to add mobile ready responsive menus without writing any code.

First, you need to install and activate the Responsive Menu plugin.

Upon activation, you need to click on ‘Responsive Menu’ in your WordPress admin bar to configure plugin settings.

Simply select a width after which mobile responsive menu should be visible. After that you need to select an existing navigation menu.

Don’t forget to click on ‘Update Options’ button to store your settings. That’s all you can now visit your website and resize browser screen to see the mobile responsive menu.

There are many other ways to add a mobile responsive menu. Like a menu that appears with a toggle effect, a slide in menu, and responsive select menu. Learn more about all of them in our guide on how to create a mobile-ready responsive WordPress menu.

10. Add a Fullscreen Responsive Menu in WordPress

Fullscreen responsive menu in WordPress

Have you noticed how some popular websites use a fullscreen navigation menu? Usually it requires some creative use of JavaScript and CSS. Luckily, you can do this in WordPress without writing any code.

First, you need to install and activate the DC – Full Screen Responsive Menu. Upon activation, you need to visit Appearance » DC Fullscreen Menu page to configure the plugin settings.

Fullscreen menu settings

Here you can choose a menu, background and text color, and Google font for your fullscreen menu.

Click on the submit button to store your settings. You can now visit your website to see your fullscreen responsive menu in action.

For more on this topic, see our guide on how to add a fullscreen responsive menu in WordPress.

WordPress navigation menus are usually just text links showing the link label or anchor text. What if you wanted to add a little description or tag line for each item in your navigation menu?

Luckily, WordPress comes with built-in functionality to add description with every item in your navigation menus.

First, you will need to enable the descriptions item. Click on the Screen Options button at the top right corner of the screen.

This will show a list of boxes and options that you can enable. You need to check the box next to Description.

Enabling description field for navigation menus in WordPress

Now scroll down and click on a menu item to edit it and you will see an option to add description.

Description field added to menu items

Add your description and click on the save menu button.

If your theme supports menu descriptions, then you will be able to see them right away. Otherwise, you will have to edit your theme files to show descriptions.

For detailed instructions, see our guide on how to add menu descriptions in your WordPress theme.

Displaying blog topics in WordPress navigation menu

We are often asked about how to add blog topics to navigation menus in WordPress. Many beginners assume that they need to create pages for each topic in order to add them to menus.

What you actually need is categories. Categories and tags are built in WordPress taxonomies which allow you to sort content into relevant topics.

Add your articles into relevant categories and then head over to Appearance » Menus page. Click on the categories tab to expand it and then select the categories that you want to display in your navigation menus.

Adding categories to navigation menus in WordPress

For more details, see our article on how to add topics in WordPress navigation menus.

13. How to Add Navigation Menus in WordPress Sidebar

WordPress themes usually have navigation menus on the top or bottom. However, you can also create and add menus into your WordPress sidebar as well.

Simply visit Appearance » Widgets page and add ‘Custom Menu’ widget to your sidebar. For detailed instructions, see our guide on how to add and use widgets in WordPress.

Adding navigation menu to sidebar widget

After adding the widget to a sidebar you can select a menu from the drop down option. Don’t forget to click on the save button to store your settings.

Usually navigation menus are shown in the header or sidebar of a website. However, sometimes you may want to add a menu inside a WordPress post or page. Here is how you would do that.

First, you need to install and activate the Menu Shortcode plugin. Upon activation, edit the post or page where you want to display your menu and add this shortcode:

[listmenu menu="Your Menu Name"]

Don’t forget to replace ‘Your Menu Name’ with the name of your own navigation menu. Save or publish your post and then click on the preview button.

For more details, see our guide on how to add WordPress navigation menu in posts or pages.

Typically, your site’s navigation menu contains links to your own posts and pages. However, sometimes you may need to add a link to an external site.

Many SEO experts recommend adding rel=”nofollow” attribute to external links. Here is how you will add nofollow attribute to links in WordPress navigation menus.

First, you need to visit Appearance » Menus page and then click on Screen Options button at the top right corner of the screen.

Check target and link relationship boxes in Screen Options

This will bring down a menu where you need to check the boxes next to Link Relationship (XFN) and Link Target options.

Now click on the menu item you want to edit. You will notice two new options, Link Relationship and Open link in a new window/tab.

Adding nofollow to a menu item

You need to enter nofollow in the link relationship option. You can also check the open link in new window/tab option if you want.

Click on the save menu button to store your changes. Now this particular link in your WordPress navigation menu will have rel=”nofollow” attribute added.

For more detailed instructions, see our tutorial on how to add nofollow links in WordPress navigation menus.

We hope this article helped find the best tutorials to master WordPress navigation menus. You may also want to see our list of 24 must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 15 Best Tutorials to Master WordPress Navigation Menus appeared first on WPBeginner.

15 Best Tutorials to Master WordPress Navigation Menus

Are you looking for the best tutorials to work with WordPress navigation menus? WordPress navigation menus allow you to easily customize and manage menus on your website. In this article, we will show you the best tutorials to master WordPress navigation menus. Since this is… Read More »

The post 15 Best Tutorials to Master WordPress Navigation Menus appeared first on WPBeginner.

Are you looking for the best tutorials to work with WordPress navigation menus? WordPress navigation menus allow you to easily customize and manage menus on your website. In this article, we will show you the best tutorials to master WordPress navigation menus.

Best tutorials to master WordPress navigation menus

Since this is a lengthy article, we have added a list of contents for easier navigation.

  1. Getting Started with WordPress Navigation Menus
  2. Add Social Media Icons to WordPress Menus
  3. Show Different Menus to Logged In Users in WordPress
  4. Add Conditional Logic to Navigation Menus
  5. Styling WordPress Navigation Menus
  6. Add Image Icons with Navigation Menus in WordPress
  7. Add Custom Navigation Menus in WordPress
  8. Add Slide Panel Menu in WordPress Themes
  9. Creating a Mobile Ready Responsive WordPress Menu
  10. Add a Fullscreen Responsive Menu in WordPress
  11. Adding Description with Navigation Menus in WordPress
  12. How to Add Topics in WordPress Navigation Menus
  13. How to Add Navigation Menus in WordPress Sidebar
  14. Add WordPress Navigation Menu in Posts and Pages
  15. Add NoFollow Links in WordPress Navigation Menus

1. Getting Started with WordPress Navigation Menus

In web design, navigation menu is a list of links that allows your website visitors to visit different pages and sections on your website. It helps users navigate around your website, hence the name navigation menu.

Navigation menu

WordPress comes with a built in tool that allows you to create and use menus on your website. This tool is located at Appearance » Menus page in your WordPress admin area.

Creating and managing navigation menus in WordPress

Here you can create menus by adding items from left hand column to the right. You can add any WordPress post, page, categories, and custom links to your menus.

For detailed instructions see our beginner’s guide on how to add navigation menus in WordPress.

2. Add Social Media Icons to WordPress Menus

WordPress menus can also be used to add social media buttons to your website. This allows you to easily update icons, rearrange them, and add new social media icons whenever you want.

The easiest way to do this is by using the Menu Social Icons plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, head over to Appearance » Menus page. Create a new social menu and then on custom links tab from left column.

Adding social menus

You will see the social media icons below the link text and URL fields. All you need to do is click on a social media icon and enter your social profile URL. When you’re done, click on add to menu button.

Repeat this process for all social media profiles that you want to add. Once you are done select a menu location and then click on the save menu button.

For more detailed instructions see our guide on how to add social media icons to WordPress menus.

3. Show Different Menus to Logged In Users in WordPress

If you run a WordPress membership site, then you may want to show different menus to your logged in users. Here is how you can easily achieve this.

First you need to create two different menus. One for your logged in users and one for users who are not logged in. You can name these menus logged-in and logged-out.

Next, you need to add this code to your theme’s functions.php file or a site-specific plugin.

function my_wp_nav_menu_args( $args = '' ) {

if( is_user_logged_in() ) { 
	$args['menu'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

That’s all. You can now test your navigation menus in action.

For more detailed instructions see our tutorial on how to show different menus to logged in users in WordPress.

4. Add Conditional Logic to Navigation Menus

Want to change menus based on certain conditions? Like a different menu on homepage, or hiding an item on single posts. Here is how you can achieve this in WordPress.

First you need to install and activate the If Menu plugin.

Upon activation, visit Appearabnce » Menus screen and click on a menu item that you want to edit. You will notice a new option to ‘Enable conditional logic’.

Conditional logic option for a menu item

Checking this option will show you two drop down options. You can select show or hide for a menu if it matches the certain conditions. For example, hide menu item if a user is an admin or show a menu item only if a user is vewing a single post.

For more detailed instructions see our article on how to add conditional logic to WordPress menus.

5. Styling WordPress Navigation Menus

Your WordPress theme controls the appearance of navigation menus on your website. Using CSS you can customize the appearance of navigation menus.

The easiest way to do this is by using the CSS Hero plugin. It is a premium WordPress plugin that allows you to customize any WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

You can also style your navigation menus by manually writing CSS. For detailed instructions, see our guide on how to style WordPress navigation menus.

6. Add Image Icons with Navigation Menus in WordPress

Image icons in navigation menus

Many popular websites using image icons next to their navigation menus to make them more noticeable. Here is how you can add image icons with navigation menus in WordPress.

First, you need to install and activate the Menu Image plugin. Upon activation, go to Appearance » Menus. There you will see an option to add images with each item in your existing menu.

Adding image to a menu item in WordPress

You can also use CSS to add image icons. For detailed instructions, see our guide on how to add image icons with navigation menus in WordPress.

7. Add Custom Navigation Menus in WordPress

Most free and premium WordPress themes come with pre-defined locations to display your navigation menus. However, you can also add custom navigation menus to your themes.

First you will need to register your new navigation menu by adding this code to your theme’s functions.php file.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

This code will create ‘My Custom Menu’ for your theme. You can see this by editing a menu on Appearance » Menus page.

Theme location for your custom menu

To display your custom menu, you will need to add this code to your theme where you want to display the menu.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

For more detailed instructions, see our article on how to add custom navigation menus in WordPress themes.

8. Add Slide Panel Menu in WordPress Themes

A slide panel navigation menu in WordPress

Want to show your site’s navigation menu is a slide-in panel? Using slide in panels makes your menus more interactive, less intrusive, and fun specially on mobile devices.

However, in order to add them you will need medium level understanding of JavaScript, WordPress themes, and CSS.

For step by step instructions, see our guide on how to add a slide panel menu in WordPress themes.

9. Creating a Mobile Ready Responsive WordPress Menu

Mobile responsive navigation menu in WordPress

Most WordPress themes are responsive and come with mobile-ready navigation menus. However, if your theme doesn’t handles navigation menus well on mobile devices, then it affects user experience on mobile devices.

Luckily, there are some easy ways for you to add mobile ready responsive menus without writing any code.

First, you need to install and activate the Responsive Menu plugin.

Upon activation, you need to click on ‘Responsive Menu’ in your WordPress admin bar to configure plugin settings.

Simply select a width after which mobile responsive menu should be visible. After that you need to select an existing navigation menu.

Don’t forget to click on ‘Update Options’ button to store your settings. That’s all you can now visit your website and resize browser screen to see the mobile responsive menu.

There are many other ways to add a mobile responsive menu. Like a menu that appears with a toggle effect, a slide in menu, and responsive select menu. Learn more about all of them in our guide on how to create a mobile-ready responsive WordPress menu.

10. Add a Fullscreen Responsive Menu in WordPress

Fullscreen responsive menu in WordPress

Have you noticed how some popular websites use a fullscreen navigation menu? Usually it requires some creative use of JavaScript and CSS. Luckily, you can do this in WordPress without writing any code.

First, you need to install and activate the DC – Full Screen Responsive Menu. Upon activation, you need to visit Appearance » DC Fullscreen Menu page to configure the plugin settings.

Fullscreen menu settings

Here you can choose a menu, background and text color, and Google font for your fullscreen menu.

Click on the submit button to store your settings. You can now visit your website to see your fullscreen responsive menu in action.

For more on this topic, see our guide on how to add a fullscreen responsive menu in WordPress.

WordPress navigation menus are usually just text links showing the link label or anchor text. What if you wanted to add a little description or tag line for each item in your navigation menu?

Luckily, WordPress comes with built-in functionality to add description with every item in your navigation menus.

First, you will need to enable the descriptions item. Click on the Screen Options button at the top right corner of the screen.

This will show a list of boxes and options that you can enable. You need to check the box next to Description.

Enabling description field for navigation menus in WordPress

Now scroll down and click on a menu item to edit it and you will see an option to add description.

Description field added to menu items

Add your description and click on the save menu button.

If your theme supports menu descriptions, then you will be able to see them right away. Otherwise, you will have to edit your theme files to show descriptions.

For detailed instructions, see our guide on how to add menu descriptions in your WordPress theme.

Displaying blog topics in WordPress navigation menu

We are often asked about how to add blog topics to navigation menus in WordPress. Many beginners assume that they need to create pages for each topic in order to add them to menus.

What you actually need is categories. Categories and tags are built in WordPress taxonomies which allow you to sort content into relevant topics.

Add your articles into relevant categories and then head over to Appearance » Menus page. Click on the categories tab to expand it and then select the categories that you want to display in your navigation menus.

Adding categories to navigation menus in WordPress

For more details, see our article on how to add topics in WordPress navigation menus.

13. How to Add Navigation Menus in WordPress Sidebar

WordPress themes usually have navigation menus on the top or bottom. However, you can also create and add menus into your WordPress sidebar as well.

Simply visit Appearance » Widgets page and add ‘Custom Menu’ widget to your sidebar. For detailed instructions, see our guide on how to add and use widgets in WordPress.

Adding navigation menu to sidebar widget

After adding the widget to a sidebar you can select a menu from the drop down option. Don’t forget to click on the save button to store your settings.

Usually navigation menus are shown in the header or sidebar of a website. However, sometimes you may want to add a menu inside a WordPress post or page. Here is how you would do that.

First, you need to install and activate the Menu Shortcode plugin. Upon activation, edit the post or page where you want to display your menu and add this shortcode:

[listmenu menu="Your Menu Name"]

Don’t forget to replace ‘Your Menu Name’ with the name of your own navigation menu. Save or publish your post and then click on the preview button.

For more details, see our guide on how to add WordPress navigation menu in posts or pages.

Typically, your site’s navigation menu contains links to your own posts and pages. However, sometimes you may need to add a link to an external site.

Many SEO experts recommend adding rel=”nofollow” attribute to external links. Here is how you will add nofollow attribute to links in WordPress navigation menus.

First, you need to visit Appearance » Menus page and then click on Screen Options button at the top right corner of the screen.

Check target and link relationship boxes in Screen Options

This will bring down a menu where you need to check the boxes next to Link Relationship (XFN) and Link Target options.

Now click on the menu item you want to edit. You will notice two new options, Link Relationship and Open link in a new window/tab.

Adding nofollow to a menu item

You need to enter nofollow in the link relationship option. You can also check the open link in new window/tab option if you want.

Click on the save menu button to store your changes. Now this particular link in your WordPress navigation menu will have rel=”nofollow” attribute added.

For more detailed instructions, see our tutorial on how to add nofollow links in WordPress navigation menus.

We hope this article helped find the best tutorials to master WordPress navigation menus. You may also want to see our list of 24 must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 15 Best Tutorials to Master WordPress Navigation Menus appeared first on WPBeginner.

How to Add Post Type Archive in WordPress Navigation Menus

Recently, one of our readers asked if it was possible to add a link to custom post type archive pages in WordPress navigation menus. An archive page in WordPress displays a list of all posts under a specific post type, category, or tag. In this… Read More »

The post How to Add Post Type Archive in WordPress Navigation Menus appeared first on WPBeginner.

Recently, one of our readers asked if it was possible to add a link to custom post type archive pages in WordPress navigation menus. An archive page in WordPress displays a list of all posts under a specific post type, category, or tag. In this article, we will show you how to add post type archive in WordPress navigation menus.

How to add custom post type archive link in navigation menus

Custom Post Type Archives in WordPress

In WordPress, the term ‘Archives’ is used for a list of entries from a post type or taxonomy (like categories and tags).

If archives are enabled for a custom post type, then you can display them on your website. Typically, the URL of your custom post type archive page is in this format:

http://example.com/post-type-slug/

Post type slug is the nice name for your custom post type.

For example, we have a custom post type called ‘Deals’, and you can view its archive page at a URL like this:

http://www.wpbeginner.com/deals/

You can place a link to the archive page of your custom post type in your site’s navigation menus. This will allow your users to see all past entries posted in that post type on a single page.

Having said that, let’s see how to add a link to your custom post type archive page in WordPress navigation menus.

Adding Link to Custom Post Type Archive page in Navigation Menus

First, you need to visit Appearance » Menus page. You will notice a tab for each of your custom post type in the left column.

Custom post type tab on navigation menus screen in WordPress

You need to click on the name of your custom post type to expand it and then click on the ‘View all’ tab.

You will see an option for your post type archives. Check the box next to it and then click on the Add to Menu button.

Your custom post type archive will now appear as a menu item in the right column.

Post type archive menu item

By default, it will use your custom post type name with the word archives for the link label.

You may want to change this into something easier. Click on the menu item to edit it and then change its navigation label.

Menu label

Don’t forget to click on the save menu button to store your changes.

You can now visit your website to see the custom post type archive link in your navigation menu.

Custom post type link in WordPress navigation menu

Just like posts and pages, you can also add a single entry from your post type to navigation menus.

Simply select an entry and then click on add to menu button.

Adding single items from a post type to navigation menus

Don’t forget to click on the save menu button to store your changes.

My Custom Post Type Doesn’t Appear on Menus Screen

Custom post types need to match some requirements in order to be displayed on Appearance » Menus page.

First you need to make sure that an archive page exists for your custom post type. Typically it is a URL like this:

http://example.com/movies/

Replace example.com with your own domain name and movies with your post type.

If you can see entries from your post type on this page, then this means your post type supports archives but does not support other requirements.

Good news is that you can still add your custom post type archive page as a custom link.

Visit Appearance » Menus page and then click on the ‘Custom Link’ tab to expand it.

Adding a post type archive link as a custom link

Enter the URL of your custom post type archive page in the URL field and add the label you want to display in the link field.

Next, click on the add to menu button, and you will notice the custom link appear in the right column.

Custom link item in navigation menu

You can now click on the save menu button to store your changes.

We hope this article helped you learn how to add post type archive in WordPress navigation menus. You may also want to see our list of 12 most useful WordPress custom post types tutorials.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Post Type Archive in WordPress Navigation Menus appeared first on WPBeginner.

How to Add WordPress Navigation Menu in Posts / Pages

Do you want to display WordPress navigation menu in your posts or pages? Usually, your WordPress theme handles how and where navigation menus are displayed. In this article, we will show you how to add wordPress navigation menu in posts/pages or anywhere on your WordPress… Read More »

The post How to Add WordPress Navigation Menu in Posts / Pages appeared first on WPBeginner.

Do you want to display WordPress navigation menu in your posts or pages? Usually, your WordPress theme handles how and where navigation menus are displayed. In this article, we will show you how to add wordPress navigation menu in posts/pages or anywhere on your WordPress site.

Adding WordPress navigation menu in posts or pages

Why Add WordPress Navigation Menu in Posts/Pages

Navigation menus in WordPress provide an easy way to add a structured menu to your site.

You can create as many navigation menus as you want in your WordPress admin area, but you can only display them on menu locations available in your WordPress theme.

What if you needed to add a menu in a post or page? In that case, you will have to manually create a list of links which is not as efficient to manage as a WordPress menu.

Having said that, let’s see how you can add navigation menus in WordPress posts or pages.

Adding Navigation Menu in WordPress Posts/Pages

First thing you need to do is install and activate the Shortcode Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Before you can use the plugin, first you will need to create the navigation menu that you want to display. Go to Appearance » Menus to create it. See our beginner’s guide on how to add navigation menu in WordPress for detailed instructions.

Once your menu is ready, you can click on the Shortcode Menu from your WordPress admin bar. This will take you to the plugin’s shortcode generator page.

Shortcode Menu settings page

First you need to select the menu you want to add from the ‘Select Menu’ drop down list. If you need to add an ID or class attribute to your menu, then you can add those.

Next, you need to choose a display style for your menu. By default, your menu will be displayed as a block. You can change that to inline if you want to display the menu in a horizontal line.

Default list type block menu

You can also change menu colors under ‘Design your menu on the fly’ section. The plugin allows you to select background, hover, and anchor colors.

At the bottom of the shortcode generator column, you will find the shortcode with options you chose above. Simply copy the shortcode and paste it in the post, page, or widget where you want to display your menu.

Copy the menu shortcode to use in a post or page in WordPress

The plugin adds some basic style to make your menu presentable. But if you want to customize the appearance of the menu, then you will need to do that with CSS.

In the second column of the plugin’s settings page, you will find a basic CSS snippet. You can use that as an starting point by adding it to your child theme‘s stylesheet or by using Simple Custom CSS plugin.

However, if you are not familiar with CSS, then you can try CSS Hero. It is a powerful plugin that allows you to style anything on your WordPress site using a simple user interface and without writing any code.

We hope this article helped you add navigation menu in your WordPress posts or page. You may also want to see our guide on how to create a table of contents in WordPress post or page.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add WordPress Navigation Menu in Posts / Pages appeared first on WPBeginner.

How to Add Social Media Icons to WordPress Menus

Do you want to add social media icons in your WordPress site? While WordPress does not come with a social media profiles section, you can easily use WordPress navigation menus to add and display social media media icons. In this article, we will show you… Read More »

To leave a comment please visit How to Add Social Media Icons to WordPress Menus on WPBeginner.

Do you want to add social media icons in your WordPress site? While WordPress does not come with a social media profiles section, you can easily use WordPress navigation menus to add and display social media media icons. In this article, we will show you how to add social media icons to WordPress menus.

The biggest advantage of adding social media icons using WordPress menus instead of another plugin is that you have the ability to change the order they appear with a simple drag-and-drop interface. You can also display them just about anywhere such as your sidebar or another menu location.

Adding Social Media Icons to WordPress Menus Using a Plugin

This method was suggested to us by our founder, Syed Balkhi, who has a simple custom menu showing social media icons.

Social media icons in a menu displayed in WordPress sidebar

First thing you need to do is install and activate the Menu Social Icons plugin. After activation, you need to visit Appearance » Menus in your WordPress dashboard area to start adding social icons.

Before you start adding links, you will need to create a new menu by clicking on the create new menu link. You can give your menu an appropriate title such as Social Menu.

Creating a new navigation menu in WordPress

Next, click on the custom links tab on the left side, and you will see the social media icons below the link text and URL fields. All you need to do is click on a social media icon and enter your social profile URL. When you’re done, click on add to menu button. Repeat this process for all social media profiles that you want to add.

Adding social media icons to a WordPress menu

Once you have added your social media profile icons to the menu, you need to choose a menu location. Depending on your theme, you may have multiple menu locations where you can display your social icons menu.

If you do not have menu locations, then you can always show the social media icons in your WordPress sidebar.

Adding Social Media Icons Menu in Sidebar

You can display your social icons menu in any WordPress sidebar or widget-ready area by going to Appearance » Widgets in your WordPress admin area. Once there, simply drag-and-drop a custom menu widget to your sidebar.

Adding social media icons to WordPress sidebar

In the widget settings, select the social menu you just created and then click on save button. You can now preview your site to see the social icons menu in action.

If your WordPress theme has multiple widget areas on different locations, then you can add social menu icons in those locations such as WordPress footer, header, below the post, etc.

Using FontAwesome Icons in WordPress Menus

The best part about Menu Social Icons plugin is that uses the beautiful FontAwesome library to add social media icons. While the plugin comes with the entire FontAwesome library, it only loads selected social media icons in your WordPress menus.

If you would like to use any other icon from FontAwesome, then you can do that as well.

First visit the FontAwesome library and select the icon that you want to use. For this example, we will add a RSS icon to social icons. Once you have selected your icon, you would need to add this code in your theme’s functions.php file or a site-specific plugin:

add_filter( 'storm_social_icons_networks', 'storm_social_icons_networks');
function storm_social_icons_networks( $networks ) {

    $extra_icons = array (
        '/feed' => array(                  // Enable this icon for any URL containing this text
            'name' => 'RSS',               // Default menu item label
            'class' => 'rss',              // Custom class
            'icon' => 'icon-rss',          // FontAwesome class
            'icon-sign' => 'icon-rss-sign' // May not be available. Check FontAwesome.
        ),
    );

    $extra_icons = array_merge( $networks, $extra_icons );
    return $extra_icons;

}

For adding other icons, you need to replace /feed with the URL of social network you are trying to add. Also replace rss with the name of the icon you want to add.

If you want to use FontAwesome in your WordPress posts, then check out our tutorial on how to use icon fonts in WordPress post editor.

Adding Your Own Social Media Icons in WordPress Menus

Menu social icons plugin uses FontAwesome icons in WordPress menus, but what if you wanted to use your own icon images? It’s definitely possible. Here is how you can add any custom image icons to WordPress menus.

First you need to install and activate the Menu Image plugin. Upon activation, you need to visit Appearances » Menus page where you will notice the menu image buttons under each menu item. Simply upload your icon image there.

Upload custom social media icons to WordPress menus

See our article on how to add image icons with navigation menus in WordPress for more detailed instructions.

We hope this article helped you learn how to add social media icons to WordPress menus. You may also want to take a look at our tutorial on how to style WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit How to Add Social Media Icons to WordPress Menus on WPBeginner.

How to Create a Duplicate Menu in WordPress with One Click

WordPress comes with a built-in system to add navigation menus to your website. Even though it is very effecient, it doesn’t allow you to create a duplicate menu. If you wanted to create a similar menu quickly, then you will have to manually replicate it.… Read More »

To leave a comment please visit How to Create a Duplicate Menu in WordPress with One Click on WPBeginner.

WordPress comes with a built-in system to add navigation menus to your website. Even though it is very effecient, it doesn’t allow you to create a duplicate menu. If you wanted to create a similar menu quickly, then you will have to manually replicate it. In this article, we will show how to create a duplicate menu in WordPress with just one click.

Duplicate WordPress Menu

Why and When You Need a Duplicate Menu?

When you are trying a new theme, and your old theme had a perfectly configured menu, you have two options.

Change the original menu or quickly create a duplicate menu and make your changes there.

Duplicate menus can also be useful if you want to use conditional tags to show different menus to different users. For example showing a different menu to logged in users in WordPress.

Quickly Add Duplicate Menus in WordPress

First thing you need to do is install and activate the Duplicate Menu plugin. Upon activation, simply go to Appearance » Duplicate Menu to quickly duplicate a menu in WordPress.

Creating a duplicate menu in WordPress

You need to select the menu you want to copy, and then provide a name for the new copy. Click on Duplicate Menu button and you are done.

Now you can visit Appearance » Menus, and you can select your duplicate menu from the drop down menus.

Select menu

We hope this article helped you add a duplicate menu in WordPress with just one click. You may also want to checkout our guide on how to style WordPress navigation menus.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit How to Create a Duplicate Menu in WordPress with One Click on WPBeginner.