Custom-Navigation-Menus-WordPress-Themes
Adding Custom Navigation Menus in WordPress Themes

Adding Custom Navigation Menus in WordPress Themes

Nur . Posted in How-To, Plugins 4947 Views

The navigation bar is a very important part of  any website to attract the visitors. Some WordPress themes have very simple navigation bar, so there is a need to make to according to customer requirements which look good with the website design. Customization of  ready made  themes become very difficult if they have used function to control the Navigation bar. But Some themes like U-Design WordPress Theme with complicated structure give you very simple way to customize the whole theme design.

As well you can control the design with WordPress plugins and can design your own HTML and CSS based navigation bar, for that giving you some practices and suggestions along with useful references.

If you are using Thesis Theme, than you must watch this Video tutorial, in which they explained how to set up menu, and how to create a new design and control new menus.


Navigation Menu was introduced in WordPress Version 3.0 and in a new WordPress Version 3.4  you can  utilize these great features to customise the navigation menus into any theme. All you have to add few code segments in your theme. Following are the available function references to Register Navigation Menu:

 And Follow are the Functions to Show Navigation Menu:

How to Add New Register Menus

First of all add add following code segment into Theme’s function.php file to register a name of Menu:

function register_my_menus() {
  register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ) )
  );
}
add_action( 'init', 'register_my_menus' );

And  to appear two menu options add following code segment , header menu and extra menu –

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' ); [Source]

This means that you can create multiple menues and can add existing Catergories or  pages to the created Menu through Appearrance >> Menu Option, as well you can add custom links to the created menu with simple drag and drop option under Menu settings:

You can create multiple menus, add existing categories or pages to the menu, and you can add custom links to menu as well. You can organize the menus and create drop-down menus with a simple drag-and-drop feature.

How to Display Menus on Theme

After creating custom menu, now you want to add created menu into your theme. First you have to decide where you want to display your menu, normally n a header area (above or bellow the logo). So add the following code in the header.php file where you want to display it, but it not limited to header file, you can add where you want to display your menu:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

or

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

or

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );

Just make sure that the theme_location points to the name  of  menu in the functions.php file.  In the 2nd example (Source), the main function is  wp_nav_menu, sort _column is used to order you pick in the options panel and container_class is the CSS style for created menu.

Design a Navigation Bar

Its all depends on your design, To understand the basic structure about illustration and design by using HTML and CSS in the different ways follow the following links:

WordPress navigation bar 1119
Top 5 WordPress navigation menu tutorials
How to make categories drop down menu
Simple navigation bar with css and xhtml
Goodbye headaches hello menus
Sliding doors WordPress navigation css technique
Best practices to design a perfect html navigation bar
Creating two tiered conditional navigation in WordPress
Simple glossy navigation bar design in photoshop

I have design the U-Design WordPress theme, if you want to add navigation bar in a header file,  create a style for navigation bar in style.css file and there is a  file custom_style.php in  a folder “u-design\styles\custom\”. Open this file and change the #navigation-menu  setting according to your own requirements.

WordPress Menu Plugins For Better Navigation


WordPress Plugins  provide a new and improved functionality to you Website, and For Navigation design there are lots of useful plugins which you can use in different situations. There are mainly two ways to use WordPress Plugins for Navigation bar, first to  design and improve the Front end navigation and second, how to manage  the Navigation bar.

WordPress Menu Plugin to improve Front end navigation

You can create and customize your theme by creating primary menu anywhere in your theme like in header or footer. As well if you are creating Content Management System style website, these WordPress plugins help a lot customize the sidebar.

UberMenu – WordPress Mega Menu Plugin

UberMenu is a user-friendly, highly customizable, responsive Mega Menu WordPress plugin. It works out of the box with the WordPress 3 Menu System, making it simple to get started but powerful enough to create highly customized and creative mega menu configurations.

Menu Management Enhancer for WordPress

Live preview | Detail

CSS3 Mega Menu WordPress Plugin

This CSS3 Mega Menu WordPress Plugin will help you to create easily your own “Mega Menus” with WordPress. It doesn’t use any javascript and relies only on CSS .

