How to Set Up Menus and Widgets

Menus and widgets are very important elements of your WordPress blog because they help visitors find their way around your site easily. And in the case of widgets, they can also extend your blog’s functionality by allowing you to add some extra features that are cool and dynamic.

Although working with menus and widgets can be somewhat intimidating especially when you’re just getting started with blogging, getting them up and running on your WordPress blog is actually very easy.

So, let get started!

Menus

WordPress themes usually have one or more menus, which primarily serve as the main source of navigation for your blog. Themes that support only one menu usually have it at the top, while others that support multiple menus usually have one above and/or below the header as well as in the footer.

Most of the time, menus are used to display links to the either the pages of a blog (Home, About, Contact, etc.) or the post categories.

Here are some examples:

how to use widgets and menus in wordpress 1
SmartPassiveIncome.com (menu below blog header)
how to use widgets and menus in wordpress 2
BecomingMinimalist.com (menu above blog header)

Your blog should have at least one menu, which will contain links to important pages on your blog, as with the examples above.

Now, let’s set up a basic navigation menu for your WordPress blog. If you’ve already created some pages, then you already have something to link to from your menu. But if you haven’t, you need to create them now — even if they are just empty pages — so they can be linked to from your menu.

Now, let’s create a menu. Here, we’ll be using the Twenty Fourteen theme as our example. Note that your experience may vary depending on the theme you use (more details coming shortly).

From your WordPress sidebar, navigate to Appearance > Menus. You’ll be taken to the Menus screen:

how to use widgets and menus in wordpress 3

To create a menu for your blog, simply choose the items in the left column and add them to a menu you’re creating in the right column. Here, we’ll be creating a simple menu links to our About and Contact pages.

First, we will create a menu by clicking on the “create a new menu” link near the top of the screen.

how to use widgets and menus in wordpress 4

You’ll be provided with a Menu Name field. Give your menu a name and enter it in the field. Then click the “Create Menu” button.

how to use widgets and menus in wordpress 5

In the left column, there are three different widgets that you can use to add items to your new menu:

  • Pages: Adds existing pages on your blog to the navigation menu.
  • Links: Adds manually entered URLs to the navigation menu.
  • Categories: Adds links to the categories you have created.

Since our About and Contact pages are by definition pages, we will use the first widget to create our menu. Just check the box beside each of the pages and click the “Add to Menu” button. If you leave the box beside any page unchecked, that page will not appear in the navigation menu, so be sure to check the boxes for pages you want to include in your menu.

how to use widgets and menus in wordpress 6

After adding the pages to your menu, they will appear in the column on the right, which represents your new menu.

how to use widgets and menus in wordpress 7

Note that the items within your blog’s menu will appear in the order in which they appear on this page. But since your menu items will be arranged from left to right, the topmost items on this page starts on the left of your menu. In the screenshot above, the Contact Me page will appear first, followed by the About Me page.

But if you want your menu items to follow another order, simply drag the items to change their order.

how to use widgets and menus in wordpress 8

At this point, there’s one more thing you need to do. Your theme may have more than one menu location (i.e. the spot within the theme design where you can place a menu), so you need to assign your menu to your desired location.

If the theme you’re using is well designed, the menu locations will be self-explanatory. In the case of the Twenty Fourteen theme, you can assign your menu to either the top primary menu or the secondary menu in the left sidebar. Here, we’ll choose the top primary menu.

how to use widgets and menus in wordpress 9

Then click the “Save Menu” button, and that’s all. Your new menu will now show in the top menu bar on your blog’s front end.

how to use widgets and menus in wordpress 10

Widgets

Widgets allow you to add content and features — such as Categories, Recent Posts, and Search — to “widgetized” areas of your blog (like the sidebar and footer).

For most WordPress themes, the sidebar is widgetized. However, any part of a theme can be widgetized (including the footer, header, and even parts of the main content section). Frontier theme, for example, has more than 10 widegtized areas.

You sure would have seen widgets before, even if you don’t know it. Here is what they look like on a sidebar:

how to use widgets and menus in wordpress 11

In the screenshot above, Recent Posts, Recent Comments, Archives, and Categories, are all widgets. They may not look particularly impressive right now, but once you start adding content to your blog, they become much more useful.

