WordPress Thesis Theme Customization Part Three B: Posts & Social Bookmarking

When browsing other WordPress blogs with awesome themes, I always find myself wondering how someone handled a particular aspect of the layout or functionality. This is especially true with the Thesis Theme, because of the difference in setup due to the Thesis hooks system. So for anyone browsing Kikolani, I wanted to answer the question of “how did you do that” in a new series on WordPress Thesis Theme Customization.

Part Three B: Posts & Social Bookmarking Icons

There are five main customizations that I have done to my single posts.

Custom Byline with Tweetmeme Button

The first customized item is the custom byline, or the details right under the post title, which shows on the main index page, archives, and single post pages. In Thesis Options, under Display, I set the Byline to include “Show author name in post byline,” “Link author names to archives,” and “Show published-on date in post byline.”

Then, in the custom_functions.php, I add a custom byline function to the Thesis byline item hook using this code:

add_action(‘thesis_hook_byline_item’,'custom_byline’);

In the custom byline function, I include the following to add the comment count to the byline, and also include the Tweetmeme controls as well to make re-tweeting articles easy:

function custom_byline() {

?>

in <span class=”url fn”><?php the_category(‘, ‘); ?></span> | <a href=”<?php comments_link(); ?>” class=”url fn”><span class=”url fn”><?php comments_number(’0 Comments’,’1 Comment’,'% Comments’); ?></span></a> <div style=”float:right;margin-top:-19px;margin-right:-10px;”> <script type=”text/javascript”> tweetmeme_url = ‘<?php the_permalink() ?>’; tweetmeme_style = ‘compact’; </script> <script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script> </div>

<?

}

Greet Box

The second customized item is handled by the WP Greet Box plugin, which checks where visitors are coming from, and displays a message focused on a particular social network or a general message about subscribing.

Sociable Links Function

The next three modifications happen in the custom_functions.php. The function is called sociable_links, and I add it to the post footer hook by using the following:

add_action(‘thesis_hook_after_post’, ‘sociable_links’);

I open the function with:

function sociable_links() {

And check to make sure the modifications only happen on single post pages by adding:

if (is_single()) { ?>

The Single Post Ad

The first part of my post footer is the ad. This is done in HTML using the code provided form e-Junkie, currently for the 31 Days to Building a Better Blog by ProBlogger.

The “Enjoy This Post” Section

The second part of my post footer is to invite people who enjoyed the post they just read to bookmark it on social networks or to subscribe so they do not miss out on future posts. For those who are not sure about RSS and social bookmarking, I also include a links to articles on RSS and social bookmarking so they can learn more.

The Social Bookmarking Icons

Lately, my social bookmarking icons have gotten a lot of attention. Most people think it’s a plugin, but it’s actually all manually coded in. I loved the Polaroid Icon Set because it not only showed the network icon, but also the name, for those who may not recognize just the symbol. I had to create a few new icons for Sphinn and Mixx, and edited the Gmail icon for email. Then I modified some code I found for manually inserting sociable links in WordPress. The following is the specific codes used for the icons at the end of this post.

Delicious

<a rel=”nofollow” href=”http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title();?>” title=”Bookmark this post at Delicious” target=”blank”><img src=”delicious.png” border=”0″ alt=”Polariod Delicious Icon” style=”padding:1px;background-color:none;”></a>

Digg

<a rel=”nofollow” href=”http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title();?>” title=”Digg this post” target=”blank”><img src=”digg.png” border=”0″ alt=”Polariod Digg Icon” style=”padding:1px;background-color:none;”></a>

Email

<a rel=”nofollow” href=”mailto:?subject=<?php the_title();?>&body=<?php the_permalink(); ?>” title=”Email this post” target=”blank”><img src=”gmail.png” border=”0″ alt=”Polariod Email Icon” style=”padding:1px;background-color:none;”></a>

Facebook

<a rel=”nofollow” href=”http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php the_title();?>” title=”Share this post on Facebook” target=”blank”><img src=”facebook.png” border=”0″ alt=”Polariod Facebook Icon” style=”padding:1px;background-color:none;”></a>

Mixx

<a rel=”nofollow” href=”http://www.mixx.com/submit?page_url=<?php the_permalink(); ?>&title=<?php the_title();?>” title=”Mixx this post” target=”blank”><img src=”mixx.png” border=”0″ alt=”Polariod Mixx Icon” style=”padding:1px;background-color:none;”></a>

Reddit

<a rel=”nofollow” href=”http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title();?>” title=”Reddit this post” target=”blank”><img src=”reddit.png” border=”0″ alt=”Polariod Reddit Icon” style=”padding:1px;background-color:none;”></a>

Sphinn

<a rel=”nofollow” href=”http://sphinn.com/submit.php?url=<?php the_permalink(); ?>&title=<?php the_title();?>” title=”Sphinn this post” target=”blank”><img src=”sphinn.png” border=”0″ alt=”Polariod Sphinn Icon” style=”padding:1px;background-color:none;”></a>

StumbleUpon

<a rel=”nofollow” href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title();?>” title=”Stumble this post” target=”blank”><img src=”stumbleupon.png” border=”0″ alt=”Polariod StumbleUpon Icon” style=”padding:1px;background-color:none;”></a>

Twitter

<a rel=”nofollow” href=”http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>” title=”Click to send this page to Twitter!” target=”_blank”><img src=”twitter.png” border=”0″ alt=”Polariod Twitter Icon” style=”padding:1px;background-color:none;”></a>

Closing the sociable_links function

Finally, to close the sociable_links function, I use:

<?php }

}

For those not using Thesis, you can simply add the code for the social bookmarking networks you would like to include at the end of your posts into your Single Posts (single.php) template after the <?php the_content(); ?> and before the <?php comments_template(); ?>

About the WordPress Thesis Theme Customization Series

Originally, I had planned on making one comprehensive article about my Thesis Theme customizations, but after only finishing two sections, I realized that this article would be a bit overwhelming if it was a all in one job. So instead, I’m breaking it up into a series:

* Part One: Thesis Options & Design Options

* Part Two: Plug-ins

* Part Three A: Custom Coding of the Background, Header, Navigation Bar & Sidebar

* Part Three B: Posts & Social Bookmarking Icons

So stay tuned for Part Three C to see what custom code and styles have been implemented to customize footer section.