WordPress Thesis Theme Customization Part Three A: Custom Coding

When browsing other WordPress blogs with awesome themes, I always find myself wondering how someone handled a particular aspect of the layout or functionality. This is especially true with the Thesis Theme, because of the difference in setup due to the Thesis hooks system. So for anyone browsing Kikolani, I wanted to answer the question of “how did you do that” in a new series on WordPress Thesis Theme Customization.

Part Three A: Custom Background, Header, Navigation Bar & Sidebar

The best way to make your Thesis website look less out of the box and more custom is through the custom coding. Unlike other WordPress themes where you can go in and edit the various template files (single.php for single posts, index.php or home.php for the homepage, etc.), Thesis gives you two files – custom_functions.php and custom.css. It is within these two files that you do all of your custom coding, from a new navigation menu to an Archive page layout.

There is a plugin that I mentioned in Plugins part of this series, Thesis Openhook, that allows you to either enter coding directly into the custom.css, custom_functions.php or into blocks that are divided up by location in your Thesis theme. So if you want to add something after your default sidebar widgets, there is a box called After Sidebars that allows you to do so.

I have some of my custom coding directly in my custom_functions.php, and other parts of it are in the OpenHook boxes. Part Four A is the coding behind the custom background, header, navigation bar & sidebar on this site.

Background Image

The following code inside the custom.css sets the background image of the website.

body.custom {
background: #8db6b6 url('images/chihuly-colors.jpg') 100% 0 no-repeat;
background-attachment: fixed;
}


Custom Header

The following code inside the custom.css inserts my custom header, a banner created by Design.Lifesoon. The last two lines hide default Thesis header and tagline.

.custom #header { border-bottom:none;
height:85px;
padding-top:0;
background-color: #ffffff;
padding-bottom:0;
margin-left:-3px;
background:url(http://kikolani.com/images/kikolani-logo-2.png)
center left no-repeat; }
.custom #header #logo { display:none; }
.custom #header #tagline { display:none; }


Navigation Bar

The following code inside the custom_functions.php moves the navigation menu below the header.

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'my_navmenu');


Then comes the my_navmenu function inside the custom_functions.php, which is the coding for my navigation menu.

function my_navmenu() {
?>
<div class="nav"><ul>
<li class="lastnav"> <span> <br /></span>
</a></li>
<li class="noline"><a href="http://kikolani.com/" title="Kikolani | The Art of Blogging Home">
Home
<span>begin</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/author" title="About Kikolani">
About
<span>kikolani</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/category/blogging" title="Blogging">
Blogging
<span>art of blogging</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/category/social media" title="Social Media">
Social Media
<span>technically</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/category/photography" title="Photography">
Photography
<span>beautiful, artfully</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/category/fetching-friday" title="Fetching Friday">
Fetching Friday
<span>beneficial</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/category/discoveries" title="Discoveries">
Discoveries
<span>growth</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/archives" title="Archives">
Archives
<span>get it all</span>
</a></li>
<li class="noline"><a href="http://kikolani.com/guest-post-opportunities" title="Guest Post">
Guest
<span>opportunities</span>
<li class="noline"><a href="http://kikolani.com/contact" title="Contact">
Contact
<span>me</span>
</a></li>
</ul>
</div>
<div class="clear"> </div>
<?
}

The supporting CSS for my nav menu is in the custom.css file.

.nav{
border-top:1px solid #e48902;
border-bottom:1px solid #e48902;
list-style:none;
font-size:9pt;
line-height:100%;
font-weight:100;
margin:0px;
padding:0px;
background:#eee;
float:left;
width:100%;
font-family: Verdana;
}
.nav ul{
margin:0px;padding:0px; float:left; width:100%;
}
.nav li.noline{
border:0;
}
.nav li{
border-right:1px solid #555;
float:left;
display:block;
padding:0px;
margin:0px;
}
.nav li a{
color:#323232;
text-decoration:none;
display:block;
text-transform:uppercase;
padding:5px 11px;
margin:0px;
font-family: Verdana;
}
.nav li a span{
color:#d83900;
text-transform:lowercase;
display:block;
font-size:9px;
font-family: Verdana;
}
.nav li a:hover, .nav li a:hover span{
background:#fed758;
color:black!important;
font-family: Verdana;
}
* html .nav li a:hover{
background:#333;color:#fff;
}
.nav li.lastnav{
border-left:1px solid #fff;
border-right:none;
float:right;
display:block;
}
.nav li.lastnav a:hover, .nav li.lastnav a:hover span{
background:#4a4a4a;
}
.clear {
clear:both;
height:0.001em;
margin:0px;
padding:0px;
display:block;
}