One fine thing about widgets is that they are dynamic; they are automatically populated depending on what you have on your blog. Using the widgets in the screenshot above as examples:

  • The Search widget enables visitors to search your site using the in-built WordPress search function.
  • The Recent Posts widget will display a certain number (as defined by you) of the most recent posts published on your blog.
  • The Recent Comments widget will display a number (as defined by you) of the most comments left on your blog either by you or your readers.
  • The Archives widget will display a list of date-based links that allow people to explore older posts on your blog.
  • The Categories widget will display a list of the categories on your blog.

To access the widgets on your blog, navigate to Appearance > Widgets in your sidebar. You’ll  be taken to a screen like this:

how to use widgets and menus in wordpress 12

On the left you’ll see the pool of available widgets, and on the right you’ll see the widgetized areas supported by your theme. These areas will be typically labeled with self-explanatory names, so you can identify where they are on your blog.

In the case of the Twenty Fourteen theme, there are three widgetized areas:

  • Primary Sidebar
  • Content Sidebar
  • Footer Widget Area

Here, we’ll be focusing on the primary sidebar (the one displayed in the screenshot you saw earlier).

Now you can see that the primary sidebar is packed full of default widgets. We’ll first remove those widgets, so you can get an idea of how easy it is to handle them.

Removing a widget from the primary sidebar is very simple, just click and drag it out of the Primary Sidebar box and back into the Available Widgets section. The screenshot below shows the Search widget being moved out of the Primary Sidebar section:

how to use widgets and menus in wordpress 13

Repeat the process for all the widgets currently in the primary sidebar. At the end, you’ll have an empty box.

how to use widgets and menus in wordpress 14

If you reload your blog’s home page at this point, you’ll see that the primary sidebar (i.e. the sidebar on the left) is now empty.

how to use widgets and menus in wordpress 15

Now, let’s re-add some widgets to the empty sidebar. As a rule, always limit your sidebar widgets to a few important ones — the fewer, the better. A cluttered sidebar isn’t good for your visitors.

With that in mind, we’re only going to add a few important widget to the primary sidebar:

  • Text: we’ll use this to add a little introductory message for new visitors.
  • Categories: this allows visitors to browse your blog by topic.
  • Recent Posts: this shows visitors what you posted recently on your blog.
  • Search: this allows visitors to search your blog using keywords or phrases related to your content.

To start with, let’s move the Text widget to the primary sidebar. Just drag it from the Available Widgets section into the Primary Sidebar section.

how to use widgets and menus in wordpress 16

Once you drop the widget in the primary sidebar, it will automatically open up to show a couple of fields. Add a title for your widget and some introductory text for your visitors.

how to use widgets and menus in wordpress 17

Then click the “Save” button to save your changes, and then “Close” link to minimize the widget.

Now, drag the Categories widget from the Available Widgets section into the Primary Sidebar box, just under the Text widget.

how to use widgets and menus in wordpress 18

The order in which you arrange the widgets will determine how they will appear in your blog’s sidebar at the front end. So, in this case, the Text widget will appear above the Categories widget.

Give the Categories widget a “Categories” title in the widget settings, so visitors will know what the widget stands for. Click “Save” and “Close” as before.

Next, drag in the Recent Posts widget. Title it “Recent Posts” and set the Number of posts to show to 5 or 10, depending on what you prefer.

Finally, drag the Search widget into the primary sidebar. You don’t need to give this widget a title because your visitors will understand its function immediately they see it.

And that’s all for now. You can add other widgets that you deem necessary, but those four widgets will be just enough to give visitors to your blog a cool user experience once you have a good number of posts published on the blog.

After adding all four widgets, you’ll get something like this:

how to use widgets and menus in wordpress 19

Now that you know how to add and remove widgets, feel free to play around with the various widgets that are available, so you can know the important ones.

Once again, bear in mind that the more widgets you have on your blog, the more cluttered it will look. Visitors don’t like cluttered blogs; they want a simple, cool, and clean design that displays only the most important options. Having too many widgets can overwhelm visitors and send them off your blog.

Congratulations!

Now, you have successfully reached the end of the blog setup guide. You now understand how to complete the most vital tasks that setting up and transforming a WordPress blog entails.

In addition to this seven-part guide, there are some other things you will need to learn about WordPress as you walk further down the aisle of blogging. These extra details will be published in this blog in the form of blog posts as standalone tutorials in themselves.

If you had problems with any aspect of this detailed guide or you any have questions, please feel free to get in touch so we can help you out. We’ll try to reply you within 12 hours.

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *