How to Add Custom Navigation Menus in WordPress Themes

Custom Navigation Menus feature in WordPress 3.0 will make WordPress even more user friendly for beginners. This function let you organize your menu, create drop down menus, add new items to menu, and much more. In this article, we will show you how you can enable and install custom navigation menus in your themes.

The post How to Add Custom Navigation Menus in WordPress Themes appeared first on WPBeginner.

Do you want to add custom navigation menus in your WordPress theme? By default, many WordPress themes come with pre-defined menu locations and layouts. In this article, we will show you how to add more navigation menus in your WordPress theme.

Add Navigation Menu to Themes

When Do You Need this WordPress Navigation Menu tutorial?

Most WordPress themes come with at least one spot where you can display your site’s navigation links in a menu.

You can manage menu items from an easy to use interface inside your WordPress admin area.

If you’re just looking to add navigation menus on your website, then follow our beginner’s guide on how to add a navigation menu in WordPress.

This tutorial is geared towards DIY users who are building a custom WordPress theme or someone who needs to add additional menu locations to an existing WordPress theme.

Having said that, let’s take a look at how to add custom WordPress navigation menus in your theme.

Creating Custom Navigation Menus in WordPress Themes

Navigation menus are a feature of WordPress themes. Each theme can define their own menu locations and menu support.

To add a custom navigation menu, the first thing you need to do is 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' );

You can now go to Appearance » Menus page in your WordPress admin and try to create or edit a new menu. You will see ‘My Custom Menu’ as theme location option.

Custom menu as theme location

If you want to add more than one new navigation menu location, then you would need to use a code like this:

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Once you have added the menu location, go ahead and add some menu items in the WordPress admin by following our tutorial on how to add navigation menus for beginners.

This will allow us to move on to the next step which is displaying the menu in your theme.

Displaying Custom Navigation Menus in WordPress Themes

Next, we need to display the new navigation menu in your WordPress theme. The most common place where navigation menus are usually placed is in the header section of a website just after the site title or logo.

However, you can add your navigation menu anywhere that you want.

You will need to add this code in your theme’s template file where you want to display your menu.


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

The theme location is the name that we selected in the previous step.

The container class is the CSS class that will be added to your navigation menu. Your menu will appear as a plain bulleted list in your website.

Custom menu displayed as plain list

You can use the CSS class .custom_menu_class to style your menus. Here is a sample CSS to help you get started:

div.custom-menu-class ul {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}
div.custom-menu-class li {
    padding: 20px;
    display: inline;
}

If you need further assistance with the CSS and menu layouts, then we recommend using one of these WordPress starter themes to build out your custom themes.

Creating Mobile-Friendly Responsive Menus in WordPress

With the increase in usage of mobile devices, you may want to make your menus mobile-friendly by adding one of the many popular effects.

Responsive menu plugin demo

You can add a slide out effect (above), dropdown effect, and even a toggle effect for mobile menus.

We have a detailed step by step guide on how to make mobile-ready responsive WordPress menus.

Do More With WordPress Navigation Menus

Navigation menus are a powerful web design tool. They allow you to point users to the most important sections of your website.

WordPress allows you to do a lot more than just displaying links in your menu. Try these useful tutorials to extend the functionality of navigation menus on your WordPress site.

That’s all, we hope this ultimate guide helped you learn how to add a navigation menu in WordPress. You may also want to see our list of 25 most useful WordPress widgets for your site.

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 Custom Navigation Menus in WordPress Themes 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.