Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress Menus - Melbourne User Meetup

2,758 views

Published on

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.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WordPress Menus - Melbourne User Meetup

  1. 1. Setting up and Managing Your WordPress Menus
  2. 2. Setting up and Managing Your WordPress Menus Melbourne WordPress User Meetup, April 2015   @chrisburgess  
  3. 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
  4. 4. WordCamp  Brisbane  30-­‐31  May  
  5. 5. Importance of User Experience (UX), Information Architecture (IA) and Navigation
  6. 6. Why should you care? Because it will affect your conversions.
  7. 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. 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
  9. 9. Impact of Theme on Navigation Options Available
  10. 10. Different themes offer different navigation locations – check documentation for this •  Twenty Fifteen theme navigation locations •  Genesis – Magazine Pro Theme
  11. 11. Creating Pages and Ordering
  12. 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. 13. Good practice - order your pages to match your navigation to help you easily reference your content 1   2   3   0   0   0  
  14. 14. Creating a WordPress Menu for your Theme Navigation
  15. 15. Go to Appearance > Menus
  16. 16. Give your menu a name > Create Menu
  17. 17. Tick the pages you want to add > Click add to menu •  You can search by ‘most recent’ or ‘view all’ or ‘search’ to find the page you want to add
  18. 18. Click and drag to reorder the menu items > Save Menu
  19. 19. To create a sub level > drag the menu item to the right Second  Level   Third  Level  
  20. 20. Customising the Menu Label •  If you click on the arrow and drop the item down you can edit the menu text
  21. 21. Select the theme location for your menu •  If you want your menu to appear in the main navigation area tick ‘primary menu’
  22. 22. You can also manage your theme navigation locations here…
  23. 23. Then you’ve created your menu!
  24. 24. Screen  OpBons  
  25. 25. Plugin - CMS Tree Page View •  https://wordpress.org/plugins/cms-tree-page-view/
  26. 26. How to Add a Custom Link
  27. 27. Menus > Links •  Enter URL •  Create a label for the menu item •  Add to menu
  28. 28. Then it will appear with your pages in the Main Menu we created
  29. 29. You can create custom links for… •  External URLs •  Pages •  Categories •  Tags •  Custom Post Types and Taxonomies
  30. 30. How to Add a Category
  31. 31. Simply click on Categories > Tick > Add to Menu
  32. 32. Creating WordPress Menus for Widget Areas
  33. 33. Go to Appearance > Widgets •  There is a default ‘Custom Menu’ widget you can use
  34. 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
  35. 35. Then we have a category menu on our sidebar
  36. 36. Mega Menus and Menu Plugins
  37. 37. Mega Menus •  Drop down or ‘fly out’ from main navigation as a multi column sub level menu
  38. 38. Mega Menu Example - Home Page •  Before hover on menu item
  39. 39. Mega Menu Example - Home Page •  After hover on menu item
  40. 40. Plugin – Uber Menu http://wpmegamenu.com/
  41. 41. Plugin – Max Mega Menu https://wordpress.org/plugins/megamenu
  42. 42. More?
  43. 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. 44. Thanks! •  I’ll upload these slides to Meetup.com •  Any questions, contact me on: •  http://chrisburgess.com.au •  @chrisburgess

×