Thesis 1.8 and word press menus awesome together final


Published on

Final Version - Bay Area Foothills Meetup April 20, 2011

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Thesis 1.8 and word press menus awesome together final

  1. 1. WordPress Menus & Thesis 1.8 – Awesome Together Ann Zerega Design
  2. 2. Thesis theme menus allow you to publish category pages - but you don’t have ability to easily reorder menu from the WordPress Dashboard
  3. 3. Wordpress Menus since 3.0 have category support and allow you to reorder menus from the dashboard
  4. 4. Using Thesis 1.8 with WordPress Menus, you can create polished menus for both pages and category pages <ul><li>You will need: </li></ul><ul><li>Thesis 1.8 </li></ul><ul><li>Access to your Thesis 1.8 custom_functions.php file </li></ul><ul><li>Access to the custom stylesheet in Thesis 1.8 </li></ul>
  5. 5. Step 1 - In Thesis 1.8 enable the WordPress Menu option <ul><li>Select the following in order from any page in the Wordpress Dashboard: </li></ul><ul><li>Thesis </li></ul><ul><li>Site Options </li></ul><ul><li>Expand Navigation Menu (Select Menu Type) option </li></ul><ul><li>Choose WordPress nav menu </li></ul><ul><li>Click the tastefully renamed “Big A@# save button” </li></ul>
  6. 6. Step 2 – Create a custom WordPress Menu <ul><li>Select the following in order from any page in the Wordpress Dashboard: </li></ul><ul><li>Appearance > Menus </li></ul><ul><li>Create a new Menu including category pages </li></ul><ul><li>Arrange your Menu tabs </li></ul><ul><li>Name and save your new menu </li></ul><ul><li>IMPORTANT! Write down the name of the new menu you want to customize </li></ul>
  7. 7. Step 3 – Customize your Menu from the Thesis panel and/or your custom.css file <ul><li>Thesis > Design Options > Nav Menu </li></ul><ul><li>Or create custom styles using custom.css and the name of the custom menu you created </li></ul><ul><li>For my test site my custom.css code would look like this:. </li></ul><ul><li>menu- azdtestmenu -container a{ </li></ul><ul><li>background: url('images/nav_button.png') </li></ul><ul><li>repeat-x; } </li></ul>
  8. 8. Step 4 – Either leave your menu in the default position (above the header) or move it using your custom_functions.php file <ul><li>Thesis theme hooks allow you to move the menu virtually anywhere </li></ul><ul><li>Most Western audiences are used to reading left to right, so please DO NOT place the menu on the right! </li></ul><ul><li>NOTE – it is much better to edit these files on your desktop and ftp them to the site vs. using the online Thesis custom file editor. </li></ul><ul><li>In a pinch you can use the custom file editor that comes with Thesis </li></ul>
  9. 9. Step 5 – Navigation Code Examples <ul><li>To move your menu below the header image place this code in your custom_functions.php file: </li></ul><ul><li>remove_action('thesis_hook_before_header', 'thesis_nav_menu');add_action('thesis_hook_after_header', 'thesis_nav_menu'); </li></ul>To move your menu to a sidebar place this code in your custom_functions.php file: remove_action('thesis_hook_before_header','thesis_nav_menu'); add_action('thesis_hook_before_sidebars','thesis_nav_menu'); AND – update your custom.css with this statement: . custom .menu li { float: none; }
  10. 10. Demo and Questions
  11. 11. References <ul><li>Thesis Tutor - How to move the navigation menu above the sidebars: </li></ul>