Staff List WordPress Plugin

Widget widget widget. Sorry I just had to get a few more in there I guess. This WordPress Plugin tutorial is a little bit more advanced then the others but I’ll do my best to break it down to small pieces so that you can edit/customize it to your own needs. First let me tell you what exactly this plugin achieves. I was working on a site and needed to display the Editors/Authors in the sidebar and while I’m sure you may know about wp_list_authors, it would probably do the trick for most situations but some of the Editors needed to have different roles listed and it just wouldn’t be able to work without a lot of extra if’s and else’s. I needed a simple way to input a list and it show up where I need it, so I made this plugin.

Basically what it does is creates a Widget Area named “Staff Lists” and a widget named “Your Staff List Widget”. This way I can have as many “Staff Lists” in the widget area as I want (Editors, Authors, Contributors, Pets and so on) or I can use the staff list widget in any other widget area (sidebar etc). To make my life even easier I made the Staff List widget area show up using a short code so that if I ever wanted to show it in a page or post I could do so easily.

Let’s start with the whole code shall we:


<?php
/*
* Plugin name: Your Staff List Widget
* Plugin URI: http://www.bythegram.ca
* Description: A simple widget to list staff members and their roles
* Version: 0.1
* Author: Adam Graham
*
*/

if (!class_exists("your_stafflist_widget")) {
/**
* Register our Staff List Widget Area
*
*/
register_sidebar( array(
'name' => 'Staff Lists',
'id' => 'stafflist',
'before_widget' => '<div id="%1$s" class="widget-container staff-widget %2$s>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
/**
* Shortcode
*/

function stafflist_func( $atts ){
$html = '<div class="categories staff"><h3>Staff</h3>';
ob_start();
dynamic_sidebar('stafflist');
$html .= ob_get_contents();
ob_end_clean();
$html .= '</div>';
return $html;
}
add_shortcode( 'stafflist', 'stafflist_func' );

class your_stafflist_widget extends WP_Widget {

function your_stafflist_widget() {
$widget_ops = array('classname' => 'your_stafflist_widget', 'description' => 'List staff members on separate lines and separate their name and role with "|"' );
$this->WP_Widget('demo_widget', 'Your Staff List Widget', $widget_ops);
}
/* This is the code that gets displayed on the UI side,
* what readers see.
*/
function widget($args, $instance) {
$listname = $instance['listname'];
                $listclass = $str = strtolower($listname);
$allusers = $instance['user'];
                $users = explode("\n", $allusers);
echo '<ul class="staff '.$listclass.'" >';
echo '<li><h4>'.$listname.'</h4></li>';
foreach ($users as $user) :
$theinfo = explode("|", $user);
$name = $theinfo[0];
$role = $theinfo[1];
if($role != '' ) {
echo '<li><a href="/about/">'.$name.'</a><br /><em>'.$role.'</em></li>';
} else {
echo '<li>'.$name.'</li>';
}
endforeach;
echo '</ul>';
}

function update($new_instance, $old_instance) {
return $new_instance;
}
/* Back end, the interface shown in Appearance -> Widgets
* administration interface.
*/
function form($instance) {

           $listname = esc_attr($instance['listname']);
            $allusers = esc_attr($instance['user']);
?>

        <p>

            <label for="<?php echo $this->get_field_id('listname'); ?>"><?php _e('List Name:','your-theme'); ?></label>
            <input type="text" name="<?php echo $this->get_field_name('listname'); ?>" value="<?php echo $listname; ?>" class="widefat" id="<?php echo $this->get_field_id('listname'); ?>" />

        </p>
        <p>

            <label for="<?php echo $this->get_field_id('user'); ?>"><?php _e('User name|User title','your-theme'); ?></label>
            <textarea name="<?php echo $this->get_field_name('user'); ?>" class="widefat" id="<?php echo $this->get_field_id('user'); ?>"><?php echo $allusers; ?></textarea>

        </p>
<?php
}
}

function demo_widget_init() {
register_widget('your_stafflist_widget');
}
add_action('widgets_init', 'demo_widget_init');

}

$wpdpd = new your_stafflist_widget();

?>

Now if you haven’t built a WordPress Plugin before this might be pretty daunting. I’ll try to break it down a bit.

Step 1:


<?php
/*
* Plugin name: Your Staff List Widget
* Plugin URI: http://www.bythegram.ca
* Description: A simple widget to list staff members and their roles
* Version: 0.1
* Author: Adam Graham
*
*/

if (!class_exists("your_stafflist_widget")) {

This part is pretty straight forward, you plugin name, site, description and author. The if statement is basically what starts the plugin.


/**
* Register our Staff List Widget Area
*
*/
register_sidebar( array(
'name' => 'Staff Lists',
'id' => 'stafflist',
'before_widget' => '<div id="%1$s" class="widget-container staff-widget %2$s>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );

This part sets up the widget area, you’ll notice later I don’t actually use ‘before_widget’ or ‘after_widget’ to their proper potential(you can blame laziness here) so why don’t you do some additional research and improve your version of the plugin later.


/**
* Shortcode
*/

function stafflist_func( $atts ){
$html = '<div class="categories staff"><h3>Staff</h3>';
ob_start();
dynamic_sidebar('stafflist');
$html .= ob_get_contents();
ob_end_clean();
$html .= '</div>';
return $html;
}
add_shortcode( 'stafflist', 'stafflist_func' );

This part sets up the shortcode, this way all I need to do is include


<?php echo do_shortcode("[shortcode]"); ?>

in the template file I wish to use the Staff List widget in (in my case sidebar.php) and it will show up exactly how I’ve built it in the shortcode function.

Now on to the Widget part of the Plugin:


class your_stafflist_widget extends WP_Widget {

function your_stafflist_widget() {
$widget_ops = array('classname' => 'your_stafflist_widget', 'description' => 'List staff members on separate lines and separate their name and role with "|"' );
$this->WP_Widget('demo_widget', 'Your Staff List Widget', $widget_ops);
}

This sets up your widget, it uses WordPress’ default WP_Widget class so browse through the Codex for more details on your $widget_ops


/* This is the code that gets displayed on the UI side,
* what readers see.
*/
function widget($args, $instance) {
$listname = $instance['listname'];
                $listclass = $str = strtolower($listname);
$allusers = $instance['user'];
                $users = explode("\n", $allusers);
echo '<ul class="staff '.$listclass.'" >';
echo '<li><h4>'.$listname.'</h4></li>';
foreach ($users as $user) :
$theinfo = explode("|", $user);
$name = $theinfo[0];
$role = $theinfo[1];
if($role != '' ) {
echo '<li><a href="/about/">'.$name.'</a><br /><em>'.$role.'</em></li>';
} else {
echo '<li>'.$name.'</li>';
}
endforeach;
echo '</ul>';
}

As the comment suggests this portion is what is seen on your website’s viewer’s end. I’ll explain how I built the list part next.


$listclass = $str = strtolower($listname);

First I grabbed the list’s name and made it lower case so that I can apply it to a class without throwing off my designer’s code.


$allusers = $instance['user'];
$users = explode("\n", $allusers);

Here I grab the text that is in the textarea named ‘user’ and with the explode function I make an array breaking it up by each line(\n). So basically if I input this in to the textarea in the admin field:

Adam Graham|Owner
George | Publisher
Frank|Editor
Zelda|Princess
Mario|Plumber
Luigi|Sidekick

It will create an array that looks like this:

$users[0] = Adam Graham|Owner
$users[1] = George | Publisher
$users[2] = Frank|Editor
$users[3] = Zelda|Princess
$users[4] = Mario|Plumber
$users[5] = Luigi|Sidekick

Which is all well and good but let’s take it one more step


foreach ($users as $user) :
$theinfo = explode("|", $user);
$name = $theinfo[0];
$role = $theinfo[1];

Now I have the name and the role as separate values.


if($role != '' ) {
echo '<li><a href="/about/">'.$name.'</a><br />'.$role.'</li>';
} else {
echo '<li>'.$name.'</li>';
}
endforeach;

I want any of the Users that have a role to link to the about page, the above if statement takes care of that problem.

Now we need to make sure the widget is updated every time we save it in the back end


function update($new_instance, $old_instance) {
return $new_instance;
}

Next is the backend code, this is what you will see in the admin side of things when you use the widget in a widget area


/* Back end, the interface shown in Appearance -> Widgets
* administration interface.
*/
function form($instance) {

           $listname = esc_attr($instance['listname']);
            $allusers = esc_attr($instance['user']);
?>

        <p>

            <label for="<?php echo $this->get_field_id('listname'); ?>"><?php _e('List Name:','your-theme'); ?></label>
            <input type="text" name="<?php echo $this->get_field_name('listname'); ?>" value="<?php echo $listname; ?>" class="widefat" id="<?php echo $this->get_field_id('listname'); ?>" />

        </p>
        <p>

            <label for="<?php echo $this->get_field_id('user'); ?>"><?php _e('User name|User title','your-theme'); ?></label>
            <textarea name="<?php echo $this->get_field_name('user'); ?>" class="widefat" id="<?php echo $this->get_field_id('user'); ?>"><?php echo $allusers; ?></textarea>

        </p>
<?php
}
}

It’s pretty simple, an input field for the list name and a text field for the users|roles. I could have made it more advanced but really it didn’t need to be. Simplicity is sometimes the best solution, especially if multiple people are going to be editing it later.

The final code, wraps everything up.


function stafflist_widget_init() {
register_widget('your_stafflist_widget');
}
add_action('widgets_init', 'stafflist_widget_init');

}

$wpdpd = new your_stafflist_widget();

That’s it! Don’t feel like writing any code? Here is the WordPress Plugin download

Here is an example of it working:

*************************************UPDATE****************************************

If you have downloaded the plugin and the styles aren’t working properly, that was my fault sorry. I will be releasing an update tonight or tomorrow but if you can’t wait here is the fix:

in staff_list_plugin.php
find where the current css function is and change it to this:


/**
* The CSS
*/
function StaffList_Styles() {
        wp_enqueue_style( 'StaffList-Plugin-Style', plugin_dir_url( __FILE__ ) . 'stafflist-plugin-style.css', array(), '0.1', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'StaffList_Styles' );

Also find where the current shortcode is being generated and change it to this:


/**
* Shortcode
*/
//


function staff_list_func( $atts ){
extract( shortcode_atts( array(
'title' => '',
'class' => 'ag_staff',
), $atts ) );
$html = '<div class="'.$class.'"><h3>'.$title.'</h3>';
ob_start();
dynamic_sidebar('staff_list');
$html .= ob_get_contents();
ob_end_clean();
$html .= '</div>';
return $html;
}
add_shortcode( 'staff_list', 'staff_list_func' );

Also in the stafflist-plugin-style.css add this:


.ag_staff{ float:left; }

The change in the short code will now let you use the “title” and “class” attributes allowing you to change the staff list’s div class and style it however you wish. Note: the default “title” is now blank as well.