Adding a menu to your WordPress site can be done by either using the built-in functions directly in your theme files or by using the Mega Menu Widget and adding them to the preedefined widgetized areas. This item comes with 9 color variants and 2 drop down themes (light and dark) with a documentation to help you to start quickly.

Live preview | Detail

WP Sticky Menu Plugin

Sticky Menu Plugin has it’s own option panel from where you can select your styles, the alignment of the menu (Top or Bottom), the width of the menu (980px or Full Width). You can also select the animation effect for the sliding out and in of the menu.

Live preview | Detail

PBK Mega Menu for WordPress

PBK Mega Menu Plugin for WordPress is your easy way to add a functional and customizable Mega Menu to your WordPress website. Adding menu items and content is just like adding posts or pages… If you know how to use WordPress, then you already know how to use the Mega Menu plugin.

Live preview | Detail

CSS3 Sticky Footer Menu For WordPress

This CSS3 Sticky Footer Menu For WordPress will help you to create easily your own Sticky Footer with WordPress. It doesn’t use any javascript and relies only on CSS. Wordpress shortcodes and CSS classes allow you to create lists, paragraphs with (or without) images or make your menu items stick to the left or the right side.

Live preview | Detail

Fading Menu with Notification Bar and Social Icons

Fading Menu with notification Bar is a WordPress Plugin that will allow you to add your navigational menu (main menu or custom menu defined by you) along with notification bar at the top of your browser. Simply scroll down your browser a bit to see it in live action!

Live preview | Detail

niceMenu – WordPress Plugin

You can navigate on multiple levels very easy! Just a few clicks & the menu is installed on your wordpress website. It’s easy to position anywhere, as a widget sidebar. You can put custom links, website pages & categories.

Live preview | Detail

Sticklr WP – Sticky Side Panel WordPress Plugin

Stickr WP, a sticky side panel menu WordPress plugin. Inspired by Envato site-switcher, after released as CSS3 +jQuery, due to popular demand I decided to create this WordPress plugin version. The features are similar with jQuery version, only WordPress version has an intuitively easy administration panel, so you don’t have to know the coding behind it.

Live preview | Detail

Advanced Menu Widget

This plugin adds enhanced “Navigation Menu” widget. It offers many options which could be set to customize the output of the custom menu through the widget.

Features include:

  • Custom hierarchy – “Only related sub-items” or “Only strictly related sub-items”.
  • Starting depth and maximum level to display + flat display.
  • Display all menu items starting with the selected one.
  • Display only direct path to current element or only children of selected item (option to include the parent item).
  • Custom class for a widget block.
  • And almost all the parameters for the wp_nav_menu function.

Detail

SLMenuWidget

SLMenuWidget is a plug-in for WordPress. It provides an easy to use submenu widget that can be used for WordPress themes which doesn’t deal with sub pages. It renders nothing if the current page does not have sub pages. If you have any questions or if you need more information, please visit www.steffen-liersch.de/wordpress

Detail

Dropdown Menu Widget

Dropdown Menu widget adds a beautiful, CSS only dropdown menu, listing pages, categories of your blog. You can also turn your wordpress navigation menu into a beatiful dropdown menu using this plugin. It allows you to chose vertical or horizontal layout. It supports multiple instances. You can select a theme for your widget from the Dropdown Menu Settings page or you can CREATE YOUR OWN THEME WITHIN SAME PLUGIN!! You can also customize your dropdown menu using CSS. If you want a custom dropdown theme you can request one. Please visit plugin site for more information.

Detail

PixoPoint Menu Plugin

Adds an SEO friendly, accessible regular or dropdown menu to your WordPress blog. Visit the PixoPoint Menu Plugin page for more information about the plugin.

Features

  • Control content will be displayed in the menu
  • Easy to use interface for modifying the design
  • Animation drodpown menus
  • Up to two menus
  • Plus much more

Detail 

AllWebMenus WordPress Menu

The AllWebMenus WordPress Menu add-in & plugin combination is designed to retrieve information from your blog (such as posts, pages, etc.) and import it into the AllWebMenus application to create stylish, feature-rich navigation menus, and not only! Apart from creating menu items derived from your blog’s structure, fully customize your menus adding your own non-wordpress menu items with external or internal links, html-rich content, colors, borders, effects, designs of your choice and many more!

