• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Create custom menus in WordPress

By Abhishek Ghosh March 30, 2011 5:45 am Updated on October 17, 2014

Create custom menus in WordPress

Advertisement

Creating custom menus is now possible in WordPress via drag and drop interface, make your own menus using a combination of external links, categories or pages in a few clicks.

It is necessary to add the line of code:

 

add_theme_support( 'menus' );

 

in your <span style="background: #E9EEF3;">functions.php</span> file if you do not use the default theme or a theme does not support Menus for WordPress.

Advertisement

---

 

Prerequisites

 

To have this new feature, you must have completed the upgrade to WordPress 3.0 (or higher).

We urge you as these features are awesome.

The menu navigation can be selected directly from the Appearance menu in your WordPress administration. With the new TwentyTen, you can design your navigation bars too.

The major problem is that most themes do not include this kind of default menus.

Therefore, we will see how to dispose of this feature of WordPress through this step by step tutorial.

 

Modify header.php

 

First, open the <span style="background: #E9EEF3;">header.php</span> of your theme or module via the WordPress editor, either using a text editor for Windows or Mac OS X  (for example, Coda).

We must now find a place to position our menu. This is the first difficulty of the tutorial. You must know what are the different elements of the source code.

By helping the Firebug extension for Mozilla Firefox, you should be able to identify between which tags you want to position your custom menu.

Then insert the following snippet:

&lt;? Php wp_nav_menu ($ args);?&gt;

As you can see, it is possible to define the arguments between the parentheses instead of $args .

Here is the list of allowed parameters extracted from the WordPress codex :

 

$id : ID of the menu;$slug : the permalink menu;$menu : menu name, useful if you create multiple;$container : The parent element of the menu, the default tag div is applied;$container_class : the class of the parent element;$container_id : ID of the parent element;$menu_class : class Menu;$format : format of the menu, we recommend starting with a ul list$fallback_cb : if the menu is not created in WordPress, you can add a command to overcome this. By default, pages are listed;$link_before : Text to display before the menu;$link_after : text to be displayed after the menu;$before : see the text before the link;$after : display text after the link;$echo : By default, the value is True ;

All these parameters are optional. So you can limit after default code that surround us here for a tag div to facilitate management styles:

 

&lt;div&gt;&lt;? Php wp_nav_menu ();?&gt;&lt;/ Div&gt;

Once your menu is positioned where you want, save the file.

You may will note the many available arguments allow customization very highly in terms of CSS … even if we could go even further.

 

Management of customized menu in WordPress

 

Under the administration WordPress, open the module and then click Appearance menu.

Indicate the first name of the menu. It is possible to create multiple, and if that is the case, you must provide the argument via menu .

Then click the Create button menu.

To the left you will notice the presence of 3 modules:

  • External links: very convenient to insert links to other websites;
  • Pages: To add pages to your WordPress menu;
  • Categories: WordPress to insert categories in your navigation bar;

 

You just have to check the items of your choice – module after module, then click Add on the menu.

To rearrange the menu, drag and drop the different elements in the knowledge that it is possible to create sub-menus. To do this, move the item to the right to create a nesting.

Remember to click the Save menu to save your changes.

To see the results, open your site in a new tab. Accordingly adjust your menu to suit your needs.

You can add a second menu by clicking the button more shaped, located adjacent to the newly created menu in WordPress administration.

This Article Has Been Shared 462 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Create custom menus in WordPress

  • Create mouse hover effect for button using CSS sprite

    You must have noticed buttons in various websites that change its appearance on mouse hover. Here is tutorial on how to create very easily.

  • Customize the logo of your WordPress login page : second method

    Want to customize the logo of WordPress admin login page? This is possible by inserting a few lines of code in the functions.php file of your theme. Finally, a website that is more professional and close to your brand.

  • Configure the robots.txt in WordPress properly for easy crawling

    We will discuss about the optimum settings of this robots.txt file for your Wordpress website.

  • Zoom effect of Images and Pictures with realistic shadow using CSS

    Zoom effect of Images along with realistic shadow effect can be created in Wordpress by using a CSS trick without jQuerry and thus less page loading time.

  • We Got Hacked and We Have Learned To Protect WordPress

    We got hacked is nothing new news, almost all regular visitors knows it. But we have learned many points which will help you to protect your WordPress Blog.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (22.1K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • The Cost of Doing Business as a Handyman July 1, 2022
  • Samsung Galaxy S22 Ultra: Long Term Review June 30, 2022
  • How to Make the Most of Your S Pen (S22 Ultra) June 29, 2022
  • Safe Chargers for Samsung Galaxy S22 Ultra June 27, 2022
  • How Telecoms Can Use The Cloud To Power Their 5G Network June 24, 2022

About This Article

Cite this article as: Abhishek Ghosh, "Create custom menus in WordPress," in The Customize Windows, March 30, 2011, July 1, 2022, https://thecustomizewindows.com/2011/03/create-custom-menus-in-wordpress/.

Source:The Customize Windows, JiMA.in

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Privacy Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2022 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy