creating customizable widgets for unpredictable needs amanda giles wordcamp maine – aug 16, 2014...
Post on 23-Dec-2015
213 Views
Preview:
TRANSCRIPT
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
top related