How to Customize and Add Custom menu in WordPress Theme

Nur . Posted in How-To 1062 Views

As a WordPress theme developer, You must know how to add and configure menus in your theme. If your current theme does not natively support menus, don’t be panic, In WordPress 3.0, you’ll gain build in feature in admin screen under your Appearance menu called MenusNavigation Menu is a theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for introducing customised navigation menus into theme.

Register a menu for a theme


In order to incorporate menu support into your theme, you need to add a few code segments to your theme files.

  • register_nav_menu(): Registers a single theme location.
  • register_nav_menus(): An array of locations to register.

Open your function.php file, to register a single menu called First Menu, and add following code in it:

add_action( 'init', 'register_my_menu' );
function register_my_menus() {
  register_nav_menus(
    array('first-menu' => __( 'First Menu' ) )
  );
}

first-menu is the slug which will use to identify the menu in code. First Menu is the label which use to identify the menu in the admin.

Building off that example, we’ll create multiple menus, which is not much different than registering a single menu.

add_action( 'init', 'register_my_menus' ); 
function register_my_menus() {

register_nav_menus( array( ‘first-menu’ => __( ‘First Menu’ ), ‘second-menu’ => __( ‘Second Menu’ ))
);
}

Turn on nav menu options:


There are two option to ensure that the theme turns these menu options on, One is by calling wp_nav_menu() within a theme template file and second by using Navigation Menu widget .

Adding locations to your Theme files

After registering a menus for your theme you can call them in  header.php file, If you want to display menus in an other place of you theme, simply call a nav menu as bellow:

<?php wp_nav_menu(); ?>

If you want more control over you themes menu, call it this way.

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

You’re allowed even more control. wp_nav_menu() has several parameters you can use when displaying a menu.

  • theme_location: The menu to call that is associated with the specific theme location.
  • menu: Call a specific menu ID, slug, or name.
  • container: The element that wraps around the list. The default is div but can be changed to nav if you’ve moved on to HTML 5.
  • container_class: The CSS class of the container.
  • menu_class: The CSS class given to the unordered list. This defaults to menu.
  • fallback_cb: A function to call in the event that no menu items have been given. By default, wp_list_pages() will be called.
  • before: Text that is displayed before the link text but within the link.
  • after: Text that is displayed after the link text but within the link.
  • link_before: Text that is displayed before the link.
  • link_after: Text that is displayed after the link.
  • depth: How many levels the menu should display, which is useful for things like drop-down menus. This is set to 0 (any level) by default.
  • walker: Allows a custom walker PHP class to be defined to create the menu.
  • echo: Whether to display the menu or return it for use in PHP. This defaults to true and displays the menu.

[Reference: Goodbye, headaches. Hello, menus!] An excellent tutorial about adding and customizing Navigation Menu by Justin Tadlockwhich has more detail around the options available.

For additional Parameters of the WP Menu refer to the WordPress Codex

Using the Navigation Menu Widget

All you need widget-ready theme like The Corporation themeHeadway Themes, And themes from Themeforest. They will give you a simple menu widget that allow to select any of your custom menus to display.
WordPress theme framework like Genesis and iTheme Builder, They provide detail guide through out the process. Genesis even has an option to do smooth drop down menus with Superfish built-in feature.

Styling nav menus

Although its very easy to give style to your WordPress blog menu and there are few tips you can read the following link about How to style up theme nav menus:

Appearance Menus Screen
Goodbye, headaches. Hello, menus!
How to Style WordPress Navigation Menus
How to add images inside WordPress 3.0 custom menu
Customizing the new WordPress 3.0 Custom Menus Adding Different Icons to Each Link;

WordPress Plugins to Customize Navigation Menus


Custom Menu Images

Adds an optional image field to all menu items. Images can be uploaded or linked. The plugin then generates basic CSS so you can work with images.

It can be used to set thumbnails and make mega-dropdowns, or to add a custom icon to each menu item.

Download

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.

Detail

Customizable WordPress Restaurant Menu

This WordPress plugin allows administrators to quickly create menus, sub-menus, and add food items, descriptions, prices and special prices to these items. WordPress Restaurant Menu is perfect for small to large restaurant websites that want to display a menu to their website visitors.

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 .

You can add multiple Mega Menus to your WordPress pages and still be able to style each menu differently.

Detail

UberMenu – WordPress Mega Menu Plugin

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

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 .

The content can be organized into simple “drop-up” lists or in 1, 2 or 3 columns based on the 960 grid system.
Detail

JQuery Vertical Mega Menu Widget


Creates a widget, which allows you to add flyout vertical mega menus from any standard WordPress custom menu using jQuery. Can handle multiple vertical mega menus on each page and offers 3 animation effects – show/hide, fade In or slide out. Widget also gives the option of selecting left or right for the flyout menu depending on where you side column is. For best results use 3 levels for the custom menu.
Detail

JQuery Slick Menu Widget


Creates a widget, which adds a sticky, sliding menu from any standard WordPress custom menu using jQuery. Can handle multiple slick menus on each page and the location of each menu can be easily set from the widget control panel using a combination of the “location” option and the “offset”. The plugin also includes shortcodes, which allow you to add external text links to activate the sliding menu.
Detail

Floating Menu

Creates a widget, which adds a floating, sticky, drop down menu from any standard WordPress custom menu using jQuery. Can handle multiple floating menus on each page and the location of each menu tab can be easily set from the widget control panel. Menu can also be activated either by ‘hover’ or ‘click’.
Detail

Tags:

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