Upload
amanda-giles
View
347
Download
1
Embed Size (px)
Citation preview
Creating Customizable Widgets for
Unpredictable Needs
Amanda Giles
http://bit.ly/boswp1115
WordPress Boston – Nov 30, 2015 - #BostonWP
Who am I?• Independent IT Consultant
• WordPress Developer (Themes and Plugins)
• Run the Seacoast NH WordPress Meetup
• Lover
• Fighter
• Sneezer
• Teacher / Trainer
• My favorite quote is from Calvin & Hobbes:“Virtue isn’t better than vice, it’s just different.
http:
//bi
t.ly
/bos
wp1
115
And I have cats!
http:
//bi
t.ly
/bos
wp1
115
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?
http:
//bi
t.ly
/bos
wp1
115
Who is this talk geared towards?
Developers
http:
//bi
t.ly
/bos
wp1
115
But what if I’m not a developer?
http:
//bi
t.ly
/bos
wp1
115
http:
//bi
t.ly
/bos
wp1
115
Why you should stay(even if you’re not a developer)
• Might convince a plugin 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
http:
//bi
t.ly
/bos
wp1
115
What is a widget?
• A way to take [inputted] criteria from a WordPress user and convert that to into output for a website visitor.
• Drag and Drop widgets into widget areas under Appearance > Widgets
• Collect input [criteria] from user via a form
• When website is viewed, content is displayed to a website visitor
http:
//bi
t.ly
/bos
wp1
115
Widget Examples
http:
//bi
t.ly
/bos
wp1
115
Why create your own widgets?
http:
//bi
t.ly
/bos
wp1
115
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.
http:
//bi
t.ly
/bos
wp1
115
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 http:
//bi
t.ly
/bos
wp1
115
What does that mean?
For Users:Anticipate what choices or variations
the user might want
• Offer choices to filter the content shown• Offer choices about how that content is shown• Offer style choices • Provide basic clean styling or no styling
http:
//bi
t.ly
/bos
wp1
115
What does that mean?
For Developers:Offer ways to adjust the
output where feasible
• Be sure to tag output elements with id/class so styles can be easily overridden• Use hooks to allow filtering of output (for
developers) http:
//bi
t.ly
/bos
wp1
115
Anatomy of a widget
1. Declaration/ConstructTell 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/Output 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
http:
//bi
t.ly
/bos
wp1
115
Widget Code Structure
1. Declaration/Construct
2. User Interface / Form
3. Update/Save Logic
4. Widget/Output Logic
5. Register Widget using Widget Name
0. Widget Name & “extends WP_Widget”
http:
//bi
t.ly
/bos
wp1
115
“Show Posts” widget
We’re going to look at 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
http:
//bi
t.ly
/bos
wp1
115
On to the coding!
http:
//bi
t.ly
/bos
wp1
115
Second Pass
On our second pass through the widget we will add the following touches to flush it out further:• Add CSS for the widget output on website• Add CSS for the Admin User Interface/Form• Place hooks to allow filtering on several
elements
http:
//bi
t.ly
/bos
wp1
115
What is a hook?
A hook is an "event" which allows for additional code to be run when it occurs.
One or more functions can be associated with a hook and they will all run when the hook is triggered.
http:
//bi
t.ly
/bos
wp1
115
Why use hooks?
Hooks are placed within WordPress core, plugins, and themes to allow customization by developers without direct edits of the code.
Hooks are the proper way to alter the default behavior of code which is not yours to edit.
http:
//bi
t.ly
/bos
wp1
115
Types of hooks
Action hooks allow you to run code at a certain point within the code.Examples in WP core include initialization, before main query is run, header or footer of a page/post.
Filter hooks allow you to alter data, content, parameters. A filter hook is passed information to filter and returns it altered (or not).Examples in WP code include displaying content, page/post title, pre-saving content (admin).
http:
//bi
t.ly
/bos
wp1
115
http:
//bi
t.ly
/bos
wp1
115
Questions?
http:
//bi
t.ly
/bos
wp1
115
Thank You!
Find these slides and all related files at:
http://bit.ly/boswp1115
www.AmandaGiles.com
@AmandaGilesNH on Twitter
Please feel free to send me feedback or questions