Thesis Tutorial Feature Box

This The­sis Tuto­r­ial shows step by step how to add rotat­ing ban­ners to the Fea­ture Box. The Fea­ture Box has a drop down menu from where you can choose the posi­tion of the ban­ner. In func­tion of that choice you will then edit the images (size).

The below image illus­trates the result you will achieve by fol­low­ing this tutorial:

As you see my choice was to add the  rotat­ing ban­ners in full width under­neath the menu. The Header Ban­ner is above the menu. Using a large size ban­ner, I decreased the size of the header ban­ner. On the right side you see the Mul­ti­me­dia Box under­neath the rotat­ing banners.

My Ban­ner size is 960 pix­els x 278 pixels.

Semi­oman­tics Author Blogs have all scripts built in and you can skip the fol­low­ing steps which are mar­ket with a *.

From your dash­board under Plu­g­ins, select Add Plu­gin. Type into the search box “Dynamic Con­tent Gallery” and install and acti­vate the pugin.

Edit custom-functions.php from your Cus­tom File Edi­tor and add the fol­low­ing code:

//-------------------featured content--------------
function featcc() {
if (is_home()){
global $post;
if( function_exists( 'dynamic_content_gallery' ) ) :
dynamic_content_gallery();
endif;
}
}
add_action('thesis_hook_feature_box', 'featcc');

With this code we hook the Dynamic Con­tent Gallery to the The­sis fea­ture box for dis­play. Also, the fea­ture box dis­plays on the home page only, as on the other pages we use the Top Carousel.

You may choose another con­fig­u­ra­tion. As an exam­ple I just copy here what my set-up looks like. Edit the Dynamic Con­tent Gallery from your Dash­board under “Settings”:

I select Full URL to keep absolute flex­i­bil­ity about the image source; this could be an exter­nal link to an image server. In fact I just load my images to the main image folder in the domain root.

To keep the image and gallery man­age­ment sim­ple, I cre­ated a new cat­e­gory called Fea­tured Main. All posts which will have a fea­tured ban­ner, will also be added to that cat­e­gory. There­fore I select here “One Category”.

Scroll fur­ther down and you will find more options:

As you see, I selected the Fea­tured Main Cat­e­gory and I choose to dis­play 4 posts.

For rea­sons of lazi­ness I keep the set­ting on Auto and dis­play 100 signs. In fact, my posts are usu­ally struc­tured in a way that the auto­matic excerpt has some meaning…:-).

Just a copy of my settings:

I select jQuery and I show the carousel with the ban­ner (it’s the drop-down over­lay on top right of the ban­ner which dis­plays thumb­nails of the ban­ners). You may give that tab a more inter­est­ing name than Fea­tured Arti­cles, for exam­ple: Must Read. Note that I des­e­lect the left and right arrows which serve to scroll the ban­ners; I just think they are not nec­es­sary and ugly.

As we dis­play the ban­ners on the home page only, I select Home Page to load the script only where needed.

I don’t dis­play Error Mes­sages and enable the edit­ing box in the page and post edi­tor as follows:

You will now be able to add ban­ners from your Word­Press edi­tor to your post or to over­write some of the con­fig­u­ra­tion settings.

I just headed over to Pho­to­shop and made a few ban­ners which I uploaded to my main image folder:

As I have con­fig­ured to dis­play 4 ban­ners, the above four will do the trick.

Now  I select 4 key posts from my blog and edit them:

I add the Fea­tured Main cat­e­gory to all of them and then I add the cor­re­spond­ing ban­ner image link to each post and update the post:

In your Design Options tog­gle Fea­ture Box and select the position:

I select Full width above con­tent and side­bars. The home page selec­tor is not active as we have over­writ­ten the func­tion in custom-functions.php.Also the Dis­play Options are not built into The­sis yet, how­ever if you wish to style the box, do the last step below:

If you would like to get rid of the light gray back­ground and the bor­ders or style the box dif­fer­ently all together, just add the fol­low­ing few lines to your custom.css from the Cus­tom File Editor:

/*----------------Feature Box-------------- */
.custom #feature_box { background: #ffffff; border-style: solid; border-color: #fff; }

I have set it all to white here, but you may mod­ify and adapt to taste and amend this CSS code as needed.

• the­sis fea­ture box
• the­sis fea­ture box back­ground color
• the­sis tutorial
• tuto­r­ial banner
• Fea­ture Box thesis
• nextgen gallery the­sis fea­ture box
• fea­ture box the­sis size
• edit css fea­tured box thesis
• the­sis fea­ture box tutorial
• con­tex­tual banner

Related posts:

1. The­sis Tuto­r­ial Header Ban­ner Rotator
2. The­sis Tuto­r­ial Author Box
3. Cre­ate a Header Wid­get in Thesis
4. Semi­oman­tics The­sis Interpretation
5. Cre­ate a Wid­get below the Mul­ti­me­dia Box in Thesis

Tags: Dynamic Rotating Banner on Thesis, Semiomantics Author Blog, Thesis Feature Box Tutorial, Thesis Tutorial

This entry was posted on October 29, 2010 at 4:32 pm and is filed under Author Blog, Semiomantics, Thesis, Thesis Theme, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.