Sidebar

My sidebar consists of one widget, the Search box. Under Appearances > Widget, I have the Search widget under Sidebar 1.

The rest of my sidebar is coded into the Thesis OpenHook box After Sidebars.

I open the sidebar section with the following to keep the styling:

<div id="sidebar_1" class="sidebar">
<ul class="sidebar_list">


Then add each section within a list item, such as:

<li class="widget widget_killer_recent_entries">
<h3>Follow Kikolani</h3>
<a href="http://feeds2.feedburner.com/kikolani"><img src="http://kikolani.com/images/subscribe-rss.png" border="0" style="vertical-align:middle;"></a> <a href="http://feeds2.feedburner.com/kikolani">Subscribe via RSS Reader</a><br />
<a href="http://twitter.com/kikolani"><img src="http://kikolani.com/images/subscribe-twitter.png" border="0" style="vertical-align:middle;"></a> Follow <a href="http://twitter.com/kikolani">Kikolani</a> on Twitter<br />
<img src="http://kikolani.com/images/subscribe-email.png" border="0" style="vertical-align:middle;"> Or subscribe by email:<br /><div style="margin-left:37px;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=kikolani', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="subscribefield" type="text" style="width:140px" name="email"/></p><input type="hidden" value="kikolani" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" style="margin-left:5px;" value="Subscribe" class="field" /></form><a href="http://kikolani.com/subscribe-rss"><font size="1">Why Subscribe?</a></font></div>
</li>


For the most part, it is all just standard HTML, with exception to the Top Commentators. The following code displays the Show Top Commentators plugin.

<li class="widget widget_killer_recent_entries">
<h3>Top Commentators</h3>
<?php if(function_exists('ns_show_top_commentators')) { ns_show_top_commentators(); } ?><br />
</li>


After all of the custom sidebar code, I close the ul and div with </ul></div>.

About the WordPress Thesis Theme Customization Series

Originally, I had planned on making one comprehensive article about my Thesis Theme customizations, but after only finishing two sections, I realized that this article would be a bit overwhelming if it was a all in one job. So instead, I’m breaking it up into a series:

• Part One: Thesis Options & Design Options
• Part Two: Plug-ins
• Part Three A: Custom Coding of the Background, Header, Navigation Bar & Sidebar

So stay tuned for Part Three B to see what custom code and styles have been implemented to the posts, including the social bookmarking icons.

Thesis Questions

If you have any questions regarding customizations of the Thesis Theme throughout the series, please let me know via the comments. If I get enough questions, I may add a Part Five of Q&A. And other commentators, if you see a question you can answer, go for it! I’ll add your name & link to the Part Five post, assuming there are enough questions.

This post brought to you by Kristi Hines

Kristi Hines is creator of Kikolani which focuses on blogging tips and social networking. Connect with me on Twitter, Facebook, and LinkedIn.

Kristi has written 310 awesome article(s) for Kikolani.

Join Kikolani at Blog World Expo! Use discount code EBIRD for 20% off.

Enjoy this post?

Use the social buttons below to add it on your favorite social sites or send it via email. Also, subscribe to posts via RSS or by email to get the latest on blogging tips, social media, and other information for successful bloggers.

Related Posts

1. WordPress Thesis Theme Customization Part Three B: Posts & Social Bookmarking
2. WordPress Thesis Theme Customization Part One: Options
3. WordPress Thesis Theme Customization Part Two: Plugins
4. Getting Started with the Thesis Theme & Resources
5. Upgrading WordPress 2.9 and Thesis 1.6