3 Easy and Highly Requested Thesis Theme Tutorials

by Matt Langford on May 5, 2009 · Comments

Customize the Thesis Wordpress Theme

Due to the popularity of my 10 Ways to Customize Thesis and Tabbed Widget for Thesis Theme posts, I decided to offer a few more easy ways to customize the greatest Wordpress theme known to man (or God, apparently).

If you are a Wordpress user without Thesis, then you should definitely consider purchasing what is easily the most customizable and flexible theme available.

1. Better Backgrounds for Author Replies in Comments

In the recently released Thesis 1.5, support for threaded comments was added. By default, all main author comments have a light blue background to differentiate them from reader comments. Unfortunately, if you were to reply to a reader comment, there is only a blue line to the left of your author comment.

This little bit of CSS (place in custom.css) will make all comments by the author have the same blue background:

.custom dl#comment_list dt.bypostauthor, .custom dl#comment_list dd.bypostauthor>div {background: #E7F8FB none repeat scroll 0 0; padding-top:20px;}

2. Insert TweetMeMe Button Without a Plugin

If you would like to insert the TweetMeMe button (as seen on right) automatically into every new post you create, simply put the following code in custom_functions.php:

function author_avatar() {
if (is_single()) {
    echo '<div style="float:right; padding-left: 5px;"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>';
   }
}
add_action('thesis_hook_before_headline', 'author_avatar');

You can modify the last line in the php to choose the exact placement on your post. You can edit the inline CSS to finetune the positioning.

3. Change the Reply text in Threaded Comments to a Button

If you would like the Reply text in your Thesis Threaded Comments to be more prominent, you can change it to a button using only CSS. To easily accomplish this, simply add the following code to custom.css and change to your liking:

.custom dl#comment_list dd p.reply { margin: 1em 0 1.5em 0; }
.custom dl#comment_list dd p.reply a {background: #2f2c28; color: #FFF;font-size: 11px;font-weight: normal;padding: 4px 6px;text-transform: uppercase;}
.custom dl#comment_list dd p.reply a:hover {background:#46382d; border: 0;}

