A presentation for Boston WordPress Meetup on Nov 30, 2015 about creating custom widgets within WordPress and why it's good to do so.

1. Creating Customizable
Widgets for
Unpredictable Needs
Amanda Giles
http://bit.ly/boswp1115
WordPress Boston – Nov 30, 2015 - #BostonWP

2. Who am I?
• Independent IT Consultant
• WordPress Developer (Themes and Plugins)
• Run the Seacoast NH WordPress Meetup
• Lover
• Fighter
• Sneezer
• Teacher / Trainer
• My favorite quote is from Calvin & Hobbes:
“Virtue isn’t better than vice, it’s just different.
http://bit.ly/boswp1115

3. And I have cats!
http://bit.ly/boswp1115

4. Information Gathering…
• Who here has used a widget?
• Who here has created a widget?
• Who has lost hours trying widget after widget
to find the “right” one?
http://bit.ly/boswp1115

5. Who is this talk geared towards?
Developers
http://bit.ly/boswp1115

6. But what if I’m not a
developer?
http://bit.ly/boswp1115

7. http://bit.ly/boswp1115

8. Why you should stay
(even if you’re not a developer)
• Might convince a plugin developer to modify a
widget to address your needs
• Might find a widget that’s close to your needs
and hire someone to modify it
• Might decide to roll up your sleeves and try your
hand at coding
http://bit.ly/boswp1115

9. What is a widget?
• A way to take [inputted] criteria from a WordPress user
and convert that to into output for a website visitor.
• Drag and Drop widgets into widget areas under
Appearance > Widgets
• Collect input [criteria] from user via a form
• When website is viewed, content is displayed to a
website visitor
http://bit.ly/boswp1115

10. Widget Examples
http://bit.ly/boswp1115

11. Why create your own widgets?
http://bit.ly/boswp1115

12. But seriously…
Creating widgets is a way to control
the content of what's being presented
while giving the user choices about
that content, its presentation, and its
location.
http://bit.ly/boswp1115

13. How do we do this?
For Users:
Anticipate what choices or variations
the user might want
For Developers:
Offer ways to adjust the
output where feasible
http://bit.ly/boswp1115

14. What does that mean?
For Users:
Anticipate what choices or variations
the user might want
• Offer choices to filter the content shown
• Offer choices about how that content is shown
• Offer style choices
• Provide basic clean styling or no styling
http://bit.ly/boswp1115

15. What does that mean?
For Developers:
Offer ways to adjust the
output where feasible
• Be sure to tag output elements with id/class so
styles can be easily overridden
• Use hooks to allow filtering of output (for
developers)
http://bit.ly/boswp1115

16. Anatomy of a widget
1. Declaration/Construct
Tell WordPress some information about your widget and how to identify it
2. User Interface / Form
Define the form that will gather user's choices about the widget instance
3. Update/Save Logic
Save the user's choices about the widget instance
4. Widget/Output Logic
Display the widget instance to the website visitor
5. Register the Widget
Tell WordPress to register your widget and include it on the
Appearance > Widgets page
http://bit.ly/boswp1115

17. Widget Code Structure
1. Declaration/Construct
2. User Interface / Form
3. Update/Save Logic
4. Widget/Output Logic
5. Register Widget using Widget Name
0. Widget Name & “extends WP_Widget”
http://bit.ly/boswp1115

18. “Show Posts” widget
We’re going to look at a widget that displays posts.
Our first pass, we’ll focus on the basic user choices:
• Specify Widget Title (or not)
• Choose one or more specific post IDs
• Choose post type (post, page, custom post types)
• Choose # of posts to show
• Choose what to sort by
• Choose the sort order (ascending, descending)
• Choose whether to show the post thumbnail/featured image
• Choose whether to display the full post content or excerpt
http://bit.ly/boswp1115

19. On to the coding!
http://bit.ly/boswp1115

20. Second Pass
On our second pass through the widget we will
add the following touches to flush it out further:
• Add CSS for the widget output on website
• Add CSS for the Admin User Interface/Form
• Place hooks to allow filtering on several
elements
http://bit.ly/boswp1115

21. What is a hook?
A hook is an "event" which allows for additional
code to be run when it occurs.
One or more functions can be associated with a
hook and they will all run when the hook is
triggered.
http://bit.ly/boswp1115

22. Why use hooks?
Hooks are placed within WordPress core, plugins,
and themes to allow customization by developers
without direct edits of the code.
Hooks are the proper way to alter the default
behavior of code which is not yours to edit.
http://bit.ly/boswp1115

23. Types of hooks
Action hooks allow you to run code at a certain
point within the code.
Examples in WP core include initialization, before
main query is run, header or footer of a page/post.
Filter hooks allow you to alter data, content,
parameters. A filter hook is passed information to
filter and returns it altered (or not).
Examples in WP code include displaying content,
page/post title, pre-saving content (admin).
http://bit.ly/boswp1115

24. http://bit.ly/boswp1115

25. Questions?
http://bit.ly/boswp1115

26. Thank You!
Find these slides and all related files at:
http://bit.ly/boswp1115
www.AmandaGiles.com
@AmandaGilesNH on Twitter
amanda@amandagiles.com
Please feel free to send me feedback or questions