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.

Extending & Scaling | Dallas PHP


Published on

WordPress is an effective platform for powering large web sites with various types of content and structured data. In this case study, Randy Hoyt will share from his experience developing a network of shopping center web sites on WordPress for a large property management company. He will explore the newer WordPress 3.x features, its child theme architecture, custom plugins, caching techniques, and cloud hosting infrastructure used to extend and scale WordPress for this project.

Published in: Technology, Business
  • Be the first to comment

Extending & Scaling | Dallas PHP

  1. 1. About Me<br />Web Developer –<br />Extending &Scaling<br />WordPress<br />By Randy Hoyt<br />@randyhoyt#dallasphp<br />
  2. 2. @randyhoyt#dallasphp<br />About Me<br /> Randy Hoyt<br /> @randyhoyt<br /> Presentation<br /> #dallasphp<br />
  3. 3. About Me<br />Web Developer –<br />Case Study<br />@randyhoyt#dallasphp<br />
  4. 4. @randyhoyt#dallasphp<br />Project Background<br />Client: Jones Lang LaSalle (JLL)<br /><ul><li>Retail property management company</li></ul>Requirements:<br /><ul><li>Cost effective platform for 40-50 sites
  5. 5. Consistent templates, allow customization
  6. 6. Content updates by marketing managers
  7. 7. Easily add or remove shopping centers</li></li></ul><li>@randyhoyt#dallasphp<br />Home Page<br />
  8. 8. About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Wireframe 2?<br />A<br /><ul><li>a</li></ul>Store Directory<br />
  9. 9. About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Wireframe 2?<br />A<br /><ul><li>a</li></ul>Store Detail Page<br />
  10. 10. @randyhoyt#dallasphp<br />Content Requirements<br />What types of content? Taxonomies? <br /><ul><li>Pages
  11. 11. Stores Bath & Beauty, Jewelry,</li></ul> Music, Fitness, etc.<br /><ul><li>Events
  12. 12. Job Listings Full-time, Part-time,</li></ul> Seasonal<br /><ul><li>Center Hours</li></li></ul><li>About Me<br />Web Developer –<br />Extending WordPress<br />Functionality<br />@randyhoyt#dallasphp<br />
  13. 13. About Me<br />@randyhoyt#dallasphp<br />Plugin Architecture<br />Hooks: <br /><ul><li>Pre-defined places in WordPress where plugins and themes can inject their own code</li></ul>Two Types of Hooks:<br /><ul><li>Filters – For modifying various pieces of text
  14. 14. Actions – For executing code triggered by an event</li></li></ul><li>About Me<br />@randyhoyt#dallasphp<br />Filters<br /><ul><li>Modify pieces of text that WordPress generates
  15. 15. Example:
  16. 16. the_content()
  17. 17. applied to the post content retrieved from the database, prior to printing on the screen
  18. 18. Function:
  19. 19. add_filter( $tag, $function, $priority, $args );
  20. 20. Applies a function to a filter hook
  21. 21.</li></li></ul><li>Screenshot TwentyTen<br />@randyhoyt#dallasphp<br />WP Tweet Button<br /><br />
  22. 22. Screenshot TwentyTen<br />@randyhoyt#dallasphp<br />198 add_filter('the_content', 'tw_update');<br />578 function tw_update($content) { <br />612 $button = tw_generate_button();<br />621 return $button . $content;<br />634 }<br />
  23. 23. About Me<br />@randyhoyt#dallasphp<br />Actions<br /><ul><li>Execute code when an event in WordPressoccurs
  24. 24. Examples:
  25. 25. init
  26. 26. runs after the WordPress environment has been loaded
  27. 27. admin_head
  28. 28. runs after outputting the common HTML header for admin area
  29. 29. Function:
  30. 30. add_action( $tag, $function, $priority, $args );
  31. 31. Applies a function to a filter hook
  32. 32.</li></li></ul><li>@randyhoyt#dallasphp<br />Custom Post Types<br />WordPress can hold and display many different types of content. Internally, these are all stored in the same place, in the posts table. These are differentiated by a column called post_type.<br />WordPress 3.0 gives you the capability to add your own custom post types.<br />WordPress Codex: Post Types<br /><br />
  33. 33. @randyhoyt#dallasphp<br />add_action( 'init', 'create_post_type' );<br />function create_post_type() {<br />register_post_type( 'imag_store',<br /> array(<br /> 'labels' => array(<br /> 'name' => __('Stores'),<br /> 'singular_name' => __('Store')<br /> ),<br />'public' => true<br /> )<br /> );<br />}<br />WordPress Codex: Post Types > Custom Types<br /><br />
  34. 34. @randyhoyt#dallasphp<br />Custom Taxonomies<br />A taxonomy is a way to group things together. In WordPress, a taxonomy is a grouping mechanism for posts or links or custom post types.<br />WordPress Codex: Taxonomies<br /><br />
  35. 35. @randyhoyt#dallasphp<br />add_action( 'init', 'create_taxonomy' );<br />function create_taxonomy() {<br />register_taxonomy(<br />'imag_store_category',<br />'imag_store',<br /> array(<br /> 'label' => __('Categories')<br /> )<br /> );<br />}<br />WordPress Codex: Taxonomies > Registering a Taxonomy<br /><br />
  36. 36. About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Plugin: Custom Post Type UI<br /><br />
  37. 37. About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Wireframe 2?<br />A<br /><ul><li>a</li></ul>Store Detail Page<br />
  38. 38. @randyhoyt#dallasphp<br />Custom Fields<br />
  39. 39. About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Store Page<br />A<br /><ul><li>A
  40. 40. A</li></ul>Enable?<br /><ul><li>Custom Post Type UI
  41. 41. Custom Field Templates
  42. 42. Custom Meta Boxes
  43. 43. Write Your Own</li></li></ul><li>@randyhoyt#dallasphp<br />Custom Fields<br />Example: “Adding custom field to the post screen”<br /> Stack Overflow:<br />Plugin: Custom Field Template<br /><br />Library: Custom Meta Boxes<br /> <br />
  44. 44. @randyhoyt#dallasphp<br />Custom Themes<br />WordPress Themes are files that work together to create the design and functionality of a WordPress site.<br />A theme consists of the following files:<br /><ul><li>stylesheet(s), JavaScript files, and images
  45. 45. function file (functions.php)
  46. 46. template files</li></ul>WordPress Codex: Theme Development<br /><br />
  47. 47. @randyhoyt#dallasphp<br />Child Themes<br />A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify or add functionality.<br />Making a child theme is very simple. Create a directory, put a properly formatted style.css file in it, and you have a child theme!<br />WordPress Codex: Child Themes<br /><br />
  48. 48. @randyhoyt#dallasphp<br />
  49. 49. @randyhoyt#dallasphp<br />WordPress Codex: Template Hierarchy<br /><br />
  50. 50. About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Displaying Data<br />Page templates<br /><ul><li>A
  51. 51. A</li></ul>single-imag_store.php<br />
  52. 52. About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Displaying Data<br />Page templates<br /><ul><li>A
  53. 53. A</li></ul>archive-imag_store.php, taxonomy-imag_store_category.php<br />
  54. 54. @randyhoyt#dallasphp<br />Page-Specific Custom Fields<br />
  55. 55. @randyhoyt#dallasphp<br />Custom Settings<br />A taxonomy is a way to group things together. In WordPress, a taxonomy is a grouping mechanism for posts or links or custom post types.”<br />WordPress Settings API Tutorial<br /><br />
  56. 56. @randyhoyt#dallasphp<br />Smashing Magazine: Mastering WordPress Shortcodes<br /><br />
  57. 57. @randyhoyt#dallasphp<br />Menu<br />Rearranging the WordPress Admin Menu<br /><ul><li></li></ul>WordPress Custom Post Type Icons<br /><ul><li></li></li></ul><li>About Me<br />Web Developer –<br />Extending to a <br />Network<br />@randyhoyt#dallasphp<br />@randyhoyt#dallasphp<br />
  58. 58. @randyhoyt#dallasphp<br />WordPress Network<br />As of WordPress 3.0, you have the ability to create a network of WordPress sites in a single installation.<br />WordPress Codex: Create A Network<br /><br />
  59. 59. @randyhoyt#dallasphp<br />Network Suggestions<br /><ul><li>Read the Codex Article Thoroughly
  60. 60. Subfolder Configuration
  61. 61. Plugin: WordPress MU Domain Mapping</li></li></ul><li>@randyhoyt#dallasphp<br />Network Suggestions<br /><ul><li>Put Custom Code In A Custom Plugin
  62. 62. Network-Activate Plugins With Caution
  63. 63. Create Additional Site for Shared Content</li></ul> Retailer Information, Social Updatesswitch_to_blog(7);restore_current_blog();<br />
  64. 64. About Me<br />Web Developer –<br />Scaling:<br />Architecture<br />@randyhoyt#dallasphp<br />
  65. 65. @randyhoyt#dallasphp<br />Server Architecture<br />
  66. 66. @randyhoyt#dallasphp<br />Uploaded Images<br />Amazon Simple Storage Service (S3)<br />Amazon S3 is storage for the Internet. It’s a simple storage service that offers software developers highly-scalable, reliable, and low-latency data storage. <br />Plugin: W3 Total Cache<br />Improve site performance and user experience via caching: browser, page, object, database, minify and content delivery network support.<br />Plugin: W3 Total Cache<br /><br />
  67. 67. @randyhoyt#dallasphp<br />Query Caching<br />The query cache can have an astonishingly positive impact on the response time. MySQL stores the query’s result set. The results are extremely fast response times where clients are repetitively executing the same queries.<br />A Practical Look at the MySQL Query Cache<br /><br />
  68. 68. @randyhoyt#dallasphp<br />Page Caching<br />WP Super Cache generates static HTML files from your dynamic WordPress blog. After an HTML file is generated your webserver will serve that file instead of processing the WordPress PHP scripts.<br />Plugin: WP Super Cache<br /><br />
  69. 69. About Me<br />Web Developer –<br />Extending to <br />Mobile<br />@randyhoyt#dallasphp<br />
  70. 70. @randyhoyt#dallasphp<br />Mobile Theme<br />The mobile switcher identifies whether the visitor to the site is mobile or not, and switches between the primary WordPress theme and a mobile theme.<br /><ul><li>Browser Detection
  71. 71. Domain Mapping</li></ul>Plugin: WordPress Mobile Pack<br /><br />
  72. 72. @randyhoyt#dallasphp<br />Mobile Theme<br />Theme: Carrington Mobile<br /><br />
  73. 73. @randyhoyt#dallasphp<br />Think Vitamin: Getting Started With WordPress Custom Menus<br /><br />
  74. 74. @randyhoyt#dallasphp<br />
  75. 75. About Me<br />Web Developer –<br />Some Final<br />Remarks<br />@randyhoyt#dallasphp<br />
  76. 76. @randyhoyt#dallasphp<br />Challenges<br />Plugins in WordPress Network<br /><ul><li>Some plugins simply do not work (wp-content, uploads)
  77. 77. Network activation does not activate site settings
  78. 78. W3 Total Cache’s page caching did not work with subfolders
  79. 79. Sometimes hard-coding configuration into a plugin is the best bet (SMTP)</li></ul>Custom Post Type Data Structure<br /><ul><li>Avoid too many JOINs; running two queries is often the best
  80. 80. Queries can be difficult to write and perform slow</li></li></ul><li>About Me<br />Web Developer –<br />@randyhoyt#dallasphp<br />Displaying Data<br />Page templates<br /><ul><li>A
  81. 81. A</li></li></ul><li>@randyhoyt#dallasphp<br />
  82. 82. @randyhoyt#dallasphp<br />Plugins<br /><ul><li>Gravity Forms + MailChimp
  83. 83. Analytics 360°
  84. 84. Yoast SEO
  85. 85. Yoast Google Analytics
  86. 86. Relevanssi
  87. 87. CSV Importer</li></li></ul><li>About Me<br />Web Developer –<br />Extending &Scaling<br />WordPress<br />By Randy Hoyt<br />@randyhoyt#dallasphp<br />