Flexible Featured Post Widget

Working on a number of sites recently, the designs I have been provided with have contained a “featured post” section [widget] in the sidebar. This got me looking in the plugin repository for a widget plugin to feature a post. What I found was lots of plugins but nothing that was flexible enough for me to use. Therefore I went about building my own Featured Post Widget to use on sites in the future.

If you do a search for Featured Post Widget in the WordPress.org plugin repository you end up with a number of different results, of plugins which indicate they do just that. Some I am sure are very good out of the box solutions for many people, however I want something flexible that I an use on all sites where the output markup and the options are perhaps going to need tailoring to the site in question. From a quick inspection of some of the plugins it as clear that I was going to have to write my own.

I started out thinking about what the plugin goals should be and I noted that the plugin must do the following:

  1. Allow a user to easily mark a post as featured through a simple checkbox on the post edit screen
  2. Provide a widget to add a featured post to a sidebar
  3. Allow for showing a random post, or showing the latest post marked as featured
  4. Provide for developers to allow multiple post types to be marked as featured, not just ‘Posts’
  5. Be extensible – allow developers to edit and extend the features and functionality without changing the plugin itself
  6. Work in a number of languages meaning that it could be translatable.

Mark a Post as Featured

Mark a Post as Featured with a Checkbox
Mark a Post as Featured with a Checkbox

The first part was therefore adding a checkbox somewhere on the post edit screen. With most site builds I do these days I include the Custom Meta Box library and use this to add meta boxes to the post edit screen where appropriate. However all that was needed here was a simple checkbox and a label. Therefore it would not be a collection of fields, just the one and so it made no sense to add a new meta box to the edit screen, I may as well add the field to an existing area of the page.

With this in mind I thought the best place for the checkbox was in the Publish meta box, just below the “Publish Immediately Edit” link that is already there. To do this you can utilise the post_submitbox_misc_actions hook in order to add your checkbox by running a callback function on that hook.

In order to save the status of a post (either featured or not) this is stored in post meta (custom fields). Therefore I used the save_post hook in order to save whether or not the checkbox was ticked, as a boolean option in a meta field. We can then use this meta data in a custom WP_Query when querying to get a featured post.

Building the Featured Post Widget

The Flexible Featured Post Widget in the Admin
The Flexible Featured Post Widget in the Admin

If you have never tried to build your own custom WordPress widget before, it is actually quite easy. All you need to do is extend the widget class that WordPress already has, creating your own form(), widget() and update() functions with a few other things as well. These functions declare which fields appear in the widget in the admin and also save those fields, as well as performing a few other checks too.

The widget itself provides a number of options for the user to choose, in terms of what they want to see outputted on the front end regarding the post that is returned as featured.

The widget also required a little jQuery in order to show and hide some of the options. For example the “Featured Image” size option is not visible unless the “Show Featured Image” field is checked. I am relatively new to Javascript and found here that as well as running your jQuery on $(document).ready you also have to run it on $(document).on( 'widget-updated', function() ), otherwise when you click the save button the jQuery no longer does anything which resulted in all the fields showing, regardless of whether their toggle checkbox was checked.

Showing a Random Post

Rather than always showing the latest featured post I wanted to allow the user to randomise the post that was shown. I have provided a simple checkbox in the widget itself where users can check this to show a random post. This means that I can check for this when running the query to get the featured post and if true I can include orderby => rand in the query. This would fetch a random featured post and not the latest one.

Featured Other Post Types

The plugin ships by default to allow only WordPress Posts (the post type of ‘post’) to be assigned as featured. However I wanted to allow developers to easily include other posts in this, so that they also could be marked as featured and would be included in the pool of featured posts to fetch when the widget is used.

To achieve this I simply use a filter named ffpw_post_type. Developers can then filter this, either adding to the existing array (which contains the post type of post) or adding their own new array of post types to use. This is then used when adding the checkbox on the post edit field and also when querying for a featured post.

Extensibility

I am passionate about making plugin and themes etc. extensible, and therefore this was at the core of what I wanted to achieve with this plugin. Let me outline some of the extensibility features with the Flexible Featured Post Widget plugin.

Widget Option Fields

The fields that appear on the widget editor in the admin (see screenshot above) are extendible. By that I mean that you can add fields to the list and also remove any that you may not want to offer as options. This is done through the ffpw_widget_options_fields filter. You pass a new field array to the filtered array including the id, type, label, class and description. If you want to have a select field type you should also pass an options array to. To have a look at the default fields and how they are added take a look in inc/widget-fields.php.

Widget Output

The widget runs a query based on some of the options you choose in the widget editor to fetch the featured post it is going to display. The results of that query are then pass to an action named ffpw_featured_post_output. This action gets passed the widgets args array, the widget instance array and the post object of the featured post returned in the query.

Therefore if you want to completely change the markup of the widget, you an unhook the output function supplied in the plugin, create your own and hook it to the ffpw_featured_post_output action hook.

Other Output Hooks

If the markup is nearly correct and you want to add something in somewhere in the output you can use the actions add after the different sections. For example there is a ffpw_before_featured_post hook and an ffpw_after_featured_post_title to injecting content in these places as well as others. You can also use these to output any additional fields you may have added.

Translatable

All the strings that output in the plugin are made translated using the plugins text domain. I await to see what happens if and when the plugin gets onto WordPress.org in terms of providing translations.

So there we have it a new, flexible featured post widget built for extensibility. I would love to hear your thoughts on it.

View the Plugin on WordPress.org
Contribute, View and Download the Plugin on Github

Published by

Mark Wilkinson

Lead developer & owner at Highrise Digital @highrisedigital. Develops the @wpbroadbean plugins. Former teacher.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s