WordPress 101: Introduction to Menus in Themes

This is second in a series about working with WordPress themes for beginners.  In this post, we’re going to learn about dealing with menus.  I’ve struggled with menus. Mostly I’ve had huge “menu-envy.”  There are so many great themes out there (usually for big bucks!) that offer amazing ways to navigate the site.   We–will get there!  This post will explain the basics of menus and sub-menus that work with any WordPress theme.  

About Menus

As we learned in the last post, in the Boardwalk help file, we are told about the two kinds of menus you get with Boardwalk,  a slide-out bar for our primary categories, and a footer menu for social media.  You can set menus up in a couple of different ways.  The easiest and most straightforward way is to use Categories and Tags as menu and submenu items.

Screen Shot 2018-01-21 at 11.13.51 AM

Creating a Menu with Submenus

WordPress has a good two-minute overview video to help us figure out how to manage these options.  This page also offers a great walk-through on creating menus.  The video is a bit generic, though–and it goes a bit fast (1.39 minutes is pretty fast).    My student wasn’t sure how to get started using the theme he’d chosen.   This theme has five dummy posts to begin with–while other themes have a single post (usually called Hello, World) or even posts.  You have to start somewhere!   You start by creating a post. Or several posts.  Here’s what we got with Boardwalk. .

Screen Shot 2018-01-21 at 6.53.41 PM

We click on the post to open it up for editing.  After the post opens for editing, we see, on the right, the “Categories & Tags” option.

Screen Shot 2018-01-21 at 6.53.50 PM

Screen Shot 2018-01-21 at 6.54.04 PM

I simply added these three categories by using the Add New Category link (shown above).   I unclicked the Uncategorized Category, which is the usual default on posts.  Check out my post on dealing with unwanted Categories here.

Screen Shot 2018-01-21 at 7.02.18 PM

Here, my student then added three new tags that we want to use for sub-menus.  Note that we capitalized the tags for the sub-menus. This will help us later when we want to add additional tags, to remember which tags are submenu headings.

Setting up the Menu

We go to the Themes Customize button, select menus. Then, under the Primary menu, we hit the “Add items” button.  Then we choose “Categories.”

Screen Shot 2018-01-21 at 7.05.15 PM

Then we click on the categories that we want to put onto the Primary menu.  We can use our cursor to literally “pick up” and move menu items over, so they appear indented, like this.  Here, we’re moved the About and Contact pages under the “Home” menu.

Screen Shot 2018-01-21 at 7.05.56 PM

We can also add tags, move those entries around and indent them in the same way, to create sub-menus off of the major categories.

Screen Shot 2018-01-21 at 7.07.48 PM

Menu items with the tags added.

Here is the menu with the tags submenu items re-arranged and put the way I want them to appear.

Screen Shot 2018-01-21 at 7.24.55 PM.png

Photograpy Mockup Menu

The only problem is that the theme my student chose, Boardwalk, doesn’t really have a nice menu on the front page: just the “bunch of lines” buttons on the right side of the screen.  Viewers will have difficulty finding this and navigating the site in a way they want.

Compare this with the recent changes in the Impractical Advice site. Entrepreneur puts a nice menu right up under the title of the blog and the banner.  Here we have a much better navigation menu, though you can see that I am still working on structure issues.  Still, it’s better.

Screen Shot 2018-01-21 at 7.24.06 PM


Some themes are better than others for navigation

I had my student work on the mockup, changing pictures and setting up the site with a menu so that we could take screen shots.

Here’s the mockup site after he’s finished. Note that the menu system is completely hidden–it’s that little set of three horizontal lines there on the far  right.

Screen Shot 2018-01-21 at 9.23.09 PM.png

When we click on the three little lines, we get this:

Screen Shot 2018-01-21 at 9.32.55 PM

The menu takes up the entire screen.  It’s…not optimal.  It’s supposed to be “slide out” but it is not sliding out. The other problem with Boardwalk is the way it slices the images.  All in all, Boardwalk is probably not optimal for our mockup site.  However, with WordPress, we can easily change themes–and the structure of our website will remain the same!   We won’t lose the work we’ve done creating the menus. 

Entrepreneur is not as beautiful as Boardwalk when we look at the posts individually.   The question is do we want to sacrifice beauty for better navigation?

Screen Shot 2018-01-21 at 9.41.43 PM

The search for the perfect theme goes on.  WordPress just makes it easy to change your mind.

More coming up on themes, SEO, and Pinterest.  Follow me on Twitter @impracticaladvi !   Many thanks for dropping by.  ~ Lola


Categories: Blog Design, Blog Organization, Wordpress ThemesTags: ,

Leave a Reply

%d bloggers like this: