Hacking the WordPress menu

Having a Content Management System generate a multi-level menu automatically from your pages is obviously a good reason to use a Content Management System in the first place. But sometimes you have very good reasons for wanting to break things a bit.

WordPress typically creates a menu option for every "page" you create, and you can nest these in a hierarchical structure simply by designating a "parent" page for any new page that you add. Most themes will respect this hierarchy and implement a drop-down menu for the pages that have "children".

But there are two scenarios where this default functionality isn't what you're looking for...


SCENARIO #1: I want to make the Parent Page non-clickable

Sometimes you want to treat the "parent" in a drop-down menu simply as a heading, not a page at all. For example, you might have a section of your site named "Products", and sub-pages list the different products; perhaps you only want people to access the actual product pages, and you don't intend to have any general "Products" page at all.

The solution here is creating a Custom menu.

First up, you need to create a Products page anyway, even if you don't intend for it to actually be visible as a page. Create the child pages and set their Parent to "Product". This establishes the correct hierachy.

Inside WordPress, go to Appearance > Menus. Now, create a custom menu. You can start by adding all of the pages if you like. You will notice that by dragging items left or right, you can set up the nesting/hierarchy. Remove the Products page (or whatever your non-clickable Parent page is named).

Here's the trick: create a "Custom Link" with any URL (you are going to change it later), and name it Products (or whatever). Then add this to your menu. Now edit the Custom Link and change the URL to be simply blank (you can't do this when first creating the Custom Link, so that's why you have to do it in this second step). Now arrange your child links underneath this "fake" top-level page link.

Make sure you set this new menu as the primary menu for your Theme (under Theme Locations on the top left) and save. Your site should now work as follows: the Products link is un-clickable (mouseover link behaviour is even disabled) but the child pages are clickable as normal.

The Products page still exists, but is no longer accessible from your menu - just as you intended.



SCENARIO #2: I want to make a page that doesn't show up on the menu


This is kind of the reverse of the previous scenario - in the first scenario, you wanted a menu link but no page; now you want a page but no menu link.

This could be useful if, for example, you need to create a process page for a form, something which needs to be formatted like other pages in your site, but not accessible by users from the menu.

One way to do this is to use a Custom Menu as described in Scenario 1 above. This would work. However, it could get a little too fiddly if you have lots of pages. Another option is to download the Exclude Pages plugin (search for it within WordPress), which provides a simple toggle on page editing to exclude pages from the menu system.