際際滷

際際滷Share a Scribd company logo

Creating Customizable Widgets for Unpredictable Needs

Download as PPTX, PDF
Amanda Giles
Amanda Giles

A presentation for WordCamp Maine on Aug 16, 2014 about creating custom widgets within WordPress and why it's good to do so.

1 of 20
Download to read offline
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 Im not a developer?
Creating Customizable Widgets for Unpredictable Needs
Why you should stay (even if youre not a developer) Might convince a developer to modify a widget to address your needs Might find a widget thats 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 Were going to create a widget that displays posts. Our first pass, well 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/Contruct 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 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
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
Creating Customizable Widgets for Unpredictable Needs
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

More Related Content

Creating Customizable Widgets for Unpredictable Needs

  • 1. Creating Customizable Widgets for Unpredictable Needs Amanda Giles http://www.amandagiles.com/blog/creating-widgets/ WordCamp Maine Aug 16, 2014 - #wcme14
  • 2. 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
  • 3. And I have cats!
  • 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?
  • 5. Who is this talk geared towards? Developers
  • 6. But what if Im not a developer?
  • 8. Why you should stay (even if youre not a developer) Might convince a developer to modify a widget to address your needs Might find a widget thats close to your needs and hire someone to modify it Might decide to roll up your sleeves and try your hand at coding
  • 9. Why create your own widgets?
  • 10. 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.
  • 11. 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
  • 12. 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)
  • 13. Show Posts widget Were going to create a widget that displays posts. Our first pass, well 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
  • 14. 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.
  • 15. Anatomy of a widget 1. Declaration/Contruct 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 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
  • 16. On to the coding!
  • 17. 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
  • 20. 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