Top authors

For many websites good authors are the most important asset they have. Showcasing them properly can be an important concern and WordPress doesn’t really have anything powerful out-of-the-box. Most of the widgets in the WordPress Plugin Directory are a little basic so I thought it would be a good idea to create something really powerful myself.

In this Weekend WordPress Project I’ll show you how you can create your own – simpler – widget, and then I’ll show you the actual plugin I adopted in the directory and how I added versatile features to make it as flexible as possible for others.

Let’s get started.

Creating Our Own Widget

Let’s start by doing things on our own. This requires creating a plugin and – within it – creating a widget. Here’s the nutshell version of the two linked articles:

1. Create a folder in your wp-content/plugins folder – name it my-author-list
2. Within this folder create a file named my-author-list.php, this will be your main plugin file
3. Paste the following code within it (feel free to replace the author info in there)

At this stage, you have made a fully functional plugin, although it doesn’t do anything yet apart from show up in the backend. Go ahead and activate it now.

Next, let’s paste the skeleton code we’ll need to make a widget. Add the following to the file:

To create a widget you need to extend the WP_Widget with your own sub-class. Within this sub-class you need to define a few functions, which govern how the widgets work. Don’t worry if you don’t know what classes are, the syntax is pretty simple.

All you need to know is what those four functions in there do and you can code within them throughout this exercise. The __construct function basically adds our widget to WordPress. It contains the name, description and a few other details of the widget.

The form function governs the backend form, which shows up when you add the widget to a widget area. This is where you can create inputs for additional options, like how many authors to show, the widget title, and so on.

The widget function takes care of the front-end display. Any code in there will be shown where the widget is supposed to be on our page.

The update function will not necessarily be needed, in fact, in this example we can discard it. This function can process data that is submitted when the widget is saved in the backend. This is great for retrieving API data based on the user input or perhaps transforming the input itself. I’ll discard this for now since we don’t need it.

Adding Widget Options

Let’s stick to the basics for now. A simple widget title, author count, order by and order direction field should do. I like to take the following steps for each.

1. Determine the current value for each field
2. Determine the possible values for dropdowns, radio or checkboxes
3. Output the field

Here’s the code I would use for the three fields we discussed:

The $instance variable holds the current value of the fields, ie: the values the user has saved. In the first block I check those values. If they are empty I set a default for each field. Next up are field options.

For each field where I have a pre-set number of options I create an array for them. This may seem a little redundant for the order field but it makes the field output code more modular and it is also easier to handle the currently selected value.

Next up are the fields. They are perfectly normal HTML fields, the only two things you need to remember are to use the $this->get_field_name and $this->get_field_id methods. These are needed for WordPress to be able to save our data to the correct widget. Other than that, all the code is simple HTML and PHP loops.

At this stage you should be able to drag the widget into any widget area and save its data.

Displaying Our Widget

When displaying a widget you should always be mindful of its surroundings. When a widget are is defined using the reregister_sidebar function a number of parameters can be defined such as before_title and before_widgets. These are passed as the first parameter for our widget function, the second parameter holds the widget’s instance variables, the saved data for the widget.

This is why almost all widget display functions should use the following skeleton code:

This code will display any code that is supposed to precede and succeed the widget as well as any code that should be added before the title, the title itself and any code after the title.

Getting Authors

We’ll be using the get_users function to retrieve our authors, all we need to do is pass our parameters to it. Here’s the code, which should be pasted inside the widget display skeleton where it says “// Main Widget Code Here”:

The $users variable should contain an array of user objects. We now need to cycle through them using a simple loop and display any information we want. Here’s an example which shows the avatar and the user’s name, each linking to the user’s url. Paste the code right below the call to the get_users function.

Now you should see a list of users, which you can control using the settings defined in the widget. It won’t look super awesome, but we can fix that by adding some styling.

Adding Some Style

To add styles the WordPress way we need to enqueue a stylesheet. The best way to do accomplish this is in two steps.