3 Easy and Highly Requested Thesis Theme Tutorials

by Matt Langford on May 5, 2009 · Comments

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!

John Ankarström

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>

Ari Herzog

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>

Matt Langford

Ari, yeah that's about it... Generally speaking, the fewer plugins you use, the better!

RowdyKittens

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>

Matt Langford

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?

RowdyKittens

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>

Matt Langford

No problem at all! Let me know if you need anything else!

George Serradinho

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 :)

George Serradinho

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>

James Mann

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>

MoneyEnergy

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>

Matt Langford

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!

Josh

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!

Matt Langford

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!

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!

P.K.ARUN

superb it's worked for me :)

Kate Foy

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>

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!

Matt Langford

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!

Avinash

Loved the Tweetmeme button tip...can you tell me how to integrate the 'small/text' code instead of the regular button? Thanks!!

Matt Langford

Avinash, to do that, just insert tweetmeme_style = 'compact'; below the first line of the TweetMeMe code above. That's it!

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?

Matt Langford

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

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?

Matt Langford

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');

Berin Szoka

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>

Matt Langford

Something must be messed up in another place. For the official documentation (which is basically what I put), you can read this.

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?

Matt Langford

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

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

Matt Langford

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.

Avinash

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.

jangeronimo

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. :)

Matt Langford

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!

jangeronimo

Thanks for your prompt reply. ",) My blog is at http://writingtoexhale.com/

Matt Langford

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;}

jangeronimo

Thanks, Matt. Will try this one out. :)

jangeronimo

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.

Matt Langford

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!

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?

Matt Langford

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

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

Matt Langford

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

Great. thank you such much for your clear and concise instruction.I am off to give it a go.
Have a great weekend.

flowers

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?

Matt Langford

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.

Berin Szoka

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.)

Suneel

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.

Compute Live

Thanks for sharing...Helped a lot

Harsh Agrawal

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 :)

Matt Langford

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...

Srihari Padmanabhan

Thanks a lot for these resources :)

NHE

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!"

Matt Langford

Checkout Video #7 on my Tutorials for Beginners page.

Let me know if there's anything else I can help you with!

Work at Home Make Money Online

I like TweetMeMe plugin. It's one of my personal favorites.

Grany

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 :)

Matt Langford

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?

ilovearches

Thanks for these simple but very helpful customizations! I especially and thankful for the Tweetmeme addition!

Fati

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.

Matt Langford

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?

ADSL Viettel

thx so much for this tutorial

goldenblogger

great tutorials, thank you :)

Rajesh Kanuri

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

Matt Langford

Yes, there is a way -- you can find the documentation on the tweetmeme.com site.

Riddhi Mohan

Reply style is very cool. thanks for sharing.

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.

Matt Langford

That's a pretty complicated endeavor... Would require lots of css, a few graphics, and a lot of creativity and time!

Tech Maish

Now in thesis 1.6 the first feature is built-in.

Matt Langford

You're right, this post is a tad outdated, I'll update soon to reflect that.

Lee Hughes

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