I recently changed my wordpress theme from Boumatic, to Thematic Feature Site. I love the front page look where I want to use my Dev7studios’ Nivo Slider on without being in the way with my blog posts having a few widgets running.  Assuming that you have followed Ian Stewart’s initial steps on how to change the look of thematic with a wordpress child theme to protect your wordpress theme against upgrades, we can proceed to the tutorial.

Now let’s begin with our tutorial!

Editing functions.php

In your child theme folder, open your functions.php file and look for this one line of code.

$rand = mt_rand(1, 2);

(1, 2) means that the theme will rotate a maximum of 2 feature pages on the front page. For this tutorial, we will only modify our code to be (1, 1) since the header will only be showing feature-front-1.php which would contain our nivo slider code later.

Adding Nivo Slider to Feature-Front-1.php

This is pretty much straight-forward.  Locate your feature-front-1.php in the includes directory of your child theme folder.  Delete everything in it and replace it with this code:

<?php if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); } ?>

Now we go to our css file. We are almost done :)

Adjusting style.css

Ok we notice now that our front page looks a little bloated with the added space on top and bottom. We’re going to fix that by modifying our child theme’s style.css. Depending on how large your nivo slider header is, I can point to you which attributes you can edit to get the look right.

Adjusting the header

First is we adjust the padding values to close in on the header. You can add a background image if you want and be sure to center it.

#leader {
    border-bottom:1px solid #ccc;
    padding:-63px 0 -60px 0;
    background-image:url('http://www.linktoimagegoeshere.com');
    background-repeat:no-repeat;
    background-position:center;
}

Width of your header can be adjusted here.

#leader-container {
    overflow:hidden;
    position:relative;
    width:900px;
    margin-left: auto;
    margin-right: auto;
}

Adjusting Page and Blog Titles

Now why would we need to do this? Due to our adjustments made to the header, these areas were also affected, so all we need to do is some minor tweaking with the titles using these attributes and we are set.

#leader .entry-title {
font-size:25px;
line-height:45px;
margin-top:18px;
margin-left:120px;
padding:0 0 14px 0;
color:#616161;
}
#leader .entry-meta {
position:absolute;
top:32px;
left:722px;
}

Now you have nice big nivo slider effect on your Thematic Feature Site theme without going through a lot of coding. Just make sure that if you have other javascript running on your page, place them on the footer so your rotating header runs fine.

That was so easy, wasn’t it? ;) If you want to see a demo of this tutorial, go my main page and see it in effect.
I hope you like my tutorial and feel free to comment or ask any questions regarding these steps.

• z3olyte's custom springboard I used to jailbreak my 3gs with blackra1n, but when I accidentally upgraded my firmware to 3.1.3, I lost all my stuff that made my iDevice so ME. But theres a new jailbreak out called Spirit Jailbreak. Its untethered and works...
• Thematic: How To Replace Blog Title With A Thematic Header Image Hi friends and welcome to another series of my basic tutorials for adding a thematic header image.  Now that you have your nice Thematic Feature Site theme installed for wordpress blog, next is you would want to have your own thematic header image...
• Set up Nivo Slider in Wordpress as a text widget Hey everyone :rainbow: ...  I was looking around for plugins that would make my header look better.  My favorite so far is the Nivo Slider.  I was able to run across a tutorial from Dodie on how insert Nivo Slider within...
• Enhance Wordpress Posts with Post Layout Pro plugin If you thought you are content with having the freedom to apply custom HTML code anywhere on your wordpress posts, eventually you will try to find ways to implement them without manually repeating the process of copy and paste.  If...