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