Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a customizable menu in Wordpress

In this article we will see how to create customizable menu with the new version of Wordpress.

WordPress is a web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time.

The core software is built by hundreds of community volunteers, and when you’re ready for more there are thousands of plugins and themes available to transform your site into almost anything you can imagine. Over 60 million people have chosen WordPress to power the place on the web they call “home”.

Wordpress

Figure 1: Wordpress

Menus can contain sub-menus can display pages, categories or post links to another website, or even all of it together. You can do all this and more with the WordPress editor menu.

After version 3.0, creating menus in WordPress has become very important because managers are used to reproduce the menu. On the menu, you can create links, pages and integrate file.

In previous versions management menu items was done through many pages will your site possessed. From now we gain an important feature to create custom menus regardless of the amount and content of pages created.

Importantly, for use all features of menus in WordPress, your theme should be compatible with them.

Some plugins need to be configured. Would not it be interesting to suggest the user to change the value one or another variable in PHP file of the plugin to configure it as desired. WordPress allows administrative pages are created and through them we can provide the user with an interface that allows you to configure and interact with the plugin.

WordPress menus are created "on the fly", ie, they are recreated each time any of the pages of the administration. Menus are dynamic and allow themselves to be modified or added new items and subitems.

Enabling and registering the menu

In functions.php of your theme, add the code in Listing 1:

Listing 1: Adding functions

[cce lang="php"]
if ( function_exists( ‘register_nav_menu’ ) ) {
register_nav_menu( ‘my_menu’, ‘This is my first menu’ );
register_nav_menu( ‘second_menu’, ‘This is my second menu’ );
}
[/cce]

Firstly, we verify the function register_nav_menu. Inside the function, we have two parameters, which are: menu name (preferably without spaces and lowercase) and the menu description. Both are required in this function.

This function now enables support for menus.

Returning the menu

Add the following code where you want the return the menu:

Listing 2: Returning Menu

[cce lang="php"]
wp_nav_menu( array(
‘menu’ => ‘my_menu’,
‘theme_location’ => ‘my_menu’,
‘container’ => ‘div’,
‘container_class’ => ‘class_of_container’,
‘container_id’ => ‘id_of_container’,
‘menu_class’ => ‘class_of_menu’,
‘echo’ => true,
‘menu_id’ => ‘id_of_menu’,
‘before’ => ”,
‘after’ => ”,
‘link_before’ => ”,
‘link_after’ => ”,
‘depth’ => 0,
‘walker’ => ”,
) );
[/cce]

As noted, the function wp_nav_menu receives some parameters, for the avoidance of doubt, better explain below.

  • menu: The menu name you want to return (value determined in function register_menu)
  • theme_location: Where will be located the menu (value determined on the function register_menu)
  • container: If any tag will involve menu list
  • container_class: Classes of container
  • container_id: The ID of the container
  • menu_class: Classes of menu list
  • menu_id: The ID of the menu list
  • echo: Used to return the menu, since its value is false, the menu will not be returned or visible.
  • before: If any item before you enter the menu
  • after: If an item then enter the menu
  • link_before: If any element comes before the link
  • link_after: If any element comes after the menu
  • depth: How many levels of hierarchy should be included
  • walker: Object to the customization menu

Activating Description

To complete the explanation, the WordPress Menus contains an option for menus description. It is a better way to explore the content and also explain a little more the parameter walker, which was a bit difficult to understand.

First, activate the description like this: Open the menu section in the admin panel and go to Screen Options and enable the Description.

Activating description

Figure 2: Activating description

We will customize the menu to get the description information, in functions.php add the code in Listing 3:

Listing 3: Customizing menu

[cce lang="php"]
/* Code by: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output */
class description_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 = ‘ class=”‘. esc_attr( $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 ) .’”‘ : ”;
$prepend = ‘‘;
$append = ‘‘;
$description = ! empty( $item->description ) ? ‘
‘.esc_attr( $item->description ).’
‘ : ”; // Here is where the information is the description
if($depth != 0)
{
$description = $append = $prepend = “”;
}
$item_output = $args->before;
$item_output .= ‘‘;
$item_output .= $args->link_before .$prepend.apply_filters( ‘the_title’, $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after; // here where the description is being returned
$item_output .= ‘‘;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
[/cce]

The above code was created a class which returns the menu item <li >. Is commented in the code where you will find the codes description. It is necessary to understand a little bit of PHP to change this code and further customize your menu.

To return this class, we will use the walker menu, change the value, like this:

 [cce lang="php"]‘walker’ => new description_walker() [/cce]

You can specify the value of the description in the same place where you changed the menu information.

In this article we saw how to create menus and edit your own wordpress admin panel with pages and links. I hope you liked and until the next article.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login