Advanced Thesis  Techniques and Tricks Brad Williams WebDevStudios.com
Brad Williams CEO & Co-Founder, WebDevStudios.com Co-Host SitePoint Podcast Organizer NJ WordPress Meetup Who Am I? Recent...
<ul><li>What is Thesis? </li></ul><ul><li>What is a Hook </li></ul><ul><li>Custom Page Templates </li></ul><ul><li>Adding ...
What is Thesis?
<ul><li>Search Engine Optimization (SEO) </li></ul><ul><li>Accessibility </li></ul><ul><li>Usability </li></ul><ul><li>Fle...
<ul><li>Matt Cutts  - http://www.dullest.com/blog/ </li></ul><ul><li>Chris Brogan  - http://www.chrisbrogan.com/ </li></ul...
<ul><li>Custom_functions.php  – location for all custom code, hooks, functions, etc </li></ul><ul><li>Custom.css  – locati...
What is a Hook?
What is a Hook?
Thesis features a simple hook system that is essentially an API—a set of basic commands that you can use to add to, subtra...
Available Thesis Hooks thesis_hook_before_html thesis_hook_after_html thesis_hook_before_header thesis_hook_after_header t...
48 Hooks (In case you were counting)
Example 1: Hello WordCamp <?php add_action('hook_name', ‘hello_wordcamp');  Function hello_wordcamp() { echo “Hello WordCa...
Example 2:  Custom Footer <?php remove_action('thesis_hook_footer', 'thesis_attribution'); add_action('thesis_hook_footer'...
Now for the fun stuff
Example 3:  Custom Page Template <?php remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample'); add_...
Example 4:  Add A Secondary Menu Thesis by default has a single menu So lets create a secondary menu!
Example 4:  Add A Secondary Menu <?php function topnav_menu() {  ?>  <ul id=&quot;topnav&quot;>  <li><a href=“/wordpress&q...
Example 4:  Add A Secondary Menu /* Top Nav bar */ .custom ul#topnav { border-style: none; list-style-image: none; list-st...
Example 4:  Add A Secondary Menu BAM!  Another menu! Ref: http://www.emptycabinmedia.com/thesis-theme-add-another-menu/
Example 5:  Widgetize your Multimedia Box
Example 5:  Widgetize your Multimedia Box <?php register_sidebar(array('name' => 'Multimedia Box', 'before_widget' => '<li...
Example 5:  Widgetize your Multimedia Box Change the Multimedia Box setting to Custom code Add any widgets you want to the...
Example 5:  Widgetize your Multimedia Box Now we are widgetized! Ref: http://rickbeckman.org/widgetizing-thesis-multimedia...
And there is no more, I lied In Summary, Thesis is a great theme for beginner and advanced users alike.
<ul><li>Thesis Official Website – http://diythemes.com/thesis/ </li></ul><ul><li>Thesis Theme User’s Guide </li></ul><ul><...
Brad Williams [email_address] Blog: strangework.com twitter.com/williamsba IRC: WDS-Brad Everywhere else: williamsba Contact
Upcoming SlideShare
Loading in...5
×

Advanced Thesis Techniques and Tricks

9,021

Published on

My presentation at WordCamp Mid-Atlantic on Advanced Thesis Techniques and Tricks

Published in: Technology

Advanced Thesis Techniques and Tricks

  1. 1. Advanced Thesis Techniques and Tricks Brad Williams WebDevStudios.com
  2. 2. Brad Williams CEO & Co-Founder, WebDevStudios.com Co-Host SitePoint Podcast Organizer NJ WordPress Meetup Who Am I? Recent Thesis Sites: AwayToGarden.com (WPMU) LoomisCreek.com TheSisterProject.com (WPMU) MattBites.com RetroRenovation.com
  3. 3. <ul><li>What is Thesis? </li></ul><ul><li>What is a Hook </li></ul><ul><li>Custom Page Templates </li></ul><ul><li>Adding a Secondary Menu </li></ul><ul><li>Widetize your Multimedia Box </li></ul><ul><li>And more! </li></ul>Topics
  4. 4. What is Thesis?
  5. 5. <ul><li>Search Engine Optimization (SEO) </li></ul><ul><li>Accessibility </li></ul><ul><li>Usability </li></ul><ul><li>Flexibility </li></ul>Thesis is a Premium Theme Framework with a focus on… Thesis was created by this guy: Chris Pearson
  6. 6. <ul><li>Matt Cutts - http://www.dullest.com/blog/ </li></ul><ul><li>Chris Brogan - http://www.chrisbrogan.com/ </li></ul><ul><li>Copy Blogger - http://www.copyblogger.com/ </li></ul><ul><li>Danny Sullivan - http://daggle.com/ </li></ul><ul><li>Laughing Squid - http://laughingsquid.com/ </li></ul><ul><li>Cute Overload - http://cuteoverload.com/ </li></ul><ul><li>Technosailor - http://technosailor.com/ </li></ul><ul><li>Etc, etc, etc </li></ul>Who uses Thesis?
  7. 7. <ul><li>Custom_functions.php – location for all custom code, hooks, functions, etc </li></ul><ul><li>Custom.css – location for all custom style elements on your website </li></ul>Thesis customization is powered by two files <ul><li>wp-content/themes/thesis/custom/ </li></ul><ul><li>custom_functions.php </li></ul><ul><li>custom.css </li></ul>Location:
  8. 8. What is a Hook?
  9. 9. What is a Hook?
  10. 10. Thesis features a simple hook system that is essentially an API—a set of basic commands that you can use to add to, subtract from, and modify the functionality of your Thesis installation. Two step process: 1. construct a simple function to house your custom code 2. Tell Thesis where to place your custom code by specifying the appropriate hook You can add and remove any functions using add_action() and remove_action()
  11. 11. Available Thesis Hooks thesis_hook_before_html thesis_hook_after_html thesis_hook_before_header thesis_hook_after_header thesis_hook_header thesis_hook_before_title thesis_hook_after_title thesis_hook_before_content_box thesis_hook_after_content_box thesis_hook_before_content thesis_hook_after_content thesis_hook_feature_box thesis_hook_before_post_box thesis_hook_after_post_box thesis_hook_before_teasers_box thesis_hook_after_teasers_box thesis_hook_before_post thesis_hook_after_post thesis_hook_before_teaser_box thesis_hook_after_teaser_box thesis_hook_before_teaser thesis_hook_after_teaser thesis_hook_before_headline thesis_hook_after_headline thesis_hook_before_teaser_headline thesis_hook_after_teaser_headline thesis_hook_byline_item thesis_hook_before_comment_meta thesis_hook_after_comment_meta thesis_hook_after_comment thesis_hook_comment_form thesis_hook_archives_template thesis_hook_custom_template thesis_hook_faux_admin thesis_hook_archive_info thesis_hook_404_title thesis_hook_404_content thesis_hook_before_sidebars thesis_hook_after_sidebars thesis_hook_multimedia_box thesis_hook_after_multimedia_box thesis_hook_before_sidebar_1 thesis_hook_after_sidebar_1 thesis_hook_before_sidebar_2 thesis_hook_after_sidebar_2 thesis_hook_before_footer thesis_hook_after_footer thesis_hook_footer
  12. 12. 48 Hooks (In case you were counting)
  13. 13. Example 1: Hello WordCamp <?php add_action('hook_name', ‘hello_wordcamp'); Function hello_wordcamp() { echo “Hello WordCamp!”; } ?>
  14. 14. Example 2: Custom Footer <?php remove_action('thesis_hook_footer', 'thesis_attribution'); add_action('thesis_hook_footer', 'my_footer'); function my_footer() {     echo “<p>Copyright &copy; WebDevStudios.com</p>“; } ?>
  15. 15. Now for the fun stuff
  16. 16. Example 3: Custom Page Template <?php remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample'); add_action('thesis_hook_custom_template', 'home_custom'); ?> Remember to set the page template to Custom Template
  17. 17. Example 4: Add A Secondary Menu Thesis by default has a single menu So lets create a secondary menu!
  18. 18. Example 4: Add A Secondary Menu <?php function topnav_menu() { ?> <ul id=&quot;topnav&quot;> <li><a href=“/wordpress&quot;>WordPress</a></li> <li><a href=“/wpmu&quot;>WPMU</a></li> <li><a href=“/buddypress”>BuddyPress</a></li> <li><a href=“/bbpress&quot;>bbPress</a></li> </ul> <?php } add_action('thesis_hook_before_header', 'topnav_menu'); ?>
  19. 19. Example 4: Add A Secondary Menu /* Top Nav bar */ .custom ul#topnav { border-style: none; list-style-image: none; list-style-position: outside; list-style-type: none; background:#E4E4E4 none repeat scroll 0 0; width: 100%; float: left; } .custom ul#topnav li { float: left; padding: 3px 10px 3px 0px; } .custom ul#topnav li a { font-size: 1.1em; color: #000000; } .custom ul#topnav li a:hover { text-decoration: underline; } Add a little styling in custom.css
  20. 20. Example 4: Add A Secondary Menu BAM! Another menu! Ref: http://www.emptycabinmedia.com/thesis-theme-add-another-menu/
  21. 21. Example 5: Widgetize your Multimedia Box
  22. 22. Example 5: Widgetize your Multimedia Box <?php register_sidebar(array('name' => 'Multimedia Box', 'before_widget' => '<li class=&quot;widget %2$s&quot;>', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>')); function multimedia_box_widgets() { echo '<ul class=&quot;sidebar_list&quot;>'; dynamic_sidebar('Multimedia Box'); echo '</ul>'; } add_action('thesis_hook_multimedia_box', 'multimedia_box_widgets'); ?>
  23. 23. Example 5: Widgetize your Multimedia Box Change the Multimedia Box setting to Custom code Add any widgets you want to the Multimedia Box sidebar
  24. 24. Example 5: Widgetize your Multimedia Box Now we are widgetized! Ref: http://rickbeckman.org/widgetizing-thesis-multimedia-box/
  25. 25. And there is no more, I lied In Summary, Thesis is a great theme for beginner and advanced users alike.
  26. 26. <ul><li>Thesis Official Website – http://diythemes.com/thesis/ </li></ul><ul><li>Thesis Theme User’s Guide </li></ul><ul><ul><li>http://diythemes.com/thesis/rtfm/ </li></ul></ul><ul><li>Thesis Hook References </li></ul><ul><ul><li>http://diythemes.com/thesis/rtfm/hooks/ </li></ul></ul><ul><ul><li>http://diythemes.com/thesis/rtfm/default-hook-usage/ </li></ul></ul><ul><li>Thesis Pro Users </li></ul><ul><ul><li>Chris Pearson http://www.pearsonified.com/ </li></ul></ul><ul><ul><li>Rick Beckman (KingdomGeek) http://rickbeckman.org/ </li></ul></ul><ul><ul><li>Kristarella http://www.kristarella.com/ </li></ul></ul><ul><li>Thesis Resource Sites </li></ul><ul><ul><li>http://thesisthemehq.com/ </li></ul></ul><ul><ul><li>http://thesisgallery.com/ </li></ul></ul>Thesis Resources
  27. 27. Brad Williams [email_address] Blog: strangework.com twitter.com/williamsba IRC: WDS-Brad Everywhere else: williamsba Contact
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×