Successfully reported this slideshow.
Your SlideShare is downloading. ×

Cool as a LOLCat: Making Custome Theme Options Easy

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Begeleide inoefening 7.1
Begeleide inoefening 7.1
Loading in …3
×

Check these out next

1 of 55 Ad

Cool as a LOLCat: Making Custome Theme Options Easy

One of the ways that Cheezburger has made the most out of WordPress is through custom theme options. To save ourselves time and headache, we wrote a library to make creating new options super simple. And, we've made the library publicly available to anybody who wants to use it (at http://code.google.com/p/cheezcap/). This talk will walk people through the code and how to use it to make your themes more awesome than ever!

One of the ways that Cheezburger has made the most out of WordPress is through custom theme options. To save ourselves time and headache, we wrote a library to make creating new options super simple. And, we've made the library publicly available to anybody who wants to use it (at http://code.google.com/p/cheezcap/). This talk will walk people through the code and how to use it to make your themes more awesome than ever!

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

Cool as a LOLCat: Making Custome Theme Options Easy

  1. 1. Making Custom Theme Options Easy Developing a Modular Theme for Multiple Site Use
  2. 2. O Hai Canada.
  3. 3. Who are you? ‣ My name is Toby ( @trademark ). A self- taught WordPress / PHP / Front end Developer.
  4. 4. Who are you? ‣ My name is Toby ( @trademark ). A self- taught WordPress / PHP / Front end Developer. ‣ I work for Cheezburger Networks
  5. 5. CheezCAP CHEEZBURGER CUSTOM ADMINISTRATION PANEL
  6. 6. Cheezburger & WordPress
  7. 7. Farm Team OMG MAKE LOTS OF SITES PLZ
  8. 8. Cheezburger & WordPress THEN: ‣ Many self-hosted WordPress.org installations
  9. 9. Cheezburger & WordPress THEN: ‣ Many self-hosted WordPress.org installations ‣ Each had its own customized (read: totally hacked) theme.
  10. 10. Cheezburger & WordPress THEN: ‣ Many self-hosted WordPress.org installations ‣ Each has it’s own customized (read: totally hacked) theme. ‣ Making ~2 new sites a week.
  11. 11. Cheezburger & WordPress THEN:
  12. 12. Cheezburger & WordPress THEN:
  13. 13. Cheezburger & WordPress THEN:
  14. 14. Why this was bad. ‣ Spent half the time as a server admin.
  15. 15. Why this was bad. ‣ Spent half the time as a server admin. ‣ No history or version control of the changes that were made.
  16. 16. Why this was bad. ‣ Spent half the time as a server admin. ‣ No history or version control of the changes that were made. ‣ It looked bad.
  17. 17. Why this was bad. ‣ Spent half the time as a server admin. ‣ No history or version control of the changes that were made. ‣ It looked bad. ‣ Easy to make new sites, difficult to maintain and update them.
  18. 18. SOLUTION.
  19. 19. The “Unified Theme” (.com)
  20. 20. The “Unified Theme” (.com)
  21. 21. Cheezburger & WordPress NOW: ‣ 10 Sites were already running a Unified Theme on WordPress.com VIP
  22. 22. Cheezburger & WordPress THEN:
  23. 23. Cheezburger & WordPress NOW: ‣ 10 Sites were already running a Unified Theme on WordPress.com VIP ‣ One file contained all the customization settings for the sites.
  24. 24. Cheezburger & WordPress NOW: ‣ 10 Sites were already running a Unified Theme on WordPress.com VIP ‣ One file contained all the customization settings for the sites. ‣ PROBLEM: Creating a new site meant re-copying a bunch of code.
  25. 25. SOLUTION.
  26. 26. CheezCAP Cheezburger Custom Administration Panel
  27. 27. CheezCAP What is it? CheezCAP is a library that allows you to easily create an administration panel for your theme. There are 4 main features that make CheezCAP totally awesome.
  28. 28. CheezCAP Getting Started ‣ Add the folder to your theme directory ‣ Add the following to your functions.php file: require_once('cheezcap/ cheezcap.php');
  29. 29. CheezCAP Getting Started ‣ Edit cheezcap/config.php
  30. 30. CheezCAP Getting Started
  31. 31. CheezCAP Getting Started ‣ Once you’ve created the options you want to use, you can start adding them to your theme: if ( $cap->my_boolean_option ) { // do stuff }
  32. 32. CheezCAP Boolean Options Boolean Options serve as basic toggle switches: new BooleanOption( 'Simple Boolean Example', 'This will create a simple true/false switch.’, 'simple_boolean_example', true ),
  33. 33. CheezCAP Boolean Options Boolean Options serve as basic toggle switches: new BooleanOption( 'Simple Boolean Example', <- Title Description -> 'This will create a simple true/false switch.’, 'simple_boolean_example', <- ID of the parameter true <- Initial Value ),
  34. 34. CheezCAP Text Options Text Options can represent alphanumeric strings to be inserted, code, etc. new TextOption( 'Simple Text Exmaple #3', 'This will store a string value.’, 'simple_text_example3', 'Say Cheez!' ),
  35. 35. CheezCAP Dropdown Options Dropdown Options serve as more complex switches: new DropdownOption( 'Inline Options Dropdown Example #3', 'This dropdown creates its options using an inline array.', 'inline_options_dropdown_example3', array( 'Red', 'Yellow', 'Green' ), 2, // Green ),
  36. 36. CheezCAP Work For Me? How Can I Make CheezCAP ‣ Text Options: Google Analytics accounts, site announcements, customized text in your theme ( comment links, page navigation, 404 pages )
  37. 37. CheezCAP Work For Me? How Can I Make CheezCAP ‣ Text Options: Google Analytics accounts, site announcements, customized text in your theme ( comment links, page navigation, 404 pages ) ‣ Boolean Options: Turn Features on and off, beta or A/B testing
  38. 38. CheezCAP Work For Me? How Can I Make CheezCAP ‣ Text Options: Google Analytics accounts, site announcements, customized text in your theme ( comment links, page navigation, 404 pages ) ‣ Boolean Options: Turn Features on and off, beta or A/B testing ‣ Dropdown Options: switching stylesheets or color schemes, enabling or disabling sets of features, more complex logic than boolean
  39. 39. CheezCAP Work For Me? How Can I Make CheezCAP ‣ CheezCAP uses the WordPress options tables.
  40. 40. CheezCAP Work For Me? How Can I Make CheezCAP ‣ CheezCAP uses the WordPress options tables. ‣ Able to specify required user permissions level to edit.
  41. 41. HOLD IT! YOU SAID THERE WERE 4 FEATURES!
  42. 42. CheezCAP The Elusive 4th Feature ‣ Import / Export!
  43. 43. CheezCAP The Elusive 4th Feature
  44. 44. CheezCAP The Elusive 4th Feature
  45. 45. CheezCAP The Elusive 4th Feature
  46. 46. CheezCAP The Elusive 4th Feature
  47. 47. CheezCAP The Elusive 4th Feature
  48. 48. CheezCAP The Elusive 4th Feature
  49. 49. CheezCAP In Summary ‣ Create Text Options, Boolean Options and Dropdown Options. ‣ Use them to control and modify your theme on the fly. ‣ Export your settings to a text file for backup and portability.
  50. 50. Thank you.
  51. 51. Thank you. Special Thanks to: CheezTech WordPress.com VIP Michael Fields - @_mfields Matt Martz - @sivel #WCDEV Organizers
  52. 52. Thank you. @trademark DOWNLOAD CHEEZCAP: http://tmckes.com http://chzb.gr/CheezCAP toby@cheezburger.com http://cheezburger.com

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • Released at WCPDX\n
  • Cheezburger = 400 million pageviews / month.\nLast year&amp;#x2019;s State of the Word ~10% all traffic to WordPress.com\n50 sites\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Tofulator\nIn-house theme (I think)\n
  • Kubrick\n
  • Servers constantly being hammered due to increasing traffic. Thanksgiving example.\n
  • Not using SVN or hg.\n
  • \n
  • \n
  • \n
  • GRATUITOUS ANIMATION SLIDE\n
  • \n
  • \n
  • Starting to port our WordPress.org sites over, quickly became clear that this would become tedious and tiresome.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 5th option here, defaults to false, lets you render the text option as a text area\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Safely stored in the database. Changing your theme doesn&amp;#x2019;t make you lose anything.\n
  • Safely stored in the database. Changing your theme doesn&amp;#x2019;t make you lose anything.\n\nUser level: so only admins can change, etc. Defaults to &amp;#x2018;manage_options&amp;#x2019;\n
  • \n
  • My favorite feature.\n\nGoing to walk you through what this could look like.\n
  • Let&amp;#x2019;s say I already have CheezCAP in my theme. Need to move site or copy.\nExport\n
  • New site after import, using default 2010.\n
  • I enable my theme that&amp;#x2019;s using CheezCAP\n
  • Import the file.\n
  • Go from this.\n
  • To this.\n
  • \n
  • \n
  • Thanks to Matt Martz @sivel, extending and improving the code already\n

×