The main reason for me buying Thesis theme was the amount of flexibility it offered me to customize it according to my needs. Before switching to Thesis theme, I spent countless hours finding right theme for my blog and then after finding some theme , work on it to customize it to my needs. But after sometime i get stuck at one place or other, where i find that i cant do this or that as per my needs.
All this happened many times with many times and wasted many hours of mine. Finally i was tempted to buy Thesis though was a bit scared if this also proved to have same problems like previous themes and the price tag of $87 seemed too high. But finally i bought it after reading too many reviews and visiting some live sites running on thesis.
Today, i feel happy about that decision. It would have been better if i had decided to buy it much earlier.
You can check my post about the reasons why decided to buy Thesis theme here . ” Why $87 is too less for Thesis Premium WordPress theme“.
Anyway, here i will talk about some of the customizations i did to my site using open hooks plugins for thesis and using some custom functions along with some CSS modifications to suit my site. Here, i would like to clarify, i am novice in CSS, PHP and HTML too. All customisations were done with help of Thesis Forum’s help ,few other guys like Mattflies and some work by me.
For doing these customisations, you need Open hook plugin for thesis and your custom_functions.php and custom.css files to play with.
1. Adding a Clickable Logo, RSS Icon and Feedburner Counter in header area.
Just see my site logo in header area to see what i am talking about. Just go to open hook plugin and head to thesis_hook_header section.
You need to Tick “Remove Thesis default header” and then paste the code below.
[html]<table><tr><td>
<a href=”http://www.avinashtech.com”><img src=”http://www.avinashtech.com/wp-content/themes/thesis_15/images/logo.png”></a>
</td><td>
<p style=”text-align: center;”><a href=”http://www.avinashtech.com/feed/”><img title=”Subscribe” src=”http://www.avinashtech.com/wp-content/uploads/2009/05/newspaper_feed_128x128.png” alt=”Subscribe Avinashtech” width=”128″ height=”128″ /></a></p>
</td><td>
<p style=”text-align: center;”><a href=”http://feedburner.google.com/fb/a/mailverify?uri=avinashtech&loc=en_US”><img title=”Subscribe by EMail” src=”http://www.avinashtech.com/wp-content/uploads/2009/06/mail-icon-128×128.png” alt=”Subscribe” width=”128″ height=”128″ /></a></p>
</td><td>
<a href=”http://feeds2.feedburner.com/avinashtech”><img style=”border:0″ src=”http://feeds2.feedburner.com/~fc/avinashtech?bg=99CCFF&fg=444444&anim=0″ alt=”” width=”88″ height=”26″ /></a>
</td></tr>
</table> [/html]
I have used the Table function of HTML to create three blocks to put header, Subscribe Icon and the feedburner subscribers counter in the header area.
If you want something different, just play with the code. Also, you need to replace my site locations/files in the code to suit yours. e.g If you want just click-able logo and no other icons you can just delete the other two table blocks.
2. Adding DIGG and Tweetme Buttons on individual Posts beside your Post title.
To place the buttons like those shown above, you need to put the following code in your custom_functions.php file.
You can copy the code text from this text file.
3. Moving Navigation Menu below the Logo or Header.
For doing this, you need to tick “Remove Thesis nav menu” in Thesis open hooks plugin in “Before Header” hook.
After this, go to “After Header” hook in thesis open hook plugin, and insert the following code.
[php]<?php thesis_nav_menu(); ?> [/php]
Also, make sure you tick “Execute PHP on this hook” otherwise nothing will happen.
4. Adding a Advertising Block like mine below Navigation Menu.
If you want a AD block just like mine, you need to put the following code just below code you pasted for nav menu above in the “After Header” hook in thesis open hook plugin.
[html]
<table><tr><td>
YOUR CODE for 160 X 90 ads
</td><td>
YOUR CODE for 728 X 90 ads
</td></tr>
</table>
[/html]
If you want to have a single block , you can edit the code a bit. UPDATE : – I have changed the advertising block here. The code here represents the old bock with 160 X 90 and 728 X 90 ads side by side in one row.
5. Adding Page Numbers below Previous/Next Entries with WP-Page Nav 2.5.
For this to work, you need to have WP-PageNavi plugin installed on your blog. After you activate the plugin, just paste the following code in “Footer section of open hooks plugin.
[php]<div align=”left”>
<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
<br />
</div>[/php]
6.Moving Category in Same line as with post date
For this, you need to use the following code in Custom_functions.php file.
[php]
function add_to_byline() {
echo ‘ in <span>’ . get_the_category_list(‘,’) . ‘</span>’;
}
add_action(‘thesis_hook_byline_item’, ‘add_to_byline’, ’99’);
[/php]
7. Changing Footer and Thesis Attribution with Affiliate link.
You need to paste the following code in your”Footer” section of thesis open hooks plugin.
[html]<p> Get smart with the <a href=”<em>http://avinashtech.com/recommended/thesis</em>”>Thesis WordPress Theme</a> from DIY Themes.</p>[/html]
Also be sure to tick Remove Thesis attribution. Also replace the code above with your own affiliate link. Also , you can have other links for your website there like privacy policy etc.
8. Create solid background with slick borders around your “page” area.
You need to put this code in custom.css file.
[css]body.custom { background: #44443f; }
.custom #container { margin-top: 1.5em; margin-bottom: 1.5em; padding: 0.3em; background: #33332f; border: 0.4em solid #3e3e3a; }
.custom #page { background: #fff; }
[/css]
You can edit the code to suit your needs.
9. Changing Post title Colors.
Paste the following code in custom.css file. Edit the code like colors code to suit your blog.
[css]
.custom .entry-title a {color:#007EC4; }
.custom .entry-title a:hover {color:#5FCBF3; text-decoration: none; background:none;}
.custom .entry-title a:visited { font-weight: normal; }
.custom .headline_area h1, .headline_area h2 {color:#007EC4;}[/css]
10. Changing Link Colors.
Paste the following code in custom.css file. Edit the code like colors code to suit your blog.
[css]
.custom a { color: #007EC4; text-decoration:none; }
.custom a:hover { color:#007EC4;text-decoration:underline; }[/css]
I have tried to put the stuff as much simple as i could. Though i am not good in coding, so all the above stuff is dont with the help of Thesis forum and members like Godhammer, girlie and many more. Leave a comment if you like the post or need any clarifications.
John
October 16, 2010 @ 11:29 PM
Great tut. Helped me greatly.
Avinash
October 17, 2010 @ 6:45 PM
Welcome john. Glad it helped you.