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

5 Easy Ways to Improve Your WordPress Website

Wizard_kingdoms

Last week, I published a post on my author website here about my first week as a freelancer. My aim when I left my paid job just before Christmas was to concentrate on my writing and writing related activities, specifically, proofreading. So one of the first things I did when I started as a freelancer, was to set up this new website for the business. I mentioned this in my blog post last week and received so much positive feedback about the new website that it made me take my WordPress skills a bit more seriously. It also led to some work on someone else’s WordPress site and some enquiries from other people about whether I could help them with theirs 🙂 Needless to say, if you have a WordPress site and would be interested in some help, do please get in touch! Just click here to send me an email.

This week then, I thought I might show you some quick tips which you might like to use on your own site. These are all small things but you never know, there might be something you’ve been trying to figure out how to do for ages.

1. When you’re writing a blog post, you may only be able to see one line in the toolbar above it, starting with the bold symbol. At the end of that toolbar, there is a symbol that looks like this:

Screenshot 2016-01-17 12.11.01

    This is the toolbar toggle button and if you click on it, it reveals a second toolbar allowing you to do some other interesting things to your blog posts.

2. One of these is to change the nature of the text you are typing. This is by using the first dropdown box on the second toolbar which defaults to ‘Paragraph’. This is the one to use for your body text which I’m sure you’ll all recognise from Word. However, sometimes you want something to stand out a bit more and if you just put the text into bold using that B button when you’ve chosen ‘Paragraph’, you’ll notice that the text doesn’t stand out very much. If you choose one of the Heading options instead, you’ll see that you can make text stand out a lot more:

Heading 1 looks like this for example!

3. Another thing you can do using this second toolbar is to change the colour of words or links to make them more prominent. This is done by using this button:

Screenshot 2016-01-17 12.22.53 The default colour for all text depends on the theme you have chosen but if you want to change its colour, just highlight the text, click on the button and make your choice. This is really good for highlighting links to your books or other products you want to draw attention to.

4. Another thing you might want to do is to add Social Media Icons to your website page, rather than having your Twitter timeline and Facebook page showing on your site. On my author site, I have both but if you’re short of space, you might just want to have the icons for people to click on to link them to your various pages. This can be done easily by hovering over ‘My Sites’ in the top left-hand corner of one of your website pages, choosing WP admin and then choosing ‘Appearance’ from the left-hand sidebar which appears. Then go to ‘Widgets.’ Scroll down until you see ‘Social Media Icons’ and drag that box over to your chosen sidebar (some themes have several). Fill in the details and the icons will appear on your site. By default, these icons are quite small. Take a look at the one I have for Twitter on this website. It is possible to install bigger ones but that’s a bit more time-consuming. It’s something I can do for you if you want to get in touch 🙂

5. Finally, talking about those links again. Do you ever click on a link on someone else’s website only to find that it takes you away from the original page? I find that quite annoying so I make sure that whenever I put in a link, using this button in the first toolbar:

Screenshot 2016-01-17 12.37.32 I always check the box saying ‘Open link in a new tab.’ That way, your reader has both your website page open to return to should they want to, as well as the link you were referring them to.

Well, those are my tips for this week. Please give them a go yourself but don’t forget that if you get stuck, I am more than happy to help you out 🙂

Thanks for reading and do leave me a comment below. I’d love to hear from you.

 

Image used courtesy of Wikia.