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:

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.

Enjoyed this post?

Be sure to subscribe to the Kikolani newsletter and get regular updates about awesome posts just like this one and more! You will also receive my free 8,000+ word guide on guest blogging!


Kikolani Proudly Uses StudioPress

Genesis Framework

Like the new design? Kikolani uses a theme called Magazine Pro on the Genesis Framework from StudioPress. It's great design right out of the box, easy to follow installation instructions, and built-in SEO features makes it perfect for professional bloggers.

If you have several websites and blogs powered by WordPress or design websites for others, then you will want the Pro Plus Package. It gives you lifetime access to all of their current 40+ professional designs plus new themes regularly added to their collection for unlimited use on your own websites and blogs as well as your clients' websites and blogs. Learn more about Pro Plus!

If you already use StudioPress and love it like I do, be sure to sign up for their affiliate program and start making money with your blog today!



Comments are open for one year after the post goes live. If you don't see the comment form below and you'd like to discuss this topic with me, become a fan of my Facebook page and post a comment on my wall!





Comments

  1. says

    Kristi,
    Great stuff. Very helpful, especially the Nav Bar and Sidebar sections. I use Thesis and am getting ready to make some tweaks to my sight, these items will be very useful.

    A quick question in the Custom Header section where you state that “the last two lines hide default Thesis header and tagline.” How is this different than going in through Thesis Options – > Display Options -> Header and unchecking the boxes for “Show site name in header” and “Show site tagline in header” ? Thanks.
    .-= Mike McEvoy´s last blog ..7 Reasons Netbook Computers are great for students =-.

  2. says

    There are so many tweaks I would like to make on my blog, but the amount of work is a bit intimidating. I guess that’s part of the reason I come to this friendly environment so often so that I can be inspired to get my head in the realm of the exceptional design you break down both technically and aesthetically so well.

  3. says

    Thanks for the series.

    I’ve been wanting to customize a wordpress theme for my sites for a while, but there never seems to be enough time to dig into the coding. This may be just the thing to get me to do that!
    .-= Joanie´s last blog ..50 Ways to Improve Your Health =-.

  4. says

    I always liked Thesis as it is apparently one of the best themes out there for SEO purposes. The thing I didn’t like however was how plain it looked but you’ve remedied that. Really great post very easy to understand, even for a newbie like me. Thanks

  5. Josh says

    Great tutorial, but it doesn’t seem to work in Thesis 1.6. Can you possibly update the tutorial so we might be able to use this to create our Navigation Bar Menus based on yours?

    Any tips to adapt the one above quickly/easily?

  6. says

    very cool, very helpful. I have just gone the route of self hosting with my thesis theme. Although I have set it up to be much the same as the previous wordpress.com Vigilante theme, I plan to make more my own. This article has started me on the right track, tks.
    .-= Phillip Gibb´s last blog ..A Very Merry Christmas to you =-.

  7. says

    Hi, thanks for these tips. I’m confused about the sidebars, though. What’s the code simply to change the color and font and size of sidebar headings?

    Thanks very much!

  8. Bruno says

    Hello, thanx for the cool tutorial and tips. I have a question, what is the code to show the advertising picture ‘FamousBloggers ComLuv Context’ in the sidebar just above ‘Follow Kikolani’ and with the tag ‘My entry: Article Marketing Promotion w/CommentLuv’.
    Would be great to see how it is coded.
    Merci beaucoup !

    p.s: I see blogs referring to this sidebar also as containing the Rotator widget (??), and just mentioning it without going into the details, like they don’t really know. Because if indeed it is a rotator image then the question is.. if one clicks on it, where does it link to ? Do all pictures link to the same link ? or is it possible to code each image with a different link? I think that is more interesting to know than just saying you can put different rotating that just rotate. Thanx again for any comments.