Creating Customizable Widgets for Unpredictable Needs

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

amanda@amandagiles.com

Please feel free to send me feedback or questions