Thesis is the best SEO optimized wordpress theme by Dirythemes which has got many unique features and mindblowing design.You got many design options in this great theme.One is you can choose the design from the Thesis Theme design and Customization page in your WP dashboard and another you can customize it with your own to make to theme look even more better, Professional Looking and easy browsing.This Theme runs good in every browser.
Before you continue customize your Thesis WP theme you should ask yourself whether you won this Thesis Wordpress theme or not.If you got it then its alright and if you didn’t own it then you can Get Thesis WP theme here.
To customize your thesis theme with your own or to implement your custom design in your thesis theme you should change the folder name custom-sample to custom only from your Hosting File manager.
1. Use Custom Background
To use the custom background color in your Thesis Theme, Add the following block of code to custom.css file of thesis thesis theme.
body.custom {
background: #44443f;
}
.custom #container {
margin-top: 2em;
margin-bottom: 2em;
padding: 0.3em;
background: #33332f;
border: 0.4em solid #3e3e3a;
}
.custom #page {
background: #fff;
}
2. Customize the top navigation bar
To make the Top mavigation menu like the modern one add the following code to custom.css in your thesis WP theme.
.custom ul#tabs li {background:#909090;}
.custom ul#tabs li.rss {background:none;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#767676;}
.custom ul#tabs li.rss a:hover {
text-decoration: underline;
background: url(http://wpresser.com/wp-content/themes/thesis/images/icon-rss.gif) no-repeat;
background-position: right;}
.custom ul#tabs li a:hover {text-decoration:none; background:#686868;}
.custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#686868;}
.custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#686868;} 3. Add search box at right in the navigation bar
To add the search box to the right of your Thesis theme, Add the following code to custom_functions.php.
// Search Box in Navigation Menu
function search_nav_menu() { ?>
<li class='nav_right search'><form class='search_form' method='get' action=''><input type='text' name='s' id='s' value='search' onfocus="if (this.value==='search') this.value='';" onblur="if (this.value=='') this.value='search';"/></form></li>
<?php
}
add_action('thesis_hook_last_nav_item','search_nav_menu');
Now in second step you need to Add the style to the search box.For that you need to add the following CSS code to custom.css.
/* Nav Search */
.custom ul.menu li.nav_right {
float:right;
font-size:10px;
height: 22px;
letter-spacing:1px;
overflow:hidden;
text-transform: uppercase;
}
.custom ul.menu li.search {
background-color: #CCC;
border-bottom:none;
height:25px;
margin-bottom:0;
}
.custom ul.menu li.search input {
background-color: #CCC;
border:1px solid #333;
color:#333;
font-size:10px;
height:18px;
letter-spacing:1px;
padding:4px 10px 0 22px;
text-transform: uppercase;
width:125px;
}
4. Use custom Header Logo
To place your custom header logo in your Thesis Theme, Add the following code to custom.css of your Theme.
.custom #header #logo a { display: block; height: #px; width: #px; background: url('INSERT IMAGE URL') no-repeat; outline: none; }
5. Add banner ads to right in Header
To add the banner ads in right of your Thesis Theme, Add the following code to custom_functions.php your theme.
function my_header_ad() { ?>
<div id="leaderboard_ad"><a href=""><img src="image url" alt="" /></a></div>
<?php }
add_action('thesis_hook_header', 'my_header_ad');
Now in Second Step add the style to the header ad.For that, Add the following code to custom.css of your Theme.
.custom #leaderboard_ad { float: right; position: absolute; width: 468px; height: 60px; top: 15px; left: 502px; }
6. Change Sidebar and Content Background
To change the Sidebar and Content background in Thesis Theme, Add the follow code to custom.css of your WP theme.
.custom #content_box {background-color:#EEEEEE;}
.custom #content {background-color:#fff;}
7. Yellow box Welcome message on FrontPage
To display the yellow box welcome message on the frontpage of your blog, add then following code tocustom_functions.php of your Template.
function welcome_message() {
if(is_front_page())
echo '
<div class="format_text entry-content">
<div class="welcome_box">
<DIV ALIGN=CENTER><p class="alert">Welcome to YOUR TEXT</p></DIV>
</div>
</div>
';
}
add_action('thesis_hook_before_content', 'welcome_message');
Add the following code to custom.css to give style to the welcome message display box.
.custom div.welcome_box {
width: 90%;
padding: 0.571em 0.786em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-top: 1em;
margin-bottom: 0em;
padding-bottom: 0em;
}
8. About the author and Social Bookmarking box on each post
To add the Social bookmarking and About the author box in your Thesis Theme, Add the following block of code to custom_functions.php.
function post_footer() {
if (is_single())
{
?>
<div class="socialmedia"><p><strong>Share this post:</strong> <a rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(); ?> - http://YOUR_URL.com/?p=<?php the_ID(); ?>">Tweet It</a> | <a rel="nofollow" href="http://www.facebook.com/sharer.php" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t='+encodeURIComponent(document.title), 'facebook','toolbar=no,width=700,height=400'); return false;">Facebook It</a> | <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>">Stumble It</a> | <a rel="nofollow" href="http://www.digg.com/submit?phase=2&url=<?php the_permalink() ?>">Digg It</a> | <a rel="nofollow" href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=INSERT_TITLE">
Delicious It</a></p></div>
<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 120 ); ?>
<h4>Article by <a href="<?php the_author_url(); ?>">
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
<p><?php the_author_firstname(); ?> has written <strong><?php the_author_posts(); ?></strong> awesome articles for us. <?php the_author_description(); ?></p><p>If you liked this post, you will definitely enjoy our others. Subscribe to the feed via RSS or EMAIL to get instantly updated for those awesome posts soon to come.</p>
</div>
<?php
}
}
add_action('thesis_hook_after_post_box', 'post_footer');In the second step add the following CSS code to custom.css file of your Theme.
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
.socialmedia { background: #FFFBCC; border-top: 1px solid #E6DB55; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1em; text-align: center;}
.socialmedia p { color: #515151; font-size: 1.3em;}
9. Add 3 columned Footer in Thesis Theme
To add the three columned Footer in your Thesis WP theme, Add the following code in custom_functions.php of your Theme.
/*---------------------------------*/
/* WIDGETIZED FOOTER - 3 COLUMNS */
/* register sidebars for widgetized footer */
if (function_exists('register_sidebar')) {
$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Footer ' . $number,
'id' => 'footer-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
}
/*-----------------------*/
/* set up footer widgets */
function widgetized_footer() {
?>
<div id="footer_setup">
<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
<?php endif; ?>
</div>
<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
<?php endif; ?>
</div>
<div class="footer_items">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
<?php endif; ?>
</div>
</div>
<?php
}
add_action('thesis_hook_footer','widgetized_footer');
Now in Second step add the following code to custom.css file of your Theme.
#footer{
background: #eeeeee;
}
.custom #footer {
height: 100%;
width: 100%;
border-top:2em solid #9c9c9c;
background: #eeeeee;
padding:0em;
}
.custom #footer a{
border-bottom: 1px none #cccccc;
}
.custom #footer {
text-align:center;
}
/* footer widget area setup */
#footer_setup {
/* widgetized footer background (not footer background) */
background: #444343;
/* widget padding */
padding:1.5em;
/* margin at bottom of widgets */
margin-bottom: 25px;
/* do not change this! */
overflow: hidden;
}
/* widget item setup */
#footer_setup .footer_items {
/* contents alignment */
text-align: left;
/* widget width */
width: 33.3%;
/* space between widgets */
padding-right: 0px;
/* text color */
color: #2361A1;
/* do not change these! */
display: inline-block;
float: left;
height: 100%;
}
/* widget item headers http://adwordsshop.com/wp-admin/admin.php?page=thesis-file-editor*/
#footer_setup .footer_items h3 {
/* font size */
font-size: 1.5em;
/* bold or not */
font-weight: bold;
/* uppercase or not */
text-transform: uppercase;
/* space out the letters*/
letter-spacing: 0px;
/* font color*/
color: #ffffff;
/* padding under header text */
padding-bottom: 3px;
/* border under header text */
border-bottom: 3px none #ffdf00;
/* distance between border and widget text */
margin-bottom: 5px;
}
/* do not change these! */
#footer_setup .footer_items ul li { list-style:none;
font-size:1.4em;
line-height:1.5em;
}
#footer_setup .footer_items ul { margin: 1em; padding: 0px; }
10. Customize 404 error Page
To customize the 404 eror page of your Thesis Theme, add the following code to custom_functions.php of your Theme.
function custom_thesis_404_title() {
?>
YOUR 404 PAGE HEADING HERE
<?
}
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>WHATEVER YOU WANT YOUR 404 PAGE TO SAY HERE</p>
<?
}
remove_action(â??thesis_hook_404_contentâ??, â??thesis_404_contentâ??);
add_action(â??thesis_hook_404_contentâ??, â??custom_thesis_404_contentâ??);
Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.
Similar Posts
- Create Expand/Collapse or expandable content Script for Blogger
- Bloganol is now Powered by Thesis
- Download WooThemes “The Gazette Edition” Converted for Blogger Free
- Sidebar with rectangular Border and Round Header
- Create Table of Contents Page for your blog
Article by Dinesh Dhakal
Dinesh has written 294 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.
{ 2 comments… read them below or add one }
Thanks for the tips! I have customized around 2 thesis themes and this would certainly help me on my next projects!
SEO will do more to deliver quality visits and traffic (and sales) than anything else! SOOO many people neglect SEO…and they wonder why their websites fail?