Edublogs themes support custom menus which means you can customize your navigation menu in the header area of your blog or add a custom menu widget to your sidebar.
This allows you to easily:
- Re-arrange, add, and remove items from the main navigation area at the top of your blog
- Change the order of pages
- Create nested sub-menus of links (sometimes known as nested pages links or ‘drop down’ menus)
- Publish posts to different pages on your blog using post categories. This is handy if you want students to be able to click on a link in the top navigation for all posts published for their subject.
- Add custom links to your main navigation area
- Create a custom menu for your sidebar
Custom menus allow you to fully control the links that appear in your navigation menu- you can even add links to website and pages not on your blog!
Below’s an example of a custom menu with sub-menu of links and custom links:
Most themes only support one custom menu which is displayed in the header area of your blog (your main navigation area) however some themes support multiple custom menus and can appear in different places on your blog. For example, the theme Responsive allows you to add custom menus to the top right section of your blog, the main navigation area, a sub header area (underneath your main navigation) and to your footer area.
Below is an example of the custom menu options on the theme Responsive:
You can also add custom menus to any sidebar using the Custom Menu widget (Appearance > Widgets).
Custom Menu Video Tutorial
1. Go to Appearance > Menus
2. Give your menu a name – ‘Main’ will work great!
3. Click on the ‘Create Menu‘
4. Create a custom link for home by adding your blog URL, the name Home and click Add To Menu.
- When readers click on the Home link they will be taken to your front page.
- For example the blog URL of this blog is http://help.edublogs.org/
- You can use custom links to link to any website — which is really handy!
5. Select the pages you want to add to your menu then click Add To Menu.
- Click on View All to see all published pages.
6. Select your categories you want to add to your menu then click Add to Menu.
- You must have publish a post that has been assigned the categories you want to use before you will see the categories listed on the menu page.
- Refer to Using categories to organize multiple classes or subjects on your blog to learn more about using categories with custom menus.
7. Now drag/drop the menu items to change their order in your menu.
Any menu item that is indented will appear as a nested page under tab.
Here’s what my menu now looks like:
8. Once you’ve finished changing the order click Save Menu.
9. Now to display your new top navigation on your blog you just need to select the name of your custom menu from under the Primary Navigation drop down menu (in this example our custom menu was named Main) and then click Save.
10. Visit your blog and see your new menu!
Creating New Menus
You can create as many custom menus as you want and switch between which custom menu you use for your top navigation using the drop down menu on the Theme Locations.
You create a new menu by clicking on the + tab.
Switching to your new menu is as simple as selecting it from the drop down menu on Theme Locations.
Creating Static Level Tabs
You can create static level tabs using a custom link if you just want a link name that doesn’t go to a page that exists.
For example, if you click on About in the top menu of The Edublogger you’ll see it is a static level tab used just as a placeholder for page links we’ve added underneath it.
Automatically adding new pages
New pages aren’t automatically added to your custom menu when they are published. If you would like to add new pages to your menu you need to either manually add the new pages (via Appearance > Menu) or select the option to ‘Automatically add new top-level pages’.
The ‘Automatically add new top-level pages’ option appears after you’ve created your first menu. If you select this option than any new parent page is automatically added to your custom menu.
Editing Menu Items
Besides changing the order of items in your menu, you can also custom the text and other details of any item you’ve added to your menu.
Editing a menu item is as simple as:
1. Click on the down arrow to the right of the menu item.
2. Once expanded, you just make the changes and then click on Save Menu.
You can modify the following:
- Navigation label – This allows you to override the default name of the menu item to replace it with any name you want to give it. In our example we’ve changed the name of the item from About to ‘About The Edublogger’
- Title Attributes – Used to add custom hover text. You might use this option to improve usability for impaired visitors using assisted devices.
- Remove – Used to remove the item completely from the custom menu.
- Cancel – Used to cancel any changes you have made.
Below is an example of title attribute being used:
You can also enable advanced menu properties in screen options. All you need to do is click on Screen Options at the top of the page and select the items you want to show on screen.
The most common advanced menu property you would use is Link Target.
Link Target is used to control if your menu links open in a new tab (or window) or the same window when a link is clicked. By default, links open in the same window.
Editing Your Custom Menus
You can edit your custom menu at any time by going to Appearance > Menu.
Once you’ve made the changes you want just click Save Menu to save your changes.
Custom Menu Widgets
You can create as many menus as you want and add them to your blog as a widget in a sidebar.
Create the menu using the steps above and then go to Appearance > Widgets to add your custom menu where you want it using the Custom menu widget.
Knowing how to create custom menus is a really handy skill because there is so much you can achieve with custom menus. However, custom menus is a slightly more advanced blogging skills.
Please contact Edublogs Support if you need help setting up your custom menu. We are always happy to provide assistance!