5 Amazing Features I Added To My Wordpress Blog

One of the things I don’t like is keeping my blog static. I love adding new features and new cool graphics very often.

Despite I’m far from being a web developer neither a designer, I love adding new stuff that can make my blog look cool. That being said, I will show you 5 things I added to my blog very easily thanks to the power of the Thesis wordpress theme.

Always-on Social Links

Bloggers use to place the icons linked to their social profiles in the sidebar or in the header. What I don’t like in this approach is that as soon as someone scrolls down to read other articles of your blog, those links will not be accessible anymore.

A very straightforward solution is to make them, let’s say, “always-on“, by inserting them on the left or right side of your blog, making their position fixed.

With Thesis, you can easily do that by using the hook thesis_hook_before_header, adding the following code (for Facebook and Twitter) to your custom_functions.php (replace USERNAME with your usernames on FB and twitter).

The styling is provided in your custom.css file:

.custom #feedback { background: transparent; width: 6.4em; position: fixed; top: 8%; left: 0.25%; }
.custom #feedback a { display: block; text-indent: 24px; height: 3.2em; }
.custom #feedback #twitter { background: url('images/twittericon.png') no-repeat 0 -3.2em; }
.custom #feedback #twitter:hover { background-position: 0 0; }
.custom #feedback #facebook { background: url('images/facebookicon.png') no-repeat 0 -3.2em; }
.custom #feedback #facebook:hover {background-position: 0 0; }

It is clear that you need the PNG icons to be used as the background, that contains both the normal and ‘on hover’ state. You can easily download them by right-clicking on this page.

Feeburner Count

I hate the Feedburner chicklet. I used it on my blog for a while, but I now wanted to make it much better. That said, I decided to display it just over the RSS icon on the right.

It is very easy. The icon is similar to those used above for Facebook and Twitter, and also includes the red “area” to host the number of readers.

To get the number of readers, a call to the Feedburner API is necessary. My blog is using the new Google servers, so this function may not work in case your feed is still on the old feedburner servers.

function feedcount(){

	// We get the data with Curl
	$url	= "https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=lucafilighedducom";
        $ch 	= curl_init();
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_URL, $url);
        $data = curl_exec($ch);
        curl_close($ch);
        if ($data) {
	  preg_match('/circulation=\"([0-9]+)\"/',$data, $matches);
	  if ($matches[1] != 0)
	   $fb['count'] = $matches[1];
	   $fb['lastcheck'] = mktime();
	   update_option("feedburnersubscribecount",$fb);}

	return $fb['count'];
 }

At this point, you just need to display it properly. Here is the CSS:

.custom #feedback #rss_icon { background: url('images/rssicon.png') no-repeat 0 -3.2em; color:#FFFFFF; font-weight: bold; font-family: tahoma; line-height: 2.0em;

And here is the html code (that you can put inside the function SocialIcons above):

<a href="http://feeds2.feedburner.com/YOURFEEDBURNERID" id="rss_icon"><?php echo feedcount(); ?></a>

Here is the final result (I also added LinkedIn and the email subscription option):

Big Header

Graphical header or not? Well, I always preferred using a text header, without any specific graphic customization. But I also used to have a nice header a few months ago with a nice cup of coffee

Anyway, this time I wanted to make it more attractive and colorful and that above is the result. Do you like it?

Adding a graphic header is very easy, and you just need to add the following code to your custom.css file.

.custom #header { height: 129px; position: relative; border-bottom: 1px dotted #cecece; border-top: 0px dotted #cecece; background: url('images/YOURHEADER.png');}

To get the best results, make sure that the “height” specified reflects the actual height of your image.

Colorful Sidebar

Bored by the standard Thesis sidebars? I finally decided to switch to one sidebar only, less crowded in my opinion. Then I liked the idea to have the “highlight” color for the various options and the sidebar widget title color alike. How do you achieve this?

It’s pretty easy. Put the widgets in your sidebar (if not there already) then open your site and right click inside the site to get the source code. Then search for “widget”. At this point you should be able to identify the widgets you have in your sidebar. Each of them is identified by an “id”. Take note of the ids of those you want to tweak.

That said, to obtain the same effect in my sidebar, just open your custom.css and add this code (this is for my widget with id “popular-posts”, yours will be different):

.custom li#text-4 h3 {background-color: #FFD0FF; border-bottom: 2px solid #943c8b;}
.custom li#text-4 a {padding: 0 0 0 0;}
.custom li#text-4 a:hover {background-color: #FFD0FF; border-bottom: 1px solid #943c8b; border-top: 1px solid #943c8b;

.custom li.widget_popular_posts h3 {background-color: #c2f5d2; border-bottom: 2px solid #589665;}

.custom li.widget_popular_posts a:hover {color: #589665; background-color: #c2f5d2; border-top: 1px solid #589665; border-bottom: 1px solid #589665;}

.custom li.widget_popular_posts a {color: #589665; border-bottom: 1px dotted #589665;}

Here is the result, where the color hex code #589665 is a green one (#c2f5d2 is a darker green used for the bottom of the widget’s title):

Retweet Button

If you want to get more chances to make people share your posts on Twitter, a re-tweet button is a must-have. The most famous solution easily available is Tweetmeme. While I love it and used it for a while, I came accross another solution that, unlike Tweetmeme, shows the actual views of your posts through Twitter rather than the number of re-tweets only.

Installing it is very easy. I recommend to put it besides the post title instead of the bottom.

You can follow the instructions provided at this page, but I would rather use this very useful plugin that does all the job.

Not-Invasive Navigation Menu

The default Thesis navigation tabs are on top. Honestly, if you perform some tests with a big graphical header like mine, those tabs don’t look that great. I found a solution by moving them to top of the main sidebar. I love the result, less invasive, but clear.

How to do this? Just add the following lines to your custom_functions.php:

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_sidebars', 'thesis_nav_menu');

BONUS

If you have a Mac and you want to make all the changes described above (and more) as easy as possible, I recommend to get Espresso.

Espresso is the best tool to handle CSS, PHP and HTML files, and it also provides the “upload on save” feature that lets you upload a new version of the files you are modifying just after you save them through a powerful integrated FTP client. No better similar app for Mac, trust me.

Conclusion

I really hope this brief tutorial will help you to get the most out of your Thesis-based Wordpress blog. Thesis is a wonderful and powerful theme/CMS for Wordpress, despite it is supplied with a very basic (but nice) layout. If you want to make your blog stand out of the crowd, you can apply these or other tweaks and it will look, no doubt, awesome and professional.

Related articles by Zemanta

• Got a blog? Do this simple thing to boost your readership. (dougbelshaw.com)
• New & Free Social Media Icon Set For Your Blog (noupe.com)
• Is Simler a new social networking model or something more familiar? (wisdump.com)

Tagged as: thesis theme