Categories
Archives Blogging

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;
}

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(https://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="https://kikolani.com/" title="Kikolani | The Art of Blogging Home">
Home
<span>begin</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/author" title="About Kikolani">
About
<span>kikolani</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/category/blogging" title="Blogging">
Blogging
<span>art of blogging</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/category/social media" title="Social Media">
Social Media
<span>technically</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/category/photography" title="Photography">
Photography
<span>beautiful, artfully</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/category/fetching-friday" title="Fetching Friday">
Fetching Friday
<span>beneficial</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/category/discoveries" title="Discoveries">
Discoveries
<span>growth</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/archives" title="Archives">
Archives
<span>get it all</span>
</a></li>
<li class="noline"><a href="https://kikolani.com/guest-post-opportunities" title="Guest Post">
Guest
<span>opportunities</span>
<li class="noline"><a href="https://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="https://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="https://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="https://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="https://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.

By Kristi Hines

Kristi Hines is a freelance writer, professional blogger, and ghostwriter who specializes in business and marketing topics.

20 replies on “WordPress Thesis Theme Customization Part Three A: Custom Coding”

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 =-.

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.

[…] WordPress Thesis Theme Customization Part Four A: Background, Header & Sidebar | Kikolani kikolani.com/wordpress-thesis-theme-customization-part-four-a-custom-coding.html – view page – cached WordPress Thesis Theme Customization Part Four A is the coding behind the custom background, header, navigation bar & sidebar on this site. — From the page […]

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

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?

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!

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.

Comments are closed.