Creating Customizable Widgets for

Unpredictable Needs

Amanda Giles

http://www.amandagiles.com/blog/creating-widgets/

WordCamp Maine – Aug 16, 2014 - #wcme14

Who am I?

• Independent IT Consultant

• WordPress Developer (Themes and Plugins, but mostly themes)

• Run the Seacoast NH WordPress Meetup

• Lover

• Fighter

• And apparently I like playing with PowerPoint…

• Sneezer

• Teacher / Trainer

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

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?

• Offer choices to filter what content shows

• Offer choices about what parts of that content are shown

• Offer style choices

• Provide basic clean styling or no styling

• Be sure to tag elements with id/class so styles can be easily overidden

• Use hooks to allow filtering of output (for developers)

“Show Posts” widget

We’re going to create 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

Disclaimer

This widget is meant for example purposes only. Any resemblance to real widgets, published or in development, is unintentional and purely coincidental. Full security provisions not included. Actual performance may vary. Please use responsibly and at your own risk.

Anatomy of a widget

1. Declaration/ContructTell WordPress some information about your widget and how to identify it

2. User Interface / FormDefine the form that will gather user's choices about the widget instance

3. Update/Save LogicSave the user's choices about the widget instance

4. Widget LogicDisplay the widget instance to the website visitor

5. Register the WidgetTell WordPress to register your widget and include it on the Appearance > Widgets page

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 Admin User Interface/Form

• Add CSS for the widget content on website

• Place hooks to allow filtering on several elements

Questions?

Thank You!

Find these slides and all related files at:

http://www.amandagiles.com/blog/creating-widgets/

www.AmandaGiles.com

@AmandaGilesNH on Twitter

amanda@amandagiles.com – Please feel free to send me feedback or questions