Detail

CMS Navigation

Our new plugin, WPML, includes the functionality of CMS Navigation and is recommended for new designs. It features much cleaner and simpler HTML and customization via the admin screen. Additionally, we recommend you checkout our new CMS enabling plugins Types andViews.

With Types and Fields, you can achieve the functionality of this plugin yourself and customize it in whatever way you like.

Detail

Multi-level Navigation Plugin

Adds an SEO friendly, accessible dropdown/flyout/slider menu to your WordPress blog. Visit the Multi-level Navigation Plugin page for more information about the plugin. Paid premium support for this plugin is available via the PixoPoint Premium Support service.

Detail 

Navigation Menu Widget

This is an advance widget that gives you total control over the output of your menus. Support multiwidget, resizeable page featured image, easy to customize and full features. Displays a list of menu as links. This widget is based on the WordPress function: wp_nav_menu()

Detail

Mashable Menu for WordPress

This is a WordPress version of Mashable Menu – Pure css (Redesigned) .

Features:

  • you can add 15 category and 7 subcategory !
  • Easy To Setup & Customize
  • CSS3 Effects;
  • JS jQuery

Detail

WordPress Menu Plugin for WordPress Menu management


Advanced Menu Manager System

Main feature about this application is the fact of using the nested set model hierarchical data structure instead of the old adjancy list. Nested set Modal is a much more robust and faster way of storing and retrieving hierarchical data on a database that strugles with relational calculus and relational algebra such as MySQL

Live preview | Detail

Menu Management Enhancer for WordPress

The WordPress 3 Menu Management System is excellent, but it can be a bit cumbersome if you’re managing many menu items. The Menu Management Enhancer for WordPress aims to improve the menu management user experience.

  • Manage large numbers of menu items with ease
  • Expand and collapse menu item trees
  • Quickly jump to any top level menu item
  • Enhanced drag & drop jump-to-item functionality
  • View menu item IDs
  • Child and descendant menu item counts at a glance

Live preview | Detail

Easy Menu Manager

Easy Menu Manager is an AJAX /PHP powered menu management system. You can add, edit, delete, and reorder menu items easily using this application.

Live preview | Detail

Gecka Submenu

Submenu enhances the WordPress 3.x navigation system. When you have a website based on WordPress with a lot of pages, but you need a custom menu, it can be tedious to have to add a menu entry for each page created. Submenu just does it automatically.

Detail

Admin Menu Tree Page View

Adds a CMS-like tree overview of all your pages and custom posts to WordPress – much like the view often found in a page-focused CMS. Within this tree you can edit pages, view pages, add pages, search pages, and drag and drop pages to rearrange the order.

CMS Tree Page View is a good alternative to plugins such as pageMash, WordPress Page Tree and My Page Order.

Detail

Admin Menu Tree Page View

This WordPress plugin adds all your pages to the admin menu, so all your pages will always be available within just one click, no matter where you are in the admin area. You can also add pages directly in the tree and you can quickly find your pages by using the search box.

Detail

WordPress Page Tree

Do you have a WordPress site with lots of pages in a hierarchical structure? Are you trying to use WordPress like a “real” CMS? Then this plugin is for you!

Page Tree gives you a much-needed overview of your pages in the admininstration panel using a common expand/collapse menu, which lets you navigate your page structure like a folder tree in Windows Explorer.

Detail

My Page Order

My Page Order allows you to set the order of pages through a drag and drop interface. The default method of setting the order page by page is extremely clumsy, especially with a large number of pages. The plugin also installs a replacement widget that exposes all the options of the wp_list_pages template function.

Detail

Obox Mobile – WordPress Mobile Plugin

Nur

I am a Wordpress, Website Developer and Designer, creator @ WP Arena, Provide Free WordPress consultation and can help to install WordPress in a secure way to small businesses and bloggers.

Free & Professional WordPress Security Service Free & Professional WordPress Security Service

We Love WordPress. WordPress Arena is a place for WordPress Developers and Designers, providing Tips, tricks, tools and resources to build a website or blog on WordPress. We also present The WordPress Showcase for all kind of WordPress Powered Websites.


Copyright © 2014 WP Arena All Rights Reserved

Divi WordPress Theme