I am bored. Yes, I am bored of looking blogs with same “thesis”-ly look. I have no idea why people buy Thesis theme and then just leave it as it is. I mean, Thesis looks good with its default look and feel and I agree that you bought Thesis just so that you don’t want to get your hands dirty with PHP coding. But are you going to be like 57,318 blogs out there who use Thesis as it is? (Curious readers can count those blogs for themselves ;))
If you are Thesis users and want to tweak your blog a little to stand out among other Thesis blogs, here are 6 simple things you MUST implement on your blog.
1. Custom Logo
If you want to market your blog/site, you need to create its brand and a very simple thing to create your brand is to add a clickable custom header logo to your site. Newbies in Thesis are often left flabbergasted to see that Thesis theme doesn’t provide any direct option to set header logo through options panel. But don’t that let you down! It’s really a simple thing to do. Just follow the below steps:
-
- Upload your logo image to custom\\images in your thesis theme folder (thesis_17 in my case) using FTP client like FileZilla
- Add the below code to custom.css file (either through Custom File Editor option in Thesis options or using FTP client)
.custom #logo {background-image: url('images/logo.jpg'); background-repeat: no-repeat; width: 600px; height: 80px; text-indent: -9999px; }
.custom #logo a {width: 600px; height: 80px; display: block; outline: none;}
Make sure you change width and height to match your image size dimensions.
2. Sexy Post Thumbnails
Have you noticed the post images with nice shadow effect on my home page teasers? Adding those images really gives a glamorous look to the post. You can add just little bit of CSS code to the custom.css file to make this happen:
.custom .post_image
{
float:left;
height:auto;
width:200px;
-moz-box-shadow:0 0 20px;
border:1px solid #EEEEEE;
}
.format_text img.block, .format_text img.alignnone
{
margin:0 1em 1.636em 0;
}
This trick is inspired from http://www.serradinho.com/Blog/
3. Category Navigation Bar
In addition to default navigation menu which Thesis provides, you can add second navigation menu listing all the categories in it. It makes more sense to me to display categories in their own menu rather than placing them in either footer or sidebar. You need to make changes at two places:
custom_functions.php
function category_menu()
{ ?>
<ul id="mysecondarymenu">
<?php wp_list_categories('title_li='); ?>
</ul>
<?php
}
add_action('thesis_hook_after_header','category_menu');
custom.css
.custom ul#mysecondarymenu {
border-style: none;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background:#024D87 none repeat scroll 0 0;
width: 100%;
float: left;
}
.custom ul#mysecondarymenu li { float: left; padding: 5px 10px; }
.custom ul#mysecondarymenu li a { font: 1.1em Verdana,Arial,Geneva,Helvetica,sans-serif; color: #ffffff; text-transform: uppercase; }
.custom ul#mysecondarymenu li:hover { background-color: #AD4F1F;}
.custom ul#mysecondarymenu li a:hover {color: #fff;}
This code was adopted from http://hegeeks.com/thesis-theme/thesis-theme-tutorial-how-to-add-a-second-navigation-menu.html
4. Pretty Comments
Comments section is one of the most important yet most ignored section of the page. People spends hours formatting headers and sidebars, but doesn’t even think about changing the default look of comments section where you get to interact with readers. You can use the below code to color up comment section, add frame to avatars, change color-combination for self comments and so on.
custom.css
.custom dl#comment_list
{
border:1px solid #BBBBBB;
}
.custom dl#comment_list dt
{
background-color:#7B8750;
padding-top:0.5em;
padding-top:0.54em;
}
.custom .comment_time a, .edit_comment a
{
color:#DDDDDD;
}
.custom dl#comment_list dl dt.bypostauthor
{
background-color:#AD4F1F;
border-left-width:0.2em;
border-right-width:0;
border-top-width:0;
padding-bottom:0.5em;
padding-left:1.7em;
padding-top:1em;
}
.custom dl#comment_list .bypostauthor
{
background:none repeat scroll 0 0 #EEEEEE;
}
.custom dl#comment_list dl dd .format_text
{
margin-bottom:0;
}
.custom .avatar img
{
border:4px ridge white;
float:left;
margin-right:0.909em;
}
.custom .url
{
color:white;
}
.custom dl#comment_list dd p.reply
{
border-style:outset;
float:right;
margin:1em 0 1.5em;
}
.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;}
5. Personalized Subscribe Me Message
Adding a personalized “subscribe my feeds” box for each page can turn your casual readers into loyal followers (See sample of this on top of this post). I somehow feel that adding RSS subscription option works more above or below the actual post, than in sidebars. I adopted the code for this trick from http://www.howtomakemyblog.com/ decided to spice up the message little bit. I thought it would be nice to add my own image inviting readers to subscribe the feed, taking inspiration from http://thinksimplenow.com. I decided to give it a try and it worked quite well. Here is the code to achieve all this.
custom_functions.php
function subscribe_bubble()
{
if (is_single())
{
?>
<p>
<div class="subscribe_bubble">
<div class="subscribe_image"></div>
Hi there, Do you like reading posts here? If you do, please take a moment to subscribe to <strong><a href='[your feed url]'> RSS Feed </a><strong> or via </strong><a href='[email subscription link]'>E-mail</a></strong> to receive all the FREE updates!
</div>
<?php
}
}
add_action('thesis_hook_before_post', 'subscribe_bubble');
Make sure to replace [your feed url] and [email subscription link] with your RSS feed URL and email subscription URL.
custom.css
/* Subscribe bubble formatting */
.custom .format_text .subscribe_bubble
{
background: #ffffa0 center no-repeat;
border: 2px solid #e5e597;
background-position: 7px 50%;
text-align: left;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
}
.custom .format_text .subscribe_bubble .subscribe_image
{
float: left;
background: url("images/me.jpg") no-repeat scroll 0 0 transparent;
height: 35px;
width: 36px;
padding-right: 10px;
}
Here, me.jpg is the image file which I have uploaded to custom/images folder under Thesis theme. You need to be little proficient in Photoshop to extract the image from background. To properly display the image, you need to set the image dimensions optimum. Mine are 36×35 pixels. Make changes to width and height settings as per your image dimensions.
6. Widgetized Fat Footer
Footer is a really good place to keep all less important but useful items like Calendar, popular tags, Recent comments, Top commentators, Archives, Flickr photo stream, recent tweets or just about anything. However, it would be very cumbersome if you need to make changes to your custom_functions file to add new items to the footer. Kristarella provided a nice tutorial on how to add widgetized footer to thesis blog. Widgetized footer allows you to add anything to the footer just with simple drag-n-drop. Here is what I have implemented on this blog.
custom_functions.php
register_sidebars(1,
array(
'name' => 'Footer',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function custom_footer()
{ ?>
<div id="footer_1" class="sidebar">
<ul class="sidebar_list">
<?php thesis_default_widget(3); ?>
</ul>
</div>
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');
custom.css
.custom #footer_1 {text-align:left; color:#fff; background-color:#333333;}
.custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:left;}
.custom #footer_1 ul.sidebar_list li.widget h3 {color:#222;}
.custom #footer_1 ul.sidebar_list li.widget a {color:#ddd; border-bottom:0;}
.custom #footer_1 ul.sidebar_list li.widget a:hover {color:#8FB72D;}
What Do You Think?
These are few of the Thesis tricks I learned from fellow Thesisers around. What’s your take on this? What new features you implemented for your blog? Which tweak you liked the most? Let me know by leaving the comments. Keep geeking!
Great post. I was looking all over for a solution to this problem and I found it here.
Thanks barry for those kind words!
Hi, i tried your shadow code on my sidebar but it doesnt work
Here’s my code:
.custom .sidebar .widget {
background: url() repeat-y;
border: 0px solid #000;
padding-top: 0em;
margin-top: 0em;
padding-right: 0em;
margin-left: -1em;
-moz-box-shadow: 0 0 20px 0;
border:1px solid #EEEEEE;
}
Yeah some good tips here but it took me about 3 minutes for your website to come up on my browser. Is there anyway in which you can sort this out?
Hay its very interesting and easy.. i changed my thesis look..
Hi Rohit,
That’s nice to know. I am trying to find some more nice things we can implement via Thesis and will post soon.
Nice to meet you harsh, i just installed thesis on my blog and was trying to customize my layout… searching the web i found your blog and its awesome i found what i was looking for. thanks bro keep it up. 🙂
Thanks Ashish for your positive comments. I am glad you found it useful. 🙂
hey thanks i am looking Category Navigation Bar code for my thesis theme and i got it thanks again 🙂
Great! I am glad you found it useful 🙂
hey thanks a lot for such a great post ! currently m modifying my thesis theme so this gonna help me a lot!
I am glad you are finding it useful 🙂
Thanks for sharing these wonderful codes.. and the best thing is that all codes are working..
Thanks Kulwant 🙂
Hi..
Thanks for this tutorial
From long time,I search like this.It was work correctly in my thesis theme.
Love the pretty comments. Put it on my blog. Thanks!!
Hi, i think that i saw you visited my web site so i came to “return
the favor”.I’m attempting to find things to improve my site!I suppose its ok to use a few of your ideas!!
I know this if off topic but I’m looking into starting my own weblog and was curious what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny?
I’m not very web smart so I’m not 100% positive. Any tips or advice would be greatly appreciated.
Cheers
I blog often and I genuinely appreciate your information.
This great article has really peaked my interest.
I am going to book mark your blog and keep checking for new details about once
a week. I subscribed to your Feed too.
Hello would you mind letting me know which webhost you’re using? I’ve loaded your blog
in 3 completely different internet browsers and I must
say this blog loads a lot faster then most. Can
you suggest a good web hosting provider at a honest price?
Cheers, I appreciate it!
This piece of writing is truly a pleasant one it assists
new the web visitors, who are wishing in favor of blogging.
Hello my friend! I wish to say that this post is awesome, great written and include approximately all vital infos.
I would like to see extra posts like this .
Your style is unique in comparison to other folks I’ve read stuff from. Thank you for posting when you have the opportunity, Guess I will just bookmark this web site.