If you would like to see more tutorials, please let me know in the comments. Also, if you have any problems or questions, don’t hesitate to ask for help!

  • Patsy
    Hey, Matt, Code 1 (for changing the background color in the comment box) works with one small exception: the new color doesn't cover the entire box. The original light blue is peeking from the area just below the author name and just to the left of the inserted comment. Help? (I'm in Thesis 1.6, btw.)
  • Patsy
    Never mind. I actually jut changed it in the style sheet.
  • Thanks for the tweetmeme button tutorial..Implemented it on my blog.
  • Hi Matt..

    Am loving this site!!

    Anyway, I was wondering if there was a code similar for the tweet me code but for facebook, like mashable have..

    Thanks
  • Lee, yes that is very possible... You google "Facebook Share Button."
  • Now in thesis 1.6 the first feature is built-in.
  • You're right, this post is a tad outdated, I'll update soon to reflect that.
  • ken
    Hi,

    How would I go about changing the default comments appearance gray boxes to something that looks like thought balloons? Not sure if that's the right word or not. Thanks.
  • That's a pretty complicated endeavor... Would require lots of css, a few graphics, and a lot of creativity and time!
  • Reply style is very cool. thanks for sharing.
  • Thanks for the tips.. I have a question for you.. is there any way to change the script in tweetmeme so that it tweets @ourtwitterusername
  • Yes, there is a way -- you can find the documentation on the tweetmeme.com site.
  • goldenblogger
    great tutorials, thank you :)
  • thx so much for this tutorial
  • Your blog is the first I look when I need to fix something on my blogs.
    By the way, how to add the facebook share button on the right of the post title and at the buttom of your post, just like you did. Here on this post you told us how to add tweetmeme... to add the facebook share butoon just before tweet meme do I have to add the facebook share button script code before the tweetmeme script code? Can it be that simple or I have to do more customization.
  • All I did was add the facebook share button right after the Tweetmeme button... and made it float right with css. That help you out?
  • ilovearches
    Thanks for these simple but very helpful customizations! I especially and thankful for the Tweetmeme addition!
  • Hey Matt
    this is offtopic but I liked the social networking icon you have on the sidebar
    Can you provide the code for that .
    Thanks :)
  • I'd love to help you with anything I can, but I'm afraid I don't know what you're referencing. I don't have a social networking icon in my sidebar. Am I missing something?
  • I like TweetMeMe plugin. It's one of my personal favorites.
  • Alright I got a question for you, how do you create that yellow box that you regularly use to feature a sentence? i.e. "If you would like to see more tutorials, please let me know in the comments. Also, if you have any problems or questions, don’t hesitate to ask for help!"
  • Checkout Video #7 on my Tutorials for Beginners page.

    Let me know if there's anything else I can help you with!
  • Thanks a lot for these resources :)
  • Hey Matt
    this is offtopic but I liked the social networking icon you have on the sidebar
    Can you provide the code for that .
    Thanks :)
  • I'm assuming you're talking about the icons that appear to the left? If so, I can point you to an excellent tutorial by another Thesis guy named Matt: http://thesistutor.com/how-to-add-killer-social...
  • Thanks for sharing...Helped a lot
  • This is the information I had been looking out for.

    I am planning to purchase the thesis them. So, was looking out for tweaks and tips.

    Thanks for sharing.
  • The tweetmeme worked great....except that it only shows up on the individual post page and not on my home page that lists a few pages. Is there a way to have it show up everywhere?
  • If you want it to show up everywhere, just put everything between the div tags (including the actual div tags) from above into wherever you want it to appear in Thesis OpenHook.
  • How would one do this without OpenHook? Ideally, I'd like to get the compact button to appeart in the byline_item hook on both individual post displays and muti-post displays (homepage, archives, etc.)
  • sondan
    Great. thank you such much for your clear and concise instruction.I am off to give it a go.
    Have a great weekend.
  • sondan
    Thanks for your help. As a Thesis newbie and code novice I .I am loving this blog. My question is could you advise how to code to make all of the author posts some other color than blue please. Blue clashes with my color scheme (Smile)
    Thanks again for your information. It is most appreciated
  • I'm assuming you're talking about author comments? If you are using the default Wordpress commenting system (as opposed to disqus), follow option 1 in this article and change #E7F8FB to the color you'd like to use. That's it!
  • sondan
    Hello - I am a real new user. Only had thesis for a matter of days and am trying to learn how to get it customized. Your site has some of the most understandable tutorials I have seen so far. Thanks. But one question about this post please -- is there a special place I must put the code you provide in the custom css file or may I just add it to the end of the file?
  • You can add it anywhere in the file! The end is just fine...
  • sondan
    great. thank you for your time.

    Regards,
    SonDan (Sonya)
     ~ Old School Music Lover
  • jangeronimo, Gonna start a new thread here because a few people have asked that question. When you install Thesis Openhook (the most recent version), it adds 3 options under appearance. They are: Thesis OpenHook, Thesis Custom Styling, and Thesis Custom Programming.

    The Thesis Openhook and Thesis Custom Programming are both to help you edit custom_functions.php.

    The Thesis Custom Styling Option is for editing custom.css, which is what you need to do.

    Hope that clears it up!
  • hi Matt,
    I use Disqus too for comments.
    Can you tell me how to customise comments look as you did. (This was the look on my theme for comments before i switched to disqus.)

    Thanx
  • Yeah, absolutely I can! First, in your Disqus settings, make sure it is set for the NARROW layout theme. Choose 'inherit' as the font face. Then by manipulating the css (properties listed here) you can change the appearance.

    To see exactly what I did, checkout my custom.css.

    *Much of the credit for this goes to Marko Saric at How To Make My Blog.
  • Hi Matt,

    I integrated Disqus with my blog last night. It went well. But my problem is that the comment section bleeds right into the left and right sides of the comment section. And to me it looks ugly. I want to have a little white space on both sides.

    I'm using Thesis theme, too. If I straighten out that problem, I'd like to have a little color too for my replies to comment. Your comment page looks superb. But first things first. :)
  • I'd love to help, but would you mind posting a link to your site so I can see the problem? (Either that or update your disqus profile so the link will show on your comments.)

    Thanks!
  • Thanks for your prompt reply. ",) My blog is at http://writingtoexhale.com/
  • The basic problem is simply a padding issue. I didn't tear through your css this fast, but I think this simple code will fix your padding problems.

    Add this to custom.css:

    #disqus_thread {padding: 5px;}
  • This is to clarify some points about tweaking Disqus.

    I've downloaded a plugin Open Hook. But I'm at a loss where to insert the
    custom.css you asked me to insert into it: #disqus_thread {padding: 5px;}

    There are many choices - it's a confusing:


    1. thesis_hook_before_comment_meta
    2. thesis_hook_after_comment_meta
    3. thesis_hook_after_comment
    4. thesis_hook_comment_field
    5. thesis_hook_comment_form

    Which do I choose?

    Thanks.
  • Thanks, Matt. Will try this one out. :)
  • Thanx a lot mate. I will just try to implement it on my blog http://www.avinashtech.com. Will leave a feedback here when i am done or get stuck. thanx again.

    Update : Thank you mate. I was able to implement it successfully. Thank you Matt once again.
  • Avinash
    Thanx a ton Matt...but it's still a bit of a bug-bear.

    I'm getting the following error when I use the code.

    Parse error: parse error, expecting `','' or `';'' in C:\xampp\htdocs\wordpress\wp-content\themes\thesis_151\custom\custom_functions.php on line 228

    Any ideas?
  • Are you trying to run Thesis locally? It's attempting to access your hard drive C:\. I'll need to see a website address to check anything further. Also, if your custom_functions.php has 228+ lines of code, it's probably a little bloated!
  • Avinash
    This code is giving me an error:

    function author_avatar() {
    if (is_single()) {
    echo '
    tweetmeme_style = 'compact';
    ';
    }
    }
    add_action('thesis_hook_before_headline', 'author_avatar');


    Any workaround?
  • Sorry, my last comment wasn't very clear -- I aplogize. Your code should look like this:
    function tweet_meme() {
    if (is_single()) {
        echo '<div style="float:right; padding-left: 5px;">
    <script type="text/javascript">  
    tweetmeme_style = 'compact';  
    </script>  
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>  
    </div>';
       }
    }
    add_action('thesis_hook_before_headline', 'tweet_meme');
  • The basic code here to add the button works for me, but the code stops working whenever I try to add the
    <script type="text/javascript">
    tweetmeme_style = 'compact';
    </script>
    OR
    <script type="text/javascript">
    tweetmeme_url = 'http://yoururl.com';
    tweetmeme_source = 'yourtwitter';
    </script>
  • Something must be messed up in another place. For the official documentation (which is basically what I put), you can read this.
  • Avinash
    Thanx so much Matt...I was wondering why inserting 'text/javascript' wasn't working!!!

    Another question....is it possible to have the button both at the beginning AND at the end of the post?One button and one text?
  • Yes it is, the easiest way to do this would be: Insert the code into each spot you'd like it to appear using the Thesis OpenHook plugin. Really is that simple!
  • Avinash
    Loved the Tweetmeme button tip...can you tell me how to integrate the 'small/text' code instead of the regular button? Thanks!!
  • Avinash, to do that, just insert tweetmeme_style = 'compact'; below the first line of the TweetMeMe code above. That's it!
  • JD
    I'm at my wit's end with threaded comments. I want to change the "Reply" link to say something else but I cannot, for the life of me, find it anywhere. I'm using 2.7 with Thesis 1.5. Would you happen to know where I can find that line?

    Thanks!
  • To be honest, I have no idea for that one! I suggest you try asking in the DIYthemes forum or on Twitter (using the #thesiswp hashtag). If you do find the solution, please let me know! Thanks!
  • Good job Matt, and thanks for your clear, clean-look styling tips.

    <abbr>Kate Foy’s last blog post..Friend Feed and Twitter - an experiment</abbr>
  • superb it's worked for me :)
  • Emily
    Thanks so much for all your tutorials! This one in particular helped me understand hooks. Have only had Thesis a few hours and so far so good (and first time using WP as well).
    Thanks again!
  • Hye Matt, thanks. what would you need to add to get the Tweetmeme to show up on the home page too. I've tried adding is_home but it doesn't work correctly. Thanks again!
  • If you want the Tweetmeme button to show up on the homepage, I highly recommend using the Tweetmeme plugin. Here's why: If you put the button on the homepage using the simple coding, the button will show a tweet count for your home page (NOT for the particular post). For instance, say you have 3 posts shown on the front page with the Tweetmeme button... All of those will show counts for the home page and not for each individual post. Using the plugin will alleviate that problem!
  • So this is a bit off topic, and I'm not sure where to look for this question, I'm still new and reading through the tutorials -- but how do I simply add a block of my own code (eg., adsense) to the sidebars?

    <abbr>MoneyEnergy’s last blog post..A Journey Like No Other: Following the Wealth Pilgrim From Adversity to Personal Transformation and Financial Freedom</abbr>
  • Pretty simple actually! Simple go to Appearance > Widgets in your Wordpress admin panel. Add a new "text" widget and paste the code into there! Any html, inline css, javasript will work!
  • Thanks Matt

    I have only been using Thesis for a few days but it's already making my blogging life easier and more exciting.

    I just added the TweetMe. I am telling you that adding these changes through the custom folder instead of digging into the php code is making me much easier to live with too. :)

    Keep em comin'

    <abbr>James Mann’s last blog post..Top 7 Ways to Make Your Link Bait Page Explode With Viral Traffic</abbr>
  • Hi again,

    Ijust wanted to say that I tried the TweetMeMe button and it worked fine. Thanks for sharing this :)

    <abbr>George Serradinho’s last blog post..27 Links to help you with Thesis</abbr>
  • Thanks for the great tips.

    The author color on comment replies was driving me insane. I thought it was just me, but your CSS helped me a lot. Thanks for the info on the reply button, made a difference. You have helped me out a lot with customizing my theme.

    I just love how easy it is to change things on the fly :)
  • I love the new layout of your site. It looks great. Thanks for all the helpful thesis tips.

    I tried adding the code you suggested for the reply text. But nothing appeared. Do I need to install some sort of plug-in for threaded comments first? If yes, what would you recommend?

    Thanks for all the awesome content. I love it. :)

    <abbr>RowdyKittens’s last blog post..RowdyKittens Micro-Business: Thoughts to Ponder</abbr>
  • You don't need a plugin for threaded comments... Just go to Settings > Discussion in the Wordpress 2.7 Admin Panel. Make sure "Enabled Threaded Comments" is selected and choose a number for levels deep (I use 3, many use up to 5). That's it!

    (You do need Thesis 1.5 for it to work correctly.)

    Did that fix it?
  • No problem at all! Let me know if you need anything else!
  • Matt - thank you so much! What an easy fix. LOL - I can't believe I didn't think of that option. Yes I have Thesis 1.5 and love it :) ....

    Thanks again. I truly appreciate your help.

    <abbr>RowdyKittens’s last blog post..RowdyKittens Micro-Business: Thoughts to Ponder</abbr>
  • It had been driving me nuts how to change what you showed in #1. Thanks, Matt!

    As for the TweetMeme plugin vs custom function, is there any benefit to not using a plugin? Decreased load time?

    <abbr>Ari Herzog’s last blog post..Blogging for Authenticity</abbr>
  • Ari, yeah that's about it... Generally speaking, the fewer plugins you use, the better!
  • This is super, I love the reply-style! Thanks for a great blog.

    <abbr>John Ankarström’s last blog post..WordPress Plugin: Align RSS Images</abbr>
blog comments powered by Disqus

Previous post:

Next post: