How To Change Background Color of Header in Thesis
Thesis users are increasing day by day and new thesis users are always trying to customize their thesis theme in best way, so they want to change the default background color of header in thesis.
I got few mails asking how to change color of header in thesis, as all of us know thesis is best SEO optimized and most customizable theme framework for wordpress so changing the color of header in thesis is not tough.
The image below shows default background color of header in thesis wordpress theme.
Below are the steps to change background color of header in Thesis theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Choose custom_functions.php and click Ediit selected file button
- Paste the code below in the file editor of custom.css file
.custom #header {
background-color:#FF5208;
}
- Then Click The Big Ass Save button and you are done.
In the code above replace #FF5208; with the color code you want in the background color of header in thesis.The image below shows changed background color of header in thesis wordpress theme.
Following the steps above will change the background color of header in Thesis wordpress theme as shown in the above image.
How to Add Clickable Header Image in Thesis
As many or all of us know Thesis is the best SEO optimized and most customizable theme framework for wordpress, as it's most customizable them framework for thesis then it's very easy to customize thesis either it's some minor customization or major customization every thing is easy with Thesis.
I got few mails asking how to add clickable header image in thesis, so I made the decision to come up with a post describing how to add clickable header image in Thesis, so this will be much useful for those who are new to Thesis and want to get a nice looking header image in their blog using thesis.
To add header image in Thesis wordpress theme you will have to login to your FTP account via any FTP client and upload the header image to custom/images folder in Thesis wordpress theme folder.
Below are the steps to add clickable header image in Thesis theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Make new folder named images in custom folder within Thesis Theme Folder in wp-content/themes/ folder
- Upload the header image in images folder in folder named images in custom folder within Thesis Theme Folder in wp-content/themes/ folder
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Paste the code below in the file editor of custom.css file
.custom #header #logo a { display: block; height: 75px; width: 300px; background: url(images/logo.gif) no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; } .custom #header { padding: 0; }
.custom #header {border-bottom:none;}
- Then Click The Big Ass Save button and you are done.
In the code above replace logo.gif with your own header image name (with extension) and also change height and width with your own header image height and width.If you provide wrong height and width the header image may not appear.
Hope this will be helpful for many of the people and if you want to know more tips and tricks about thesis customization browse thesis customization category of WpZest.
How to Place Adsense Revenue Sharing Code In Thesis
If you are running a wordpress powered blog, using Thesis theme and want to implement adsense revenue sharing on your blog then there are so many plugins available for implementing adsense revenue sharing, the best I found and myself using on this blog is Author Advertising Plugin you can read my Author Advertising Plugin Review.
Adding adsense revenue sharing code in Thesis is a very easy task even for those who are new to Thesis.
Below are the steps to place adsense revenue sharing code in Thesis theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Choose custom_functions.php and click Ediit selected file button
- Paste the code below in the file editor
//***************************************************************************
/* Adsense Revenue Sharing Code Before Content in Single Post */
function revenue_sharing_before () {
if (is_single()) { ?>
<p><?php if (function_exists('kd_template_ad')) { kd_template_ad(1); } ?>
</p>
<?php
}
}
add_action('thesis_hook_byline_item', 'revenue_sharing_before');
//***************************************************************************
- Then Click The Big Ass Save button and you are done.
Always use appropriate media unit ID.If you follow the steps mentioned above you will successfully place the revenue sharing code in Thesis.
What People Are Searching for on Technology:
google adsense program.,How to Add Pagination in Thesis
We have already covered many thesis tutorials and today we have brought a cool new tutorial for adding pagination in Thesis.Thesis does not have pagination it comes with previous entries and next entries links on homepage.
Pagination helps to decrease bounce rate of website or blog and thesis does not comes with pagination so it's not good in the terms of SEO so here is how to add pagination in Thesis.
You will need Wp Page Navigation Plugin to add pagination in Thesis wordpress theme.To add pagination in Thesis download and install Wp Page Navigation Plugin from wordpress plugins repository and follow the steps below.
Below are the steps to add pagination in Thesis theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Choose custom_functions.php and click Ediit selected file button
- Paste the code below in the file editor
function pagination_below () {
?>
<div align="left">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<br />
</div>
<?php
}
add_action('thesis_hook_before_footer', 'pagination_below');
- Then Click The Big Ass Save button and you are done.
Adding pagination to your blog or website will help you to lower down your blog bounce rate.
How to Customize 404 Page in Thesis
No one likes the 404 page this is shown when user is searching for something and there is nothing related to that in your blog or website and a page displays saying the requested page that doesn't exist.Normally the user will hit the back button of the browser to go back or close the window, so as a result you will loose a huge amount of good traffic.
You can customize 404 page in Thesis to some some possibly related content on your 404 error page to your visitors so they will not leave our website or blog and visitors will still stick to your blog or website.For doing this you will need a plugin called Smart 404 download the plugin from here.
Below are the steps to customize 404 page in Thesis theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Choose custom_functions.php and click Ediit selected file button
- Paste the code below in the file editor
/* Custom 404 Hooks */
function custom_thesis_404_title() {
?>
The Page you requested is somewhere here.
<?php
}
remove_action('thesis_hook_404_title', 'thesis_404_title');
add_action('thesis_hook_404_title', 'custom_thesis_404_title');
function custom_thesis_404_content() {
?>
<p>Can't find what you looking for?</p>
<?php if (smart404_loop()) : ?>
<p>Check out These related posts:</p>
<?php while (have_posts()) : the_post(); ?>
<h4><a href="<?php the_permalink() ?>"
rel="bookmark"
title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h4>
<small><?php the_excerpt(); ?></small>
<?php endwhile; ?>
<?php endif; ?>
<?php
}
remove_action('thesis_hook_404_content', 'thesis_404_content');
add_action('thesis_hook_404_content', 'custom_thesis_404_content');
- Then Click The Big Ass Save button and you are done.
You can see an example of customized 404 page in Thesis by Opening this following link
http://www.wpzest.com/error
Customizing 404 page will help you to lower down your blog's bounce rate.
How to Add Adsense Section Targeting in Thesis
Adsense is the life line of every blogger and when we add adsense section targeting the earning from google adsense increases.If you are a Thesis theme user and want to add adsense section targeting in your wordpress blog running on most flexible theme framework Thesis then go through the steps below and you will find how to add adsense section targeting in Thesis wordpress theme.
Below are the steps to add adsense section targeting in Thesis theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Choose custom_functions.php and click Ediit selected file button
- Paste the code below in the file editor
//adsense targeting functionsfunction open_adsense_targting(){ echo "<!-- google_ad_section_start -->"; } function close_adsense_targting(){ echo "<!-- google_ad_section_end -->"; }add_action('thesis_hook_before_post','open_adsense_targting' );add_action('thesis_hook_after_post', 'close_adsense_targting');
- Then Click The Big Ass Save button and you are done.
I am sure adding adsense section targeting in Thesis theme will surely increase the revenue from google adsense.
How to Customize Previous/Next Post Links in Thesis
Thesis theme framework for wordpress from DIY themes created by Chris Pearson is one of the most easy to customize theme framework available for wordpress.
Previous/Next post links are displayed after content in single post and it displays the links of previous and next post.It can be customized to look better and this will increase the visibility of previous/next links and also increase the clicks on these links which will lead to increase in page view of the website or blog using Thesis wordpress theme.
The screenshot blow shows the default previous/next post links in Thesis wordpress Theme.
Below are the steps to customize Previous/Next Post Links in Thesis wordpress theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Paste the code below in the file editor of custom.css file
.custom .prev_next {border: none; margin: 10px; padding: 0;}
.custom .prev_next p {-moz-border-radius: 5px; -webkit-border-radius: 5px; background: #F4F4F4; padding: 10px; border: 1px #D6D6D6 solid;}
- Then Click The Big Ass Save button and you are done.
The screenshot below shows the new customized previous/next post links in Thesis wordpress Theme.
10 Best Thesis Theme Customizations
Thesis is flexible easy to code with helpful support community so many web designers prefer thesis as their web design tool for wordpess.They opt to design their as well as their client's website powered by thesis wordpress theme.
Thesis have been customized by thesis designers in lot more ways here we have listed 10 best Thesis theme customizations.
1. Green and Gorgeous
2.Blogussion
3.Famous Bloggers
4.Krispykreme
5.Rich Lazzara
6.Ventura Web Design
7.Painted Tulip
8.Robs Web Tips
9.SEO Workers
10.Renters Insurance
These are the top 10 Thesis wordpress theme customization which I found if you know any other cool looking thesis powered site then share with us in comment.
How to Customize Block Quote in Thesis Theme
Thesis can be customized immensely with thesis options panel as well as by putting codes.Functions of thesis theme is customized by PHP and the styling is done by CSS.
Block Quote is used to quote some text from any other source and that should be highlighted to focus and distinguish from the main content.To customize block quote in thesis there is a short CSS code.
To help you with customization of thesis and block quote in thesis here we come up with a tutorial which guides you to customize block quote in thesis theme, check out the guidelines below.
The image below shows an example of block quote text:
Below are the steps to customize block quote in Thesis theme:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Choose custom_functions.php and click Ediit selected file button
- Paste the code below in the file editor of custom.css file
.custom blockquote { color: #1C2639; padding-top: 10px; padding-bottom: 0.5px; padding-right: 5px;
font: italic 1.2em Georgia, "Times New Roman", Times, serif; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.custom blockquote { background: #E9E9E9; }
- Then Click The Big Ass Save button and you are done.
You can change #E9E9E9 to color code which you want as background in block quote of your wordpress powered blog using Thesis wordpress theme.
<img src="http://www.technozeast.com/wp-content/uploads/2009/12/thesis-125x125-1.png" alt="" align="right" />Thesis is the easiest wordpress theme framework to customize each and every customization in Thesis is easy either it's a minor customization or major.Block quote is is used to show quoted text from some where else in the blog post.Block quote is different from quotation as quotation is used for single line of quote and block quote is used for multiple line of quotation.
Customizing block quote in Thesis is a very easy task even for those who are new to Thesis, if you are even not aware of Thesis then read my <a href="http://www.technozeast.com/thesis-1-7-premium-wordpress-theme-review-and-new-features.html">Thesis 1.7 Premium WordPress Theme Review and New Features</a>.
<strong>Also read:</strong>
<a href="http://www.technozeast.com/thesis-1-7-premium-wordpress-theme-review-and-new-features.html" target="_blank">Thesis 1.7 Premium WordPress Theme Review and New Features</a>
<a href="http://www.technozeast.com/how-to-move-navigation-menu-below-the-header-in-thesis.html" target="_blank">How to Move Navigation Menu Below The Header in Thesis</a>
<a href="http://www.technozeast.com/how-to-place-adsense-revenue-sharing-code-in-thesis.html">How to Place Adsense Revenue Sharing Code In Thesis</a>
<a href="http://www.technozeast.com/how-to-change-background-color-of-header-in-thesis.html" target="_blank">How To Change Background Color of Header in Thesis</a>
<a href="http://www.technozeast.com/customize-thesis-with-openhook-wordpress-plugin.html" target="_blank">Customize Thesis with OpenHook WordPress Plugin</a>
<a href="http://www.technozeast.com/how-to-add-clickable-header-image-in-thesis.html" target="_blank">How to Add Clickable Header Image in Thesis</a>
The image below shows an example of block quote text:
<img class="aligncenter" src="http://farm5.static.flickr.com/4023/4557712292_038cf3419b.jpg" alt="block-quote" width="500" height="85" />
<strong>Below are the steps to customize block quote in Thesis theme:</strong>
<ul>
<li>Login to your <strong>FTP Account</strong> using FTP client</li>
<li>Navigate to <strong>Thesis Theme</strong> Folder in <em><strong>wp-content/themes/</strong></em> folder</li>
<li>Rename <strong>Custom Sample</strong> folder to <strong>Custom</strong></li>
<li>Now Login to admin panel of your blog</li>
<li>Select <strong>Custom File Editor</strong> option in <strong>Thesis options</strong> menu in admin panel of your blog</li>
<li>Choose <em>custom_functions.php</em> and click <strong>Ediit selected file</strong> button</li>
<li>Paste the code below in the file editor of <em>custom.css</em> file</li>
</ul>
<pre>.custom blockquote { color: #1C2639; padding-top: 10px; padding-bottom: 0.5px; padding-right: 5px;
font: italic 1.2em Georgia, "Times New Roman", Times, serif; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.custom blockquote { background: #E9E9E9; }</pre>
<ul>
<li>Then Click The <strong>Big Ass Save</strong> button and you are done.</li>
</ul>
You can change <em>#E9E9E9</em> to color code which you want as background in block quote of your wordpress powered blog using Thesis wordpress theme.<a href="http://www.technozeast.com/recommended/Thesis/" target="_blank"><strong></strong></a>
<a href="http://www.technozeast.com/recommended/Thesis/" target="_blank"><strong>Grab a copy of Thesis theme</strong></a>
How To Add Logo In Thesis Theme Header
Chris Pearson have have done great job by developing Thesis theme as its very easy to do all desired changes in Thesis.
If you are customizing thesis theme then you will surely need to have a logo in the thesis theme header to help you with the same here we come up with a tutorial which guides you about how to add logo in thesis theme header.
Below are the steps to add Logo in Thesis theme header:
- Login to your FTP Account using FTP client
- Navigate to Thesis Theme Folder in wp-content/themes/ folder
- Rename Custom Sample folder to Custom
- Make new folder named images in custom folder within Thesis Theme Folder in wp-content/themes/ folder
- Upload the header image in images folder in folder named images in custom folder within Thesis Theme Folder in wp-content/themes/ folder
- Now Login to admin panel of your blog
- Select Custom File Editor option in Thesis options menu in admin panel of your blog
- Choose custom_functions.php and click Ediit selected file button
- Paste the code below in the file editor
add_action('thesis_hook_header', 'custom_image_header');
function custom_image_header() {
?>
<p id="logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php echo '' . get_option('upload_url_path') . '/logo.png'; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a></p>
<?php
}- Then Click The Big Ass Save button and you are done.
In the code above replace logo.png with your own logo image name (with extension) or rename your logo image to logo.png to display logo in thesis theme header.
If you follow the steps illustrated above that will add logo in thesis theme header.
Hope this tutorial helps you to add logo in your thesis theme header and make your thesis powered site look beautiful.