WordPress Plugin: Author Spotlight

By: • Categories: Tutorial WordPress

I’ve been doing a lot of looking into using WordPress as a multi-author website/blog lately.  A few of my clients have requested the need to handle (elegantly) multiple authors, so (being fresh on my mind) I feel inclined to share.

One of the coolest plugin combinations I’ve come across recently is using Author Spotlight and Authors Widget in combination with a custom author template to create a really fun way to showcase authors both in the sidebar, on their own page, and on a single page.  The first two are easy, but the third one takes a small tweak to get things going.

The easiest way I’ve seen is to add a sidebar widget spot to the single post page with this code:

  <ul id=”spotlight”>
            <?php     /* Widgetized sidebar, if you have the plugin installed. */
                    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(2) ) : ?>
            <?php endif; ?>

   </ul>

Then, hit up your functions.php and make the necessary changes to add in a second (third, fourth, etc) sidebar:

<?php
if ( function_exists(‘register_sidebars) )
    register_sidebars(2,array(
        ‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
        ‘after_widget’ => ‘</li>’,
        ‘before_title’ => ‘<h2 class=”widgettitle”>’,
        ‘after_title’ => ‘</h2>’,
    ));

?>

Finally, download and install Author Spotlight and drag it to your second sidebar.

You’ll have to do a bit of styling to get things looking nice (like the screenshot below), so here’s what I recommend:

image

#author_spotlight{
margin: 0;
list-style: none;
border: 1px solid black;
padding: 0 15px;
margin: 10px 0;
min-height: 150px;
}

#author_spotlight i a{
display: none;
}

#author_spotlight img{
float: left;
margin-right: 15px;
}

h4#author_name{
display: none;
}

#author_spotlight h2.widgettitle{
background-image: none !important;
padding-left: 0px !important;
}

Special thanks to Aaron, Mark, and Kelly over at The Periscope Group for letting me (aka, they just launched and I’m sending some traffic their way) take a peek inside his CSS code and use his site as an example.

0 comments