Menu Items and Widgets

Menu items and widgets add navigation and utility to the framework of your site or blog. In this part of the tutorial, we will go over how to create your own “Menu” for your site, modify existing menus and add widgets to a site.

Creating a Menu:

First, let’s go over what a menu is on a WordPress site. Depending on the theme, a site may only be able to have one or several navigation menus. Menus are a great way to create links to your content pages and help people navigate your site. A couple important hints:

  • The fewer clicks the better. Users don’t usually prefer to click through page after page to find where they want to go, so use strategically placed menu items to help solve this problem.
  • A top level menu item should be informative and to the point, like the title of a paper or book, and should catch the user’s attention.
  • An important caveat is to not go overboard with too many menus and sub menus, as this can make things confusing for the user. A user who cannot navigate a site correctly is not likely to enjoy their experience or get the most out of your content. So choose your top level menu items carefully!

On our tutorial site, the main navigation menu is not very useful so we’re going to fix this.

Menu1

To modify a menu. go to the Appearance tab on the dashboard and select the Menu option from the pop out list. You should then be on a screen that looks something like this:

Menu2

We’re going to create a new menu from scratch. To do this, click the Create New Menu link and give it a name. I’m going to call my menu the “Main Menu” just to keep it simple. Then click the Create Menu button, and you should be back on the editing screen. From here, we can add content pages to the navigation menu be selecting them on the left and clicking add to menu.

Menu3

By adding different pages to the menu, we are creating visual links to these pages, making it possible for users to navigate to and view these pages. Once you have a few pages added to your menu,you can organize them by dragging the boxes around the screen. A box indented to the right is “nested” under a parent page, which means that on the menu item there will be a drop down showing this nested page. This can be used to help you categorize and organize your related content pages.

Once you have your menus the way you want, select the Navigation Menu option at the bottom of the screen to make it the active menu on your site. After that, click Save Menu, and your new menu should appear on your site. Go view it next and see how it works on the site; themes have a tendency to change the way a menu looks and functions. Always check out the menu any time you change WordPress themes, because the new menu could look completely different from one theme to the next.

Menu4

You can also change the title of a menu item or even delete one by clicking on the gray down arrow on the right site of the menu item box. This brings up the label field and the Remove button to let you change a few aspects of the menu item itself. If you don’t want a menu item to be named exactly the same as the content page it links to, change it here.

Menu5

Menu items don’t have to be links to your content pages either. They can be links to posts on your blog or even links to external websites like the example below:

Menu6

Adding and Organizing Widgets:

So what is a widget? In WordPress they are functional tools that can be added to the theme of a site to provide some kind of service to end users. A widget could be a Google calendar, search feature or RSS feed, for example. You may use different widgets or none at all.

To add a widget, the easiest way is navigate to your site view and select Customize at the top of the screen:

Theme3

From here just select Widgets => Main Widget Area to be able to add and remove widgets. Some themes have more than one area where widgets can be placed, while our theme only has one.

Widget1

Widget2

 

To add a widget, select add a widget and choose the widget you would like to add to the page.

 

 

 

 

 

 

For the sake of this tutorial, we’re going to add a search feature to our site. This will allow people to search for keywords or phrases on the site and find a list of pages, blog posts or even documents that apply.

Widget3

Next Session: Private Pages

Last Page<<<|>>> Next Page of Tutorial