Home » All

WordPress Custom Menus

Submitted by on November 11, 2011 – 9:41 am
Road Warrior in Jinguashi

Road Warrior in Jinguashi

I’ve spent the last few days playing around with this blog and getting familiar (again) with WordPress. I had some success in that I discovered some new features in WordPress which should serve me well. The best new addition is the Custom Menus feature. I love menus, and in the past, I never saw a good and simple way to make menus in WordPress. Some themes had menus built in, but they were based on nesting Pages, and I always ended up with empty Pages. I needed to use them as placeholders to build the menu structure, but they were still clickable and just led users to a blank Page with only the title. That was very weird, but I didn’t see a way to get past it.

Now, WordPress has this Custom Menus feature. I certainly don’t understand all of it, but it is built right into WordPress itself. Having this type of  functionality as part of WordPress itself (instead of relying on themes and plugins) makes a lot of sense. It seems to me to be the way WordPress should move and develop.

The new Custom Menu feature has several interesting aspects. For one, it is very simple. Simply go to your Dashboard and look under the Appearance tab. There you will see an item labelled Menus. Click on it to open up the Menu screen. This is where you create a new menu. Click on the + tab, give the menu a name, and click the Create Menu button. Note that this replaces the default menu that comes with your Theme. Also, your theme has to support Custom Menu in order to use this feature. Some themes don’t, though I believe you can still use the Custom Menu widget. This places the menu you create in your sidebar. Once you have created your new menu and given it a name, you can select items to add to it from a set of boxes on the left. You can add Pages, Posts, Categories, Tags, and Links. You can have all of these on the same menu, which is very convenient.

Note that not all of these items may be visible by default. Look for Screen Options at the top right hand corner of the screen. Clicking on the down arrow will open up a box where you can select the items to be visible for building your menu. I can’t see any reason to have any of them hidden, so I would tick the boxes for all of them. The options are Theme Locations, Custom Links, Posts, Pages, Categories, and Post Tags. Ticking each of these will open up a box on the left side of the screen for each one.

For example, if you tick the box for Posts, you will get a box with all of your Posts listed. You can see your Most Recent Posts, View All Posts, and you can search for a specific Post. You simply find the Post or Posts you want to have on your menu, select them and add them. You can add just one Post or several Posts at the same time. It’s that easy. You don’t actually see the menu on this screen, of course. You only see a representation of it. Each item you select will appear on the right in a thin rectangle. Once it is there, it will be on the menu bar when you look at your blog or website.

One very important thing to be aware of is that you have to save your changes. There is a Save Menu button at the top and bottom of the screen. Make sure you save the menu from time to time as you build it, or else you risk losing all your work. And of course you have to save it when you’re done at the very end.

Each item you add to your menu is technically a link to another part of your website/blog or it can be a link to another website altogether. Therefore, there is the option of having it open in a new window or tab or in the same window or tab. It took me a while to figure this out, but it is very easy to do this. The problem is that the option is not visible by default. Go up to Screen Options again at the top of your screen. Click on the down arrow and you will see an option labeled Link Target. Make sure this box is ticked. I really don’t know why it is not ticked by default. Once you tick this box, you will see something new with your menu items. Each menu item has its own down arrow. Click on this down arrow and it opens up a box below it with lots of fields that can be filled in to modify it. Here, you will see a simple dropdown menu for Link Target where you can choose whether it should open in a new window/tab or the same window/tab.

For Posts, Tags, and Categories, you probably want them to open in the same window. You likely don’t want a visitor to your blog to end up with multiple copies of your blog open in their browser. However, if it is a link to an outside website, such as your photos at Flickr, then you might want this to open in a new window or tab in the browser. Just make your choices accordingly.

A very important part of this menu system is the ability to insert placeholders. You do this by adding an Internet link. However, instead of putting in an URL, you put in the pound sign: # When you do this, you get an inert menu item. It just sits there and isn’t clickable. This is useful – essential, in fact – to building menus. If you don’t understand what I mean, just look at the menu at the top of any Microsoft Word page. You see all the menu items labeled “File”, “Edit”, “View”, etc. These menu items don’t lead anywhere. You don’t click on them to accomplish anything. They are simply used to categorize the options underneath them. When you click on them, they simply present you with a list of options – actual clickable items. They are just containers to hold the menu items that are nested beneath them. That’s what these non-clickable Links in the Custom Menus do. It’s an odd sort of workaround to use a non-clickable Internet link to make a placeholder in a menu, but I’m sure there are deep and complex programming reasons for that. The important thing is that it works well.

Once you’ve added a bunch of items to your menu, they are all just sitting there in one long line at the same level. They are all at the top level of the hierarchy. That’s probably not how you want them. You’ll probably want to put them in a specific order, and you’ll want to put some items other items – nesting them. Luckily, this is very easy to do.

To put your menu items in a different order, you simply drag and drop them. Click and hold any menu item you’ve created, be it a Post, Page, Category, Tag, or Link, and then drag it to where you want it and let go. (The cursor will change to a 4-way arrow when you click and hold.) The menu item will drop into place right there in the order you want. If you want to nest menu items underneath other menu items, you simply drag them to the right and indent them. It’s brilliant and intuitive. Note that none of these changes will take effect until you save the menu. Click on the Save Menu button, and then when you preview your blog, you’ll see the new menu structure.

I had tremendous problems dragging and dropping menu items and nesting them at one point, and after a lot of experimentation, I realized it was my browser that was the problem. When I was using Internet Explorer 8, I could not place menu items or move them. It was driving me crazy. Then I opened my blog in Google Chrome and it worked flawlessly. It could be the case with just that computer I was working on. In any event, if you are having a lot of trouble manipulating the menu items, try using a different browser. It might help.

There is still much about the Custom Menus that I don’t understand. I’m just learning how to use them. However, I’m finding them very useful. It’s a wonderful addition to WordPress, and if your theme doesn’t support Custom Menus (some themes don’t), you might want to consider changing your theme – that is, if you’re as much of a fiend for menus and structure as I am.

 

Houtong Coal-Mine Ecological Park - Taiwan
Heavy Taipei Rain and WordPress Post Formats

Tags: , , , , , , , ,

Talk to me. I'd love to hear what you think.