Creating Customizable Widgets for Unpredictable Needs

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

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.

And I have cats!

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?

Who is this talk geared towards?
Developers

But what if I’m not a
developer?

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

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

Widget Examples

Why create your own widgets?

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.

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

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

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)

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

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”

“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

On to the coding!

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

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.

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.

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).

Questions?

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

Creating Customizable Widgets for Unpredictable Needs

More Related Content

What's hot (20)

Similar to Creating Customizable Widgets for Unpredictable Needs (20)

Recently uploaded (20)

Creating Customizable Widgets for Unpredictable Needs