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:

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

Thesis Questions

If you have any questions regarding customizations of the Thesis Theme throughout the series, please let me know via the comments. If I get enough questions, I may add a Part Five of Q&A. And other commentators, if you see a question you can answer, go for it! I’ll add your name & link to the Part Five post, assuming there are enough questions.





Genesis Framework

Like the new design? Kikolani uses a theme called Wintersong Pro on the Genesis Framework from StudioPress. It's great design right out of the box, easy to follow installation instructions, and built-in SEO features makes it perfect for professional bloggers.

If you have several websites and blogs powered by WordPress or design websites for others, then you will want the Pro Plus Package. It gives you lifetime access to all of their current 40+ professional designs plus new themes regularly added to their collection for unlimited use on your own websites and blogs as well as your clients' websites and blogs. Learn more about Pro Plus!




Comments

  1. Mrinmay Bhattacharjee (mrintech) says

    Hey this is an awesome post. Thanks for this :)

    I am going to try this whole thing tomorrow for sure :) Thanks Again :)

  2. says

    I’m so enjoying all your tips for Thesis and finally have the time to explore your site in depth and start my redesign. It’s a bit daunting as both Thesis and WordPress are quite new to me and I have no coding experience at all. But you and many others make it possible and fun – until something fails to work properly. Of course such trials are also good learning experiences.
    .-= carbonboy´s last blog ..Grand Canyon in (primitive) HDR =-.

  3. says

    Thank you for the wonderful tutorial. Although i dont have thesis theme, i love the way people can customize it easily. i always fancy to buy one thesis theme. I have a one question for you. How can you display all the categories in the footer (3 column)?

  4. says

    The Tweetmeme in the byline is perfect. This my be a dumb question but can anyone help me with the code if I don’t want the comments, or the category but I’d also like to add a Google Buzz button and FBshare but like the retweet in the byline?

    I’m dumb when it comes to this stuff. This is the best help I’ve found so far. I’d like to take it one more step and get all three buttons in my byline.
    .-= New from Red Beard 5 Reasons to Beleive that YouTube is the Beginning of the Apocalypse =-.

  5. says

    With Google now counting speed in its algorithm, I decided to eliminate my TweetMeMe button and SexyBookmarks buttons. I figured this would help speed up my page load time. Plus, I don’t get much, if any, traffic from social networks.

    Would manually inserting sociable links slow my page load time any?
    .-= New from Chuck Edwards@Weight Loss Tips Pregnancy Yoga: Exercise for your Baby =-.

  6. says

    Hello GREAT POST :). I am trying to add to my functions file the code and I am geting an error Parse error: syntax error, unexpected ‘}’ in blah blah on line 63. Can you help at all.

    Thanks,

  7. says

    What a great post – I have been using Thesis for about a year now and am just scratching the surface of what I can do with it. I can’t wait to go try these suggestions on my own sites.

    Thanks so much for sharing! :)

  8. says

    I so wanted this to work! You wrote:
    in the custom_functions.php, I add a custom byline function to the Thesis byline item hook using this code: […]

    In my custom_functions.php, I see nothing that says anything about a byline hook. All I have is code for my header. So I just added the code you gave below it followed by the code for the tweetmeme, but nothing showed up. What is it that I am not getting? Anybody?

  9. says

    Firstly thanks mate appreciate it. This is one a a very small number of thesis sites that I have book marked — I come back to this site again and again, thank you for all your hard work.

    Secondly I am using a skin from thesis themes and therefore have no idea on how to adjust the function php and do it that way i.e. by creating a custom page template — because the skin uses a custom page template for a “portfolio style” page.

    That being said would you recommend another way — and why would removing the sidebars via css NOT be optimal ?

    Appreciate your help
    Anuj just posted Improve Google PageRank – The Fastest Ways



This site contains affiliate links, sponsored advertisers, and web analytics tracking code. Email addresses collected on this site will not be sold or given to third parties without your permission. While all attempts to provide accurate and valuable information are always made, the owners and authors of this site are not responsible for the content provided here or linked to on external websites.