Creating Customizable Widgets for Unpredictable Needs Amanda Giles http://www.amandagiles.com/blog/creating-widgets/ WordCamp Maine – Aug 16, 2014 - #wcme14

  • View
    213

  • Download
    0

Embed Size (px)

Transcript

  • Slide 1
  • Creating Customizable Widgets for Unpredictable Needs Amanda Giles http://www.amandagiles.com/blog/creating-widgets/ WordCamp Maine Aug 16, 2014 - #wcme14
  • Slide 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
  • Slide 3
  • And I have cats!
  • Slide 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?
  • Slide 5
  • Who is this talk geared towards? Developers
  • Slide 6
  • But what if Im not a developer?
  • Slide 7
  • Slide 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
  • Slide 9
  • Why create your own widgets?
  • Slide 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.
  • Slide 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
  • Slide 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)
  • Slide 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
  • Slide 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.
  • Slide 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
  • Slide 16
  • On to the coding!
  • Slide 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
  • Slide 18
  • Slide 19
  • Questions?
  • Slide 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