![Page 1: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/1.jpg)
Creating Customizable Widgets for
Unpredictable Needs
Amanda Giles
http://www.amandagiles.com/blog/creating-widgets/
WordCamp Maine – Aug 16, 2014 - #wcme14
![Page 2: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/2.jpg)
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
![Page 3: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/3.jpg)
And I have cats!
![Page 4: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/4.jpg)
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?
![Page 5: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/5.jpg)
Who is this talk geared towards?
Developers
![Page 6: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/6.jpg)
But what if I’m not a developer?
![Page 7: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/7.jpg)
![Page 8: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/8.jpg)
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
![Page 9: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/9.jpg)
Why create your own widgets?
![Page 10: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/10.jpg)
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.
![Page 11: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/11.jpg)
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
![Page 12: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/12.jpg)
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)
![Page 13: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/13.jpg)
“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
![Page 14: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/14.jpg)
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.
![Page 15: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/15.jpg)
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
![Page 16: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/16.jpg)
On to the coding!
![Page 17: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/17.jpg)
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
![Page 18: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/18.jpg)
![Page 19: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/19.jpg)
Questions?
![Page 20: Creating Customizable Widgets for Unpredictable Needs Amanda Giles WordCamp Maine – Aug 16, 2014 - #wcme14](https://reader035.vdocuments.site/reader035/viewer/2022062715/56649da75503460f94a93a40/html5/thumbnails/20.jpg)
Thank You!
Find these slides and all related files at:http://www.amandagiles.com/blog/creating-widgets/
www.AmandaGiles.com
@AmandaGilesNH on Twitter
[email protected] – Please feel free to send me feedback or questions