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 a๏ฌect 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 e๏ฌects 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 Kara๏ฌllis, 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
ย
17. Tick the pages you want to add > Click add
to menu
โขโฏ You can search by โmost recentโ or โview allโ or โsearchโ to ๏ฌnd the page you
want to add
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/
โขโฏ E๏ฌciently Simplifying Navigation, Part 1: Information Architecture
โขโฏ http://www.smashingmagazine.com/2013/12/03/e๏ฌciently-
simplifying-navigation-information-architecture/
44. Thanks!
โขโฏ Iโll upload these slides to Meetup.com
โขโฏ Any questions, contact me on:
โขโฏ http://chrisburgess.com.au
โขโฏ @chrisburgess