A Step by Step Guide to WordPress Menu

Your menu should be in the order that you added them. If this isn’t preferential, you can rearrange them by drag and dropping the items where you want them to be.

These types of menus are those that utilize parent and child items. You can have multiple drop downs, as you can have multiple parent items. The way this works is that pages are set to parent as default. You can manually set a page to child by providing it with a parent page. Each parent can have multiple child pages.

These menus provide an organizational element to your menus. All your users have to do is hover over the parent item, and they’ll see various child pages that they can click on. A parent item will typically have an arrow pointed down beside their text.

In order to create a drop down menu, you have to establish which item is a parent and which is a child, which is a common theme through the IT field. Thankfully, the current items are all parent items according to their default setting. This makes everything a whole lot easier. In order to create a child item, just drag and drop the child page under the parent page you want it to fall under. Once you’ve dropped it under, drag it slightly to the right in order to establish it as a child item.

You can even add sub parents. This means turning a child item into a sub parent by dragging another item under one of your child items, and then moving it slightly to the right.

In order to display your various categories under your custom menus, expand the “Categories” tab. All you have to do is select the categories you want and add them to the menu the same way you did with your pages in the previous steps.

Category items act the same way as regular menu items. You can rearrange them and create parent and child items the same way as you did with your pages.

If you want to add a custom link to one of your posts, or even to a social media page, all you have to do is expand the “Custom Links” tab.

Type in the link you wish to use, and provide the link’s text. The text is what will be displayed in the menu. When inserting the link, ensure that you use http:// or something similar, otherwise the link will be broken.

This text element acts the same way as your categories and pages that have already been added to the menus.

In regards to editing or removing items from a menu, all you have to do is click the down arrow displayed beside the item. It doesn’t matter what label it holds (Ex. Parent, Child, Etc.).

Once you’ve expanded this menu, you can edit the item’s name and attribute if you so choose.

“Navigation Label” simply means how people see it in your menu. Your original name is also saved so don’t worry about wanting to change back and unfortunately forgetting the original name.

Putting aside the location, theme menus, you can also display a navigation menu under a widget. This is a significant feature because it allows you to place a navigation menu in virtually anywhere.

In order to add the custom menu widget, all you have to do is go to “Appearance”. Next, click on “Widgets”.

Move “Custom Menu” to one of your sidebar widgets. Next, put a title on the widget and select a custom menu. Your final step for this task is to click “Save”. All done!

Unlike typical drop down menus, a mega menu is one that allows for multiple columns of drop down items. You can even add images and video into this menu.

Who Should Add a Mega Menu?

A mega menu is especially helpful for people who have a lot of content. An example would be an online business. Perhaps they have to sell dozens of products, all different in nature. Perhaps they all don’t fall under the same category, in fact, it make take twenty six categories! If this is the case, a mega menu is required.

Getting Started

First order of business. You need to install WordPress’ “Max Mega Menu” plugin. It’s free and rated as one of the best Mega Menu plugins. All you need to do to install the plugin is visit “Plugins” under your admin panel. Next, find “Add New”. Next, search up the plugin, and download and install it. It should automatically activate. If it doesn’t, visit your installed plugins page and activate it manually by selecting “Activate”.

Once you’ve installed and activated the plugin, it will show up on your admin menu. The sidebar to the left. You may need to scroll down.

Click this option, and it’ll take you to your Mega Menu settings. The settings should already be set up in order to operate on your website, however, you’ll need to change the colour scheme in order to match your website.

Once you’ve configured your mega menu colour settings, visit “Appearance” under your admin menu, and select “Menu”.

Your next step is to enable your mega menu by selecting “Enable”. You will see a Mega Menu button on a menu tab. By clicking this button, a pop up will be displayed. Add any widget you want to your mega menu.

If you’d like to edit a widget before placing it on your mega menu hit the wrench button beside the widget being currently displayed.

Don’t forget to save your work by clicking “Save”. Once you’ve saved, you can visit your website to view your brand new Mega Menu.

Make sure you update the plugin when updates are available for bug fixes and perhaps even some fun new updates.

This method is easy and requires no coding. There is always a coding option for responsive mobile menus, but for now we’ll be covering the non coding method.

The menu we will be creating today is called a hamburger menu. This means it slides out from either the left or right on a mobile screen.

Getting Started

Your first step on the road to creating a responsive mobile menu is going to be to install the “Responsive Menu” plugin. To do this, follow the same steps covered under the “Mega Menu” guide we covered previously.

Once the plugin is activated, it will be listed under your admin menu as “Responsive Menu”. Click it to expand its settings page.

Your going to need to ensure the screen width is set correctly. The default should be 800 pixels, or “px” for short. This default value should fit most websites.

Once you’ve set the width correctly, select the menu you’d like to act as a responsive menu. If you don’t have a configured menu just yet, visit the top of this article to get started.

Click on the “Update Options” button in order to save your settings. Once this is completed, your responsive menu is ready to go.

You can explore various customizations in the plugins settings page.

This method is easy and requires no coding. There is always a coding option for responsive drop down mobile menus, but for now we’ll be covering the non coding method.

Getting Started

Your first step is to install the “Responsive Select Menu” plugin. If you’re unsure how to do so, check out the instructions under the “Mega Menu” plugin.

Once the plugin is activated, go to your “Appearance” tab under your admin panel. Next, select “Responsive Select” in order to configure the settings that go along with the plugin.

Your first and only necessary task before updating width is to activate your theme locations by clicking “Activate All Theme Locations”. You can also selectively activate theme locations for more control over your menus.

Click “Save” to save all of your changes. Once everything is prepped, visit your site in order to establish whether or not your menu’s pixels need to be altered to fit the site.

Your mobile drop down menu has been completed.

To put it in simple terms, sticky menus are menus that you always see. Usually, regular menus float off the screen as the viewer scrolls down, whether the menu be a sidebar or a header menu. Follow the below steps to easily implement a sticky menu into your site.

Installing the Plugin

Your first step is to install the Sticky Menu plugin called “Sticky Menu (or Anything!) on Scroll”. If you’re unsure in regards to how to do this, check out the instructions under “Mega Menu”.

Configuration

Once everything is installed and activated and you have your menus setup, you’ll need to click on your Sticky Menu plugin which can be found under your admin menu.

Once on the settings page, you’ll need to enter the CSS ID of the nav menu you want to label as sticky. To do this, use your browser’s inspection tool.

As an example, if my navigation menu is labeled “sticky-navigation”, I need to find that phrase. You can then enter into the plugin’s CSS settings “#sticky-navigation”.

Your next steps are to set up pixel dimensions, which is fairly well explained within the plugin. Make sure to click “Check for Admin Bar” in order to save space when logged in.

You can also explore the mobile settings for this plugin. They’ll allow the menu to be unsticked when a mobile device is being used to browse your webpage.

Make sure you click “Save” when ready.

Your sticky menu is now ready for use. Check it out!

WordPress menu_add_page

To put it simplistically, the add_menu_page and the add_submenu_page functions are utilized in order to implement menu and submenu elements to your WordPress dashboard. WordPress in itself has detailed analysis pages for this very snippet.

WordPress wp_nav_menu

Allows you to add custom navigation menus into WordPress themes. WordPress in itself has detailed analysis pages for this very snippet.

Menu icons are little images that appear beside every item amongst your custom menus. Setting up these icons is easy and you don’t need to use a plugin.

Step 1: Upload all of your images to your media section (all your icons). Do this by going to your administrative panel, and selecting “Media”. Next, click “Add New”.

It is recommended that you keep a third party copy of all the images URLs in order to keep them organized and to easily recognize what is what.

Step 2: Go back to your administrative panel, click on “Appearance”. Next, click on “Menus”. In this newly expanded screen, select the checkbox “Display CSS Classes in Menu Items” for the menus you want to add icons to.

Step 3: Click on any item within the menu that you want to add an icon onto. Enter a name into “CSS Classes”. This has to be the same name you enter into a CSS program in the next few steps.

Step 4: You’re going to need to go to your administrative panel, and click on “Appearance”. Once the appearance menu opens up, click on “Editor”. When this opens, find the style sheet, the theme’s CSS file. All design components should be mentioned here.

In this file, you’ll need to copy and paste the following code.

.homepage {
background-image: url(‘http://www.example.com/wp-content/uploads/2014/12/home.png’);
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

You are going to have to copy and paste this in seven times, making changes each time as well.

Every time you paste this into the file, you’ll need to change “homepage” to your previously typed in “CSS Classes” in step 3. You’ll also have to replace the URL with the URL corresponding to the item that you kept in a third party notepad or other application.

Congratulations, your icons have been successfully implemented.

The default option for opening menu items is to use the tab that’s already open. But what if you need both tabs for whatever task you may be completing? Here’s how.

Step 1: Go to your administrative panel, click “Appearance”, then click “Menu”. Next, click “Screen Options”.

Step 2: On the “Screen Options” page, check of “Link Target”. Close this settings page.

Step 3: Once again expand the menu options for an item by clicking the small downwards facing arrow. Enable “Open link in a new tab” option. Click “Save Menu”

Your menu item will now open up in a new tab.

WordPress Menu Shortcode

WordPress itself has put together some wonderful in depth tutorials to show the benefits behind their menu shortcodes. Some of those benefits being the ability to give a menu id and even a class.