Develop Plugins Like a Pro

Maybe you’ve dabbled in writing WordPress plugins and themes before, or maybe you’ve been too intimidated to get started. Whatever your skill level, there’s always more to learn! In this workshop, I’ll cover the basics of plugin development and share some tips to have you writing plugins like a pro in no time.

Transcript

1. Develop Plugins Like a Pro
2. Alison Barrett Senior Web Engineer at 10up @alisothegeek
3. Agenda 1. Make a plugin 2. Actions & filters 3. Scripts & styles 4. Make a plugin 5. Custom queries 6. Widgets API 7. Make a plugin
4. Not Covered ‣ PHP basics ‣ Version control ‣ Internationalization ‣ WordPress.org plugin submission
5. You Should Have ‣ Local development environment ‣ IDE or text editor open to your plugins folder ‣ Browser open to the Plugins admin page
6. First Plugin Hello WordPress
7. Goals ‣ Show up on the Plugins page
9. <?php   /**    *  Plugin  Name:  Hello  WordPress    */     hello-wordpress.php
11. <?php   /**    *  Plugin  Name:  Hello  WordPress    *  Plugin  URI:    http://example.com/hello-­‐wordpress    *  Description:  Shows  up  on  the  Plugins  page,  and  not  much  else.    *  Author:            Alison  Barrett    *  Author  URI:    http://alisothegeek.com/    *  Version:          1.0    */    
14. Actions and Filters
15. Actions + Filters = Hooks
16. "Hook" into WordPress core functionality
17. action = do something ! filter = do something to something else
18. function  my_function()  {      …   }   add_action(  'init',  'my_function'  );
19. function  my_other_function(  $content  )  {      …      return  $content;   }   add_filter(  'the_content',  'my_other_function'  );
20. function  append_author_bio(  $content  )  {      $bio  =  get_the_author_meta(  'description'  );      return  $content  .  $bio;   }   add_filter(  'the_content',  'append_author_bio'  );
21. Scripts and Styles
22. <?php  wp_head();  ?>
23. wp_head() fires the wp_head action
24. function  myplugin_scripts()  {     ?>     <script  src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>     <script  src="/wp-­‐content/plugins/myplugin/stuff.js"></script>     <?php   }   add_action(  'wp_head',  'myplugin_scripts'  );
25. <script  src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> ‣ another plugin might load jQuery ‣ this might conflict with the WordPress version of jQuery   <script  src="/wp-­‐content/plugins/myplugin/stuff.js"></script> ‣ that might not be where wp-content is
26. never hardcode Javascript or CSS files in your plugin
27. enqueue them instead
28. action: wp_enqueue_scripts ! function: wp_enqueue_script wp_enqueue_style
29. function  myplugin_scripts()  {     wp_enqueue_script(  'jquery'  );     wp_enqueue_script(  'myplugin',  plugins_url(  'stuff.js',  __FILE__  )  );   }   add_action(  'wp_enqueue_scripts',  'myplugin_scripts'  );   !
30. function  myplugin_scripts()  {     wp_enqueue_script(  'jquery'  );     wp_enqueue_script(  'myplugin',  plugins_url(  'stuff.js',  __FILE__  )  );   !   wp_enqueue_style(  'myplugin',  plugins_url(  'stuff.css',  __FILE__  )  );   }   add_action(  'wp_enqueue_scripts',  'myplugin_scripts'  );
31. plugins_url(    'myplugin.css',    __FILE__   ); path within plugin file in plugin root
32. wp_enqueue_script & wp_enqueue_style take 5 parameters
33. wp_enqueue_script(     'myplugin',     plugins_url(  'myplugin.js',  __FILE__  ),     array(  'jquery'  ),     '1.0.0',     true   ); unique ID URL to file dependencies version load in footer unique ID
34. wp_enqueue_style(     'myplugin',     plugins_url(  'myplugin.css',  __FILE__  ),     array(),     '1.0.0',     'screen'   ); unique ID URL to file dependencies version media
35. Benefits of wp_enqueue_script ‣ Each file is only loaded once ‣ Dependencies are always loaded first and in the right order ‣ CSS files are called next to each other so they can load in parallel
36. Second Plugin Authorial
37. Goals ‣ Add an author bio to the end of every post ‣ Use the author bio field from the user's profile ‣ Show the author's Gravatar
39. <?php   /**    *  Plugin  Name:  Authorial    *  Plugin  URI:    http://example.com/authorial    *  Description:  Append  an  author  bio  to  every  post.    *  Author:            Alison  Barrett    *  Author  URI:    http://alisothegeek.com/    *  Version:          1.0    */     authorial.php
41. function  authorial_enqueue_style()  {       wp_enqueue_style(           'authorial',           plugins_url(  'authorial.css',  __FILE__  ),           array(),           '1.0.0'       );   }   add_action(  'wp_enqueue_scripts',  'authorial_enqueue_style'  );
42. function  authorial_add_bio(  $content  )  {       $bio  =  get_the_author_meta(  'description'  );       return  $content  .  $bio;   }   add_filter(  'the_content',  'authorial_add_bio'  );
44. function  authorial_add_bio(  $content  )  {       $bio  =  wpautop(  get_the_author_meta(  'description'  )  );       return  $content  .  $bio;   }   add_filter(  'the_content',  'authorial_add_bio'  );
46. Bonus Lesson: ! Output Buffering
47. echo  '<div  class="authorial-­‐bio">';   echo  '<h3>About  the  Author</h3>';   echo  $bio;   echo  '</div>';
48. <div  class="authorial-­‐bio">      <h3>About  the  Author</h3>      <?php  echo  $bio;  ?>   </div>
49. ob_start();   ?>   <div  class="authorial-­‐bio">      <h3>About  the  Author</h3>      <?php  echo  $bio;  ?>   </div>   <?php   $html  =  ob_get_clean(); PHP PHP HTML
50. function  authorial_add_bio(  $content  )  {       $bio  =  wpautop(  get_the_author_meta(  'description'  )  );       ob_start();   ?>   <div  class="authorial-­‐bio">       <h3>About  the  Author</h3>       <?php  echo  $bio;  ?>   </div>   <?php       $html  =  ob_get_clean();       return  $content  .  $html;   }   add_filter(  'the_content',  'authorial_add_bio'  );
52. $bio  =  wpautop(  get_the_author_meta(  'description'  )  );   $name  =  get_the_author_meta(  'display_name'  );   ob_start();
53. <div  class="authorial-­‐bio">       <h3>About  <?php  echo  $name;  ?></h3>       <?php  echo  $bio;  ?>   </div>
55. Goals ✓ Add an author bio to the end of every post ✓ Use the author bio field from the user's profile ‣ Show the author's Gravatar
56. $bio  =  wpautop(  get_the_author_meta(  'description'  )  );   $name  =  get_the_author_meta(  'display_name'  );   $avatar  =  get_avatar(  get_the_author_meta(  'ID'  ),  100  );   ! ob_start();
57. <div  class="authorial-­‐bio">       <h3>About  <?php  echo  $name;  ?></h3>       <?php  echo  $avatar;  ?>       <?php  echo  $bio;  ?>   </div>
59. .authorial-­‐bio  {     padding:  20px;     margin:  20px  0;     overflow:  hidden;     background:  #f5f5f5;     border:  3px  solid  #e5e5e5;   }   ! .authorial-­‐bio  .avatar  {     float:  left;     margin:  20px  20px  10px  0;   }   ! .authorial-­‐bio  h3  {     margin:  0;   }   ! .authorial-­‐bio  p  {     margin:  10px  0  0;   } authorial.css
61. Custom Queries
62. The Loop
63. query_posts
64. query_posts(  'posts_per_page=3'  );   query_posts(  'cat=13'  );   query_posts(  'orderby=title&order=ASC'  );
65. WP_Query
66. $my_query  =  new  WP_Query(  'orderby=title&order=ASC'  );   ! $my_query  =  new  WP_Query(  array(    'orderby'  =>  'title',    'order'      =>  'ASC',   )  );
68. if  (  have_posts()  )  :      while  (  have_posts()  )  :          the_post();
69. if  (  $my_query-­‐>have_posts()  )  :      while  (  $my_query-­‐>have_posts()  )  :          $my_query-­‐>the_post();
70. Widgets API
71. WP_Widget
72. class  My_Widget  extends  WP_Widget  {   !     public  function  __construct()  {           //  widget  name,  ID,  etc.       }   !     public  function  widget(  $args,  $instance  )  {           //  outputs  the  content  of  the  widget       }   !     public  function  form(  $instance  )  {           //  outputs  the  options  form  on  admin       }   !     public  function  update(  $new_instance,  $old_instance  )  {           //  processes  widget  options  to  be  saved       }   ! }
73. function  __construct()  {       parent::__construct(           'my_widget',           'My  Widget',           array(               'description'  =>  'A  Foo  Widget',           )       );   } unique ID title on Widgets page displays under title on Widgets page
74. public  function  widget(  $args,  $instance  )  {       $title  =  apply_filters(  'widget_title',  $instance['title']  );   !     echo  $args['before_widget'];   !     if  (  !  empty(  $title  )  )  {           echo  $args['before_title']  .  $title  .  $args['after_title'];       }   !     //  Widget  content  here   !     echo  $args['after_widget'];   } $args is set when the sidebar is registered $instance is data from the widget form in the admin
75. public  function  form(  $instance  )  {       if  (  isset(  $instance[  'title'  ]  )  )  {           $title  =  $instance[  'title'  ];       }       else  {           $title  =  'New  title';       }       ?>       <p>         <label  for="<?php  echo  $this-­‐>get_field_id(  'title'  );  ?>">Title:</label>         <input  type="text"                      class="widefat"                      id="<?php  echo  $this-­‐>get_field_id(  'title'  );  ?>"                      name="<?php  echo  $this-­‐>get_field_name(  'title'  );  ?>"                      value="<?php  echo  esc_attr(  $title  );  ?>"  />       </p>       <?php     }
77. public  function  update(  $new_instance,  $old_instance  )  {       $instance  =  array();             $instance['title']  =  strip_tags(  $new_instance['title']  );   !     return  $instance;   }
78. action: widgets_init ! function: register_widget
79. function  register_my_widget()  {          register_widget(  'My_Widget'  );   }   add_action(  'widgets_init',  'register_my_widget'  ); class name
80. Third Plugin Hot Topics
81. Goals ‣ Add a widget that lists popular posts ‣ Use comment count to determine popularity ‣ Allow user to change the number of posts listed ‣ Allow user to choose whether to display comment count
83. <?php   /**    *  Plugin  Name:  Hot  Topics    *  Plugin  URI:    http://example.com/hot-­‐topics    *  Description:  A  widget  that  lists  the  most  discussed  posts.    *  Author:            Alison  Barrett    *  Author  URI:    http://alisothegeek.com/    *  Version:          1.0    */     hot-topics.php
85. function  hot_topics_register_widget()  {       require_once  __DIR__  .  '/class-­‐hot-­‐topics-­‐widget.php';       register_widget(  'Hot_Topics_Widget'  );   }   add_action(  'widgets_init',  'hot_topics_register_widget'  );
86. class  Hot_Topics_Widget  extends  WP_Widget  {   ! } class-hot-topics-widget.php
87. public  function  __construct()  {       parent::__construct(           'hot_topics',           'Hot  Topics',           array(  'description'  =>  'A  list  of  your  most  discussed  posts',  )       );   }
88. public  function  widget(  $args,  $instance  )  {       $title  =  apply_filters(  'widget_title',  $instance['title']  );   !     echo  $args['before_widget'];   !     if  (  !  empty(  $title  )  )           echo  $args['before_title']  .  $title  .  $args['after_title'];   !     echo  $args['after_widget'];   }
89. public  function  widget(  $args,  $instance  )  {       $title  =  apply_filters(  'widget_title',  $instance['title']  );       $hot_topics_query  =  new  WP_Query(  array(           'orderby'                          =>  'comment_count',   !     )  );       echo  $args['before_widget'];   !     if  (  !  empty(  $title  )  )           echo  $args['before_title']  .  $title  .  $args['after_title'];   !     echo  $args['after_widget'];   }
90. public  function  widget(  $args,  $instance  )  {       $title  =  apply_filters(  'widget_title',  $instance['title']  );       $hot_topics_query  =  new  WP_Query(  array(           'orderby'                          =>  'comment_count',           'ignore_sticky_posts'  =>  true,       )  );       echo  $args['before_widget'];   !     if  (  !  empty(  $title  )  )           echo  $args['before_title']  .  $title  .  $args['after_title'];   !     echo  $args['after_widget'];   }
91. public  function  widget(  $args,  $instance  )  {       $title  =  apply_filters(  'widget_title',  $instance['title']  );       $hot_topics_query  =  new  WP_Query(  array(           'orderby'                          =>  'comment_count',           'ignore_sticky_posts'  =>  true,       )  );       if  (  $hot_topics_query-­‐>have_posts()  )  :           echo  $args['before_widget'];   !         if  (  !  empty(  $title  )  )               echo  $args['before_title']  .  $title  .  $args['after_title'];   !         echo  $args['after_widget'];       endif;   }
92.   if  (  $hot_topics_query-­‐>have_posts()  )  :           echo  $args['before_widget'];   !         if  (  !  empty(  $title  )  )               echo  $args['before_title']  .  $title  .  $args['after_title'];   !         echo  '<ul>';           while(  $hot_topics_query-­‐>have_posts()  )  :               $hot_topics_query-­‐>the_post();               $comments  =  get_comment_count(  get_the_ID()  );               ?>               <li><a  href="<?php  the_permalink();  ?>">               <?php  the_title();  ?>               <?php  echo  '  ('  .  $comments['approved']  .  ')';  ?>               </a></li>               <?php           endwhile;           echo  '</ul>';   !         echo  $args['after_widget'];       endif;
93. public  function  form(  $instance  )  {       if  (  isset(  $instance[  'title'  ]  )  )  {           $title  =  $instance[  'title'  ];       }       else  {           $title  =  'Hot  Topics';       }       ?>       <p>         <label  for="<?php  echo  $this-­‐>get_field_id(  'title'  );  ?>">Title:</label>         <input  type="text"                      class="widefat"                      id="<?php  echo  $this-­‐>get_field_id(  'title'  );  ?>"                      name="<?php  echo  $this-­‐>get_field_name(  'title'  );  ?>"                      value="<?php  echo  esc_attr(  $title  );  ?>"  />       </p>       <?php     }
94. public  function  update(  $new_instance,  $old_instance  )  {       $instance  =  array();             $instance['title']  =  strip_tags(  $new_instance['title']  );   !     return  $instance;   }
96. Goals ✓ Add a widget that lists popular posts ✓ Use comment count to determine popularity ‣ Allow user to change the number of posts listed
97.     if  (  isset(  $instance[  'title'  ]  )  )  {           $title  =  $instance[  'title'  ];       }       else  {           $title  =  'Hot  Topics';       }   !     if  (  isset(  $instance['number_of_posts']  )  )  {           $number_of_posts  =  (int)  $instance['number_of_posts'];       }  else  {           $number_of_posts  =  5;       } form()
98.     <p>         <label  for="<?php  echo  $this-­‐>get_field_id(  'title'  );  ?>">Title:</label>         <input  type="text"                      class="widefat"                      id="<?php  echo  $this-­‐>get_field_id(  'title'  );  ?>"                      name="<?php  echo  $this-­‐>get_field_name(  'title'  );  ?>"                      value="<?php  echo  esc_attr(  $title  );  ?>"  />       </p>       <p>         <label  for="<?php  echo  $this-­‐>get_field_id(  'number_of_posts'  );  ?>">Number  of  posts  to  show:</label>         <input  type="text"                      id="<?php  echo  $this-­‐>get_field_id(  'number_of_posts'  );  ?>"                      name="<?php  echo  $this-­‐>get_field_name(  'number_of_posts'  );  ?>"                      value="<?php  echo  esc_attr(  $number_of_posts  );  ?>"                      size="3"  />       </p>
99. public  function  update(  $new_instance,  $old_instance  )  {       $instance  =  array();             $instance['title']  =  strip_tags(  $new_instance['title']  );   !     if  (  !  empty(  $new_instance['number_of_posts']  )  )  {           $instance['number_of_posts']  =  (int)  $new_instance['number_of_posts'];       }  else  {           $instance['number_of_posts']  =  5;       }   !     return  $instance;   }
100. public  function  widget(  $args,  $instance  )  {       $title  =  apply_filters(  'widget_title',  $instance['title']  );       $number_of_posts    =  (int)  $instance['number_of_posts'];   !     $hot_topics_query  =  new  WP_Query(  array(           'orderby'                          =>  'comment_count',           'ignore_sticky_posts'  =>  true,           'posts_per_page'            =>  $number_of_posts,       )  );
103. Goals ✓ Add a widget that lists popular posts ✓ Use comment count to determine popularity ✓ Allow user to change the number of posts listed ‣ Allow user to choose whether to display comment count
104.     <p>         <label  for="<?php  echo  $this-­‐>get_field_id(  'number_of_posts'  );  ?>">Number  of  posts  to  show:</label>         <input  type="text"                      id="<?php  echo  $this-­‐>get_field_id(  'number_of_posts'  );  ?>"                      name="<?php  echo  $this-­‐>get_field_name(  'number_of_posts'  );  ?>"                      value="<?php  echo  esc_attr(  $number_of_posts  );  ?>"                      size="3"  />       </p>       <p>         <input  type="checkbox"                      class="checkbox"                      id="<?php  echo  $this-­‐>get_field_id(  'show_comment_count'  );  ?>"                      name="<?php  echo  $this-­‐>get_field_name(  'show_comment_count'  );  ?>"                      <?php  checked(  $instance['show_comment_count']  );  ?>  />         <label  for="<?php  echo  $this-­‐>get_field_id(  'show_comment_count'  );  ?>">Display  comment  count?</label>       </p>
105. public  function  update(  $new_instance,  $old_instance  )  {       $instance  =  array();             $instance['title']  =  strip_tags(  $new_instance['title']  );   !     if  (  !  empty(  $new_instance['number_of_posts']  )  )  {         $instance['number_of_posts']  =  (int)  $new_instance['number_of_posts'];       }  else  {         $instance['number_of_posts']  =  5;       }   !     if  (  !  empty(  $new_instance['show_comment_count']  )  )  {         $instance['show_comment_count']  =  true;       }  else  {         $instance['show_comment_count']  =  false;       }   !     return  $instance;   }
106.   if  (  $hot_topics_query-­‐>have_posts()  )  :           if  (  !  empty(  $instance['show_comment_count']  )  )  {               $show_comment_count  =  true;           }  else  {               $show_comment_count  =  false;           }   !         echo  $args['before_widget']; widget()
107.         echo  '<ul>';           while(  $hot_topics_query-­‐>have_posts()  )  :               $hot_topics_query-­‐>the_post();               $comments  =  get_comment_count(  get_the_ID()  );               ?>               <li><a  href="<?php  the_permalink();  ?>">               <?php  the_title();  ?>               <?php  if  (  $show_comment_count  )  echo  '  ('  .  $comments['approved']  .  ')';  ?>               </a></li>               <?php           endwhile;           echo  '</ul>';
109. Thank You aliso.me/plugins101 aliso.me/plugins101files ! @alisothegeek