Standardized Loop API The Next Big Thing?
Who Am I? <ul><ul><li>Chris Jean </li></ul></ul><ul><ul><li>chrisjean.com </li></ul></ul><ul><ul><li>@chrisjean </li></ul>...
The Problem <ul><ul><li>There is very little in the way of methods for plugins to interact with a theme at The Loop level....
The Goal <ul><ul><li>To make it easier for themes to provide a foundation of style that plugins can make use of </li></ul>...
Case Study: BuddyPress <ul><ul><li>BuddyPress has a great need to interact with themes at The Loop level. </li></ul></ul><...
The Solution <ul><ul><li>Create a way for themes to allow their The Loop content to be replaced without making the templat...
Following in the Footsteps of Sidebars <ul><ul><li>WordPress already has a great example for a standardized way for themes...
<ul><li>if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?> </li></ul><ul><li>     <li id=&quot;search&quot; class=&quo...
Standard Loop: The Sidebar Way <ul><li><?php get_header(); ?> </li></ul><ul><li><?php if (  ! dynamic_loop()  ) : ?> </li>...
The Solution <ul><ul><li>Create a way for themes to allow their The Loop content to be replaced without making the templat...
Registering Dynamic Loop Handlers <ul><ul><li>Themes use the register_sidebar() function to tell WordPress that a sidebar ...
Registering Dynamic Loop Handlers <ul><li>The registration function should accept: </li></ul><ul><ul><li>A function callba...
register_dynamic_loop_handler <ul><li>function register_dynamic_loop_handler( </li></ul><ul><li>     $function, </li></ul>...
Calling Dynamic Loop Handlers <ul><li>Now all we need is a function that can be used in theme templates to run through the...
dynamic_loop() <ul><li>function dynamic_loop() { </li></ul><ul><li>     global $dynamic_loop_handlers; </li></ul><ul><li> ...
Standardized HTML and Class Structure <ul><li>While being able to replace The Loop is a big step forward, it will be of li...
<ul><li><div class=&quot;loop&quot;> </li></ul><ul><li>     <div class=&quot;loop-title&quot;></div>?     </li></ul><ul><l...
Checking for Standard Theme Support <ul><li>Themes that implement the Standard Loop can use add_theme_support('standard-lo...
Possible Future Improvements <ul><ul><li>Adding more classes that are focused on content. These would be in the vein of &q...
Call to Action <ul><li>Are you a theme developer that wants an easier way to allow plugins to provide content that styles ...
For More Information <ul><li>Go to standardloop.com to get sample code and HTML/Class structures. </li></ul>
Upcoming SlideShare
Loading in...5
×

WordPress Standardized Loop API

3,883

Published on

I gave this presentation at WordCamp Raleigh on May 22, 2011.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,883
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

WordPress Standardized Loop API

  1. 1. Standardized Loop API The Next Big Thing?
  2. 2. Who Am I? <ul><ul><li>Chris Jean </li></ul></ul><ul><ul><li>chrisjean.com </li></ul></ul><ul><ul><li>@chrisjean </li></ul></ul><ul><ul><li>Developer for iThemes </li></ul></ul><ul><ul><li>Core contributor </li></ul></ul><ul><ul><li>Person who wants to make WordPress better for everyone </li></ul></ul>
  3. 3. The Problem <ul><ul><li>There is very little in the way of methods for plugins to interact with a theme at The Loop level. </li></ul></ul><ul><ul><li>Brief history of integration strategies: </li></ul></ul><ul><ul><ul><li>Plugin readme.txt files filled with instructions on integrating function and action calls into theme template files. </li></ul></ul></ul><ul><ul><ul><li>Plugin-provided or custom built page template files. </li></ul></ul></ul><ul><ul><ul><li>Use of shortcodes as injection points for plugin-generated content. </li></ul></ul></ul><ul><ul><ul><li>Direct theme and plugin developer discussions to create specific solutions. </li></ul></ul></ul><ul><ul><li>These solutions simply aren't sustainable. </li></ul></ul>
  4. 4. The Goal <ul><ul><li>To make it easier for themes to provide a foundation of style that plugins can make use of </li></ul></ul><ul><ul><li>To make it easier for plugins to provide output that themes can style </li></ul></ul><ul><ul><li>To do this in a way that does not require the theme to know anything about the plugin and does not require the plugin to know anything about the theme </li></ul></ul>
  5. 5. Case Study: BuddyPress <ul><ul><li>BuddyPress has a great need to interact with themes at The Loop level. </li></ul></ul><ul><ul><li>The BuddyPress solution was to build a theme completely tailored specifically for the plugin. </li></ul></ul><ul><ul><li>The end result is that it is extremely difficult to build a BuddyPress-compatible theme without building a child theme of the BuddyPress Default theme. </li></ul></ul>
  6. 6. The Solution <ul><ul><li>Create a way for themes to allow their The Loop content to be replaced without making the template files more difficult to create or maintain. </li></ul></ul><ul><ul><li>Create a way for plugins to register custom loop handlers that can replace the theme's default loop. </li></ul></ul><ul><ul><li>Create an HTML and class standard that provides a consistent foundation that themes can style </li></ul></ul>
  7. 7. Following in the Footsteps of Sidebars <ul><ul><li>WordPress already has a great example for a standardized way for themes and plugins to coexist and cooperate: Sidebars and Widgets. </li></ul></ul><ul><ul><li>The power of sidebars and widgets hinges off of the dynamic_sidebar function. This function allows themes to provide default content for sidebars that can be replaced by widgets. </li></ul></ul><ul><ul><li>The key is to wrap the default theme content in an if statement that uses the results of dynamic_sidebar as the conditional. </li></ul></ul>
  8. 8. <ul><li>if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?> </li></ul><ul><li>    <li id=&quot;search&quot; class=&quot;widget-container widget_search&quot;> </li></ul><ul><li>        <?php get_search_form(); ?> </li></ul><ul><li>    </li> </li></ul><ul><li>    <li id=&quot;archives&quot; class=&quot;widget-container&quot;> </li></ul><ul><li>        <h3 class=&quot;widget-title&quot;>Archives</h3> </li></ul><ul><li>        <ul> </li></ul><ul><li>            <?php wp_get_archives( 'type=monthly' ); ?> </li></ul><ul><li>        </ul> </li></ul><ul><li>    </li> </li></ul><ul><li>    <li id=&quot;meta&quot; class=&quot;widget-container&quot;> </li></ul><ul><li>        <h3 class=&quot;widget-title&quot;>Meta</h3> </li></ul><ul><li>        <ul> </li></ul><ul><li>            <?php wp_register(); ?> </li></ul><ul><li>            <li><?php wp_loginout(); ?></li> </li></ul><ul><li>            <?php wp_meta(); ?> </li></ul><ul><li>        </ul> </li></ul><ul><li>    </li> </li></ul><ul><li><?php endif; // end primary widget area ?> </li></ul>
  9. 9. Standard Loop: The Sidebar Way <ul><li><?php get_header(); ?> </li></ul><ul><li><?php if ( ! dynamic_loop() ) : ?> </li></ul><ul><li>     <div class=&quot;loop&quot; > </li></ul><ul><li>        <?php if (have_posts()) : ?> </li></ul><ul><li>            <?php while (have_posts()) : the_post(); ?> </li></ul><ul><li>                <div class=&quot;loop-content&quot; > </li></ul><ul><li>                    <div <?php post_class( 'hentry' ) ?> id=&quot;post-<?php the_ID(); ?>&quot;> </li></ul><ul><li>                        <h2 class=&quot;entry-title&quot; ><?php the_title() ?></h2> </li></ul><ul><li>                        <div class=&quot;entry-meta&quot; ><?php the_time('F jS, Y') ?></div> </li></ul><ul><li>                        <div class=&quot;entry-content&quot; > </li></ul><ul><li>                            <?php the_content(); ?> </li></ul><ul><li>                        </div> </li></ul><ul><li>                        <div class=&quot;entry-meta&quot; ><p><?php the_tags() ?></p></div> </li></ul><ul><li>                    </div> </li></ul><ul><li>                </div> </li></ul><ul><li>            <?php endwhile; ?> </li></ul><ul><li>            <div class=&quot;loop-utility&quot; > </li></ul><ul><li>                <div class=&quot;alignleft&quot;><?php next_posts_link() ?></div> </li></ul><ul><li>                <div class=&quot;alignright&quot;><?php previous_posts_link() ?></div> </li></ul><ul><li>            </div> </li></ul><ul><li>        <?php endif; ?> </li></ul><ul><li>    </div> </li></ul><ul><li><?php endif; ?> </li></ul><ul><li><?php get_sidebar(); ?> </li></ul><ul><li><?php get_footer(); ?> </li></ul>
  10. 10. The Solution <ul><ul><li>Create a way for themes to allow their The Loop content to be replaced without making the template files more difficult to create or maintain. </li></ul></ul><ul><ul><li>Create a way for plugins to register custom loop handlers that can replace the theme's default loop. </li></ul></ul><ul><ul><li>Create an HTML and class standard that provides a consistent foundation that themes can style </li></ul></ul>
  11. 11. Registering Dynamic Loop Handlers <ul><ul><li>Themes use the register_sidebar() function to tell WordPress that a sidebar location is available. The arguments give the area a name and configure additional settings. </li></ul></ul><ul><ul><li>What we need is a way of registering callbacks that plugins can use, not named areas that can be displayed on the back-end. We need a different solution. </li></ul></ul>
  12. 12. Registering Dynamic Loop Handlers <ul><li>The registration function should accept: </li></ul><ul><ul><li>A function callback that decides whether or not the loop should be replaced. If the loop is to be replaced, the callback should run code that generates the new loop. </li></ul></ul><ul><ul><li>An array of arguments to be passed to the callback. </li></ul></ul><ul><ul><li>A priority in the same fashion as actions and filters. </li></ul></ul>
  13. 13. register_dynamic_loop_handler <ul><li>function register_dynamic_loop_handler( </li></ul><ul><li>     $function, </li></ul><ul><li>     $args = array(), </li></ul><ul><li>     $priority = 10 </li></ul><ul><li>) { </li></ul><ul><li>    global $dynamic_loop_handlers; </li></ul><ul><li>     </li></ul><ul><li>    $dynamic_loop_handlers[$priority][] = </li></ul><ul><li>         array( $function, $args ); </li></ul><ul><li>} </li></ul>
  14. 14. Calling Dynamic Loop Handlers <ul><li>Now all we need is a function that can be used in theme templates to run through the registered callbacks in order of priority. </li></ul><ul><li>Keeping with the dynamic_sidebar logic, the callback handler should return false if the default loop should be displayed and return true if the default loop is overridden and should not be displayed. </li></ul>
  15. 15. dynamic_loop() <ul><li>function dynamic_loop() { </li></ul><ul><li>    global $dynamic_loop_handlers; </li></ul><ul><li>     </li></ul><ul><li>    if ( empty( $dynamic_loop_handlers ) ) </li></ul><ul><li>        return false; </li></ul><ul><li>     </li></ul><ul><li>    ksort( $dynamic_loop_handlers ); </li></ul><ul><li>     </li></ul><ul><li>    foreach ( $dynamic_loop_handlers as $handlers ) { </li></ul><ul><li>        foreach ( $handlers as $callback ) { </li></ul><ul><li>            list( $function, $args ) = $callback; </li></ul><ul><li>            if ( is_callable( $function ) ) { </li></ul><ul><li>                $result = call_user_func_array( </li></ul><ul><li>                     $function, $args </li></ul><ul><li>                 ); </li></ul><ul><li>                if ( false != $result ) </li></ul><ul><li>                    return true; </li></ul><ul><li>        } </li></ul><ul><li>    } </li></ul><ul><li>     </li></ul><ul><li>    return false; </li></ul><ul><li>} </li></ul>
  16. 16. Standardized HTML and Class Structure <ul><li>While being able to replace The Loop is a big step forward, it will be of limited benefit if the new content uses a completely different structure than the theme. The result will likely be unstyled and will look out of place. </li></ul><ul><li>The final piece that ties everything together is a HTML and Class structure that establishes a foundation of styling that allows plugin content to look like it belongs on the site. </li></ul>
  17. 17. <ul><li><div class=&quot;loop&quot;> </li></ul><ul><li>    <div class=&quot;loop-title&quot;></div>?     </li></ul><ul><li>    <div class=&quot;loop-utility loop-utility-above&quot;></div>* </li></ul><ul><li>    <div class=&quot;loop-meta loop-meta-above&quot;></div>* </li></ul><ul><li>    <div class=&quot;loop-content&quot;> </li></ul><ul><li>        <div class=&quot;loop-utility loop-utility-above&quot;></div>* </li></ul><ul><li>        <div class=&quot;loop-meta loop-meta-above&quot;></div>* </li></ul><ul><li>        <div class=&quot;hentry&quot;>+ </li></ul><ul><li>            <div class=&quot;entry-title&quot;></div>? </li></ul><ul><li>            <div class=&quot;entry-utility entry-utility-above&quot;></div>* </li></ul><ul><li>            <div class=&quot;entry-meta entry-meta-above&quot;></div>* </li></ul><ul><li>            <div class=&quot;entry-summary&quot;></div>? </li></ul><ul><li>            <div class=&quot;entry-content&quot;></div>? </li></ul><ul><li>            <div class=&quot;entry-meta entry-meta-below&quot;></div>* </li></ul><ul><li>            <div class=&quot;entry-utility entry-utility-below&quot;></div>* </li></ul><ul><li>        </div> </li></ul><ul><li>        <div class=&quot;loop-utility loop-utility-above&quot;></div>* </li></ul><ul><li>        <div class=&quot;loop-meta loop-meta-above&quot;></div>* </li></ul><ul><li>        <div id=&quot;comments&quot;>? </li></ul><ul><li>            <div id=&quot;comments-title&quot;></div>? </li></ul><ul><li>            <div class=&quot;commentlist&quot;>? </li></ul><ul><li>                <div class=&quot;comment&quot;></div>* </li></ul><ul><li>            </div> </li></ul><ul><li>            <div id=&quot;respond&quot;> </li></ul><ul><li>                <div id=&quot;reply-title&quot;></div>? </li></ul><ul><li>                <form id=&quot;commentform&quot;></form> </li></ul><ul><li>            </div> </li></ul><ul><li>        </div> </li></ul><ul><li>        <div class=&quot;loop-utility loop-utility-above&quot;></div>* </li></ul><ul><li>        <div class=&quot;loop-meta loop-meta-above&quot;></div>* </li></ul><ul><li>    </div> </li></ul><ul><li>    <div class=&quot;loop-meta loop-meta-below&quot;></div>* </li></ul><ul><li>    <div class=&quot;loop-utility loop-utility-below&quot;></div>* </li></ul><ul><li></div> </li></ul>
  18. 18. Checking for Standard Theme Support <ul><li>Themes that implement the Standard Loop can use add_theme_support('standard-loop') to indicate that they follow the standard. This allows plugins to use current_theme_supports('standard-loop') to determine the support offered by the current theme and take action as needed if it is not available. </li></ul>
  19. 19. Possible Future Improvements <ul><ul><li>Adding more classes that are focused on content. These would be in the vein of &quot;Obligatory WordPress Classes&quot; that can be found in most themes of the past few years. </li></ul></ul><ul><ul><li>Creating a more advanced callback handler that allows for registering criteria for when the callback should be called (thus removing the decision logic from the callback handler). </li></ul></ul>
  20. 20. Call to Action <ul><li>Are you a theme developer that wants an easier way to allow plugins to provide content that styles nicely in your theme? </li></ul><ul><li>Are you a plugin developer that wants to have a better way to add generated content inside the theme and also wants that generated content to automatically take on theme styling? </li></ul><ul><li>Go to loopstandard.com and get involved </li></ul>
  21. 21. For More Information <ul><li>Go to standardloop.com to get sample code and HTML/Class structures. </li></ul>
  1. A particular slide catching your eye?

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

×