Advanced Sidebar Widget Styling for Thesis

In this tutorial, you will learn how to create a drag-and-drop-able sidebar text widget that can be styled endlessly.  I’m exaggerating about the endlessly portion, of course, but not much.  This tutorial will also allow you to color individual sidebar titles and their backgrounds – unlike the default wordpress text widget.  You will also learn how to insert images to your text widget and style it. This is part II in the Widget Styling Series. You can find Part I here.
Lets roll.

If blog content is peanut butter then your sidebar is the jelly.  But I see jelly gone bad.  Eww.

If you’re writing for an audience then your blog content is usually all text.  Sure, you’ll throw some images in here and there, but lets agree that your blog content is 90% textual.

How about your sidebar?

In a very non-scientific study, I’ve spent the past few days browsing through some Thesis-based themes built by average people (I mean normal people with limited css experience – definitely not web developers or programmers) and I’ve noticed a pattern – like abstract paintings, people just throw text all over their sidebars.   If I am your reader, where am I supposed to focus?

Many bloggers include the following in their sidebars:

1. Their Twitter Feed
2. Their Categories
3. A blogroll or other links
4. Their Archives
5. And a Tag Cloud

If you have a personal blog just for fun, maybe it’s no big deal to have a bad layout with bits of text streaming down your page like a muddled waterfall of font.  But if you’re trying to get people to buy your product or sign up for your ebook or newsletter, it’s a big problem if your audience doesn’t know what you can offer them.

Text, text, text, text, text.

In my opinion, with all of those words in your sidebar displayed to your reader in the exact same format, they are bound to miss the message that you really want to get across since it is sandwiched above or below your last 5 tweets, which everyone ignores, by the way.

Take a look at some default WP/Thesis sidebar text widgets used in a straight-out-of-the-box Thesis Theme:

Oh you’re still here?  Sorry, I drifted off from looking at all that text.

Highlight the Important Stuff

Make it easy, like, super easy, like SUPER-DUPER obvious where you want your reader to look.

Can you spot what I want the reader to focus on in this next picture?

Sure you can, it’s obviously the Pacific Cruise Line text.  And there are a few reasons why: the font of the title is much larger than the default, there’s color, there’s a border highlighting the content, and the borders are rounded and sexy.  All of those elements will tell the reader LOOK HERE, HOMBRE!  And that’s exactly what they’ll do.

Alright, rant = off.

Want to make your own customized text/video/signup form/flash player widget that is guaranteed to draw your readers towards it?  Copy and paste from the lines below and make it happen!

Ok, begin tutorial now.

Step 1.  Open up your custom_functions.php and custom.css files.

Custom What!?
Not used to editing your custom_functions.php and custom.css files?  That’s OK.  Here is a tutorial to get your going.

In custom_functions.php add this:

/* My Custom Widget */

add_action('widgets_init', 'my_text_widget_init');

function my_text_widget_init() {
register_sidebar_widget('My Custom Widget', 'my_text_widget');
}

function my_text_widget() { ?>
<li class="widget">
<div class="my_widget_header">
<h3><span style="color: #ff0000;">Your Custom Header</span></h3>
</div>
<div id="widget_content">
<img class="widget_icon" src="<?php bloginfo('template_url'); ?>/custom/images/your_pic.jpg" height="100px" alt="" />
<span style="color: #ff0000;">Put Your Content Here</span>
</div>
</li>
<?php
}

You’ll need to replace whats in red with your own image and content.

Step 2.  Open up your custom.css file and drop this somewhere in it:

.custom #widget_content {
background: #fff;
color: #111;
padding-left: 1em;
-moz-border-radius:5px;
-webkit-border-radius:5px ;
border-radius:5px ;
padding: 1em 0em 1em 1em;
border: 4px solid #777777;
}

.custom #widget_content .widget_icon {
float: right;
margin-right: 0.5em;}

.custom li.widget .my_widget_header {
background: #ffcc00;
-moz-border-radius:5px;
-webkit-border-radius:5px ;
border-radius:5px ;
}

.custom li.widget .my_widget_header h3 {
color: #111111;
font-size: 1.5em;
text-align: center;
}

Step 3. In your WP dashboard go to Appearance->Widgets

On the left hand side you should see a list of “Available Widgets.”  Your new one should be there called “My Custom Widget.”  Click “Add” and your custom widget should now appear in your widget column on the right hand side of the page.  You might notice if you click “edit” that there are no options for this widget.  That’s because we defined its contents in our custom_functions.php.  That means that to change both the title, content text and image of the widget you’ll need to edit the custom_functions.php file that you copied and pasted above to add your own content.

That’s All, Folks

I’d love to know how this works for you!  Please send me some links to your site if you decide to implement this so I can see how it turns out.  Also, if you have any problems let me know via email (on my contact page), Twitter or in the comments.  I respond to every single one and will be glad to walk you through the process of editing your custom_functions.php or custom.css files if you get stuck.

The Elusive Blue Text Box
Giving credit: The idea for custom styled widgets came from this thread on the Thesis Support Forums. The widget_init code I used is a modified version of that supplied by girlie in the mentioned thread.

Once again, if you want a primer on Thesis, custom_functions.php and custom.css you can fine them here and here, respectively.  Also, if you don’t need such an elaborate sidebar text widget, here’s a lite version of how to style your text widget.

Update: in the comments below, Neil requested a version of this widget that would only show up on certain pages. Here is the updated custom_functions.php for that functionality:

/* My Custom Widget */

add_action('widgets_init', 'my_text_widget_init');

function my_text_widget_init() {
  register_sidebar_widget('My Custom Widget', 'my_text_widget');
}

function my_text_widget() {
if (is_page('about')) {
?>
<li class="widget">
    <div class="my_widget_header">
        <h3>Your Custom Widget Header</h3>
    </div>
<div id="widget_content">
<img class="widget_icon" src="<?php bloginfo('template_url'); ?>/custom/images/your_pic.jpg" height="100px" alt="" />
Put Your Content Here
</div>
</li>
<?php
}
}

Adding the above to your custom_functions.php file will cause the widget to only show up on your ‘about’ page. Change ‘about’ to whatever page you want to make it work for you.

If you want to find me on Twitter, I'm {@4oclockproject}.