Inserting a drop-down menu into your WordPress website header

I have been working on updating a customer’s website recently, transferring his old website over to a new WordPress one. The old website is full of content over lots of pages and is also set up for people to place orders for goods so it has been a complicated process transferring it all safely into a new home.

My customer sells lots of products and his old site not only includes a list of the products but it also links to a new page for each product, which contains lots more detail about each one. I had a tricky moment then thinking about how to incorporate this all into the new site in the most user-friendly way. In the end, I created an overview page for the whole range, with each product linking to its own new page with much more information about it there. I then created a dropdown menu for the full range so that customers could find the detailed pages more easily. So how do you do that?

Let me show you how I did the same thing on my authorscreenshot-2017-01-10-17-16-52 page.

 

 

 

 

 

1. First of all, I created the top level page called ‘My Books.’ I created this as a straightforward page in the first instance. If you want to be able to write on this page, then there’s nothing else you need to do to it before you publish it.

2. Then go to ‘Appearance’ in the LH sidebar and then choose ‘Menus’.screenshot-2017-01-10-17-33-34

 

 

 

 

 

3. When you look at your ‘Menus’ page, you will see you have a default first menu set up for you already. In the LH column, you will see a list of pages you have already published and this will include your equivalent of ‘My Books’. Tick the box next to it and then click on ‘Add Menu.’ This copies it to the RH column.

4. You can then drag this new page to the place you’d prefer it to show up on your site header. If you want to show other items as a dropdown menu underneath that page, as I’ve done for my actual books, you need to make sure they’re set up as pages first and then copied across from the LH column to the right.

5. You then drag them underneath your top page and slightly to the right which turns them into sub items like I’ve got. Remember to save this menu every time you make a change to it.

6. If you look closely again at my menu, you’ll notice that ‘My Books’ is described as a Custom Link, not as a Page. This is because I don’t want people to be able to click on it on my site. I just want it to be a parent page for the two pages underneath it.

7. If you want that too, here’s how to do it. Go back to ‘Menus’ and look at the LH column again. Clink on ‘Custom Links’ and put a # in the URL box and in the ‘Link Text’ box, type the name of your page, in my case ‘My Books.’ Add this to the Menu.

8. It will appear at the bottom of the column and be labelled as a ‘Custom Link’ rather than a page. Remove the hashtag from the URL box and drag the page to the place you want it to be with your sub-items underneath it. This will then work on your site as mine does – a top level page which can’t be clicked with two sub-items underneath it.

Give this a try and let me know how you get on in the comments. Good luck!

Advertisements