Menus aren't the most exciting topic, but they're a critical component of any successful website. In this slide deck from the Melbourne WordPress User Meetup, I cover all of the basics for creating and managing menus in WordPress, along with a few tips and handy plugins.
2. Setting up and Managing
Your WordPress Menus
Melbourne WordPress User
Meetup, April 2015
@chrisburgess
3. Outline
• Importance of user experience (UX), information architecture and
navigation
• Impact of theme on navigation options available
• Creating pages and ordering
• Creating a WordPress menu for your theme navigation
• How to add custom link to your menu
• How to add a category to your menu
• Creating WordPress menus for widget areas
• Menu plugins and mega menus
5. Importance of User Experience
(UX), Information Architecture
(IA) and Navigation
6. Why should you care?
Because it will affect your
conversions.
7. Before you start building…plan
• Do your research, see what others have done
• Keep terms simple and intuitive to the user
• Avoid confusion with labels (e.g is it ‘Shop’ or ‘Shop Locations’)
• Use standard conventions (e.g ‘Contact’, ‘About’, ‘Products’ etc.)
• What are your categories? Map them out by parent and child.
• Use keywords/keyphrases if natural (e.g for SEO and usability)
• Avoid multi level menus. Try and stick to one sub level menu.
• Use hover effects like colour or highlight indicate where the cursor is.
• Think responsive. Review how your menu looks on the mobile
version of your theme. Commonly you’ll see these collapsed into a
single ‘menu’ button or a ‘hamburger’ menu
8. “While content is supposed to be
unique, surprising and exciting,
navigating to it is supposed to be
as simple and predictable as
possible.”
Anastasios Karafillis, Smashing Magazine
10. Different themes offer different navigation
locations – check documentation for this
• Twenty Fifteen theme navigation locations
• Genesis – Magazine Pro Theme
12. Before you create a menu - create pages
• Note depending on your theme and settings, sometimes pages are
automatically added to your menu, you can override this in the menu
section we cover next.
13. Good practice - order your pages to match
your navigation to help you easily
reference your content
1
2
3
0
0
0
33. Go to Appearance > Widgets
• There is a default ‘Custom Menu’ widget you can use
34. Click to drag into a widget area
• Give your menu a name e.g ‘Browse by Category’
• Select the menu you have already created back in ‘Menus’ from the drop
down list of available menus
43. Mega Menu Example - Home Page
• WordPress Codex
• https://codex.wordpress.org/WordPress_Menu_User_Guide
• https://codex.wordpress.org/Appearance_Menus_Screen
• https://codex.wordpress.org/Navigation_Menus
• Essential Navigation Checklists for Web Design
• http://www.sitepoint.com/checklists-web-design/
• Efficiently Simplifying Navigation, Part 1: Information Architecture
• http://www.smashingmagazine.com/2013/12/03/efficiently-
simplifying-navigation-information-architecture/
44. Thanks!
• I’ll upload these slides to Meetup.com
• Any questions, contact me on:
• http://chrisburgess.com.au
• @chrisburgess