Website Design, Development and SEO that is more affordable than you think!

How to use Featured Content Gallery and Tabber on Home Page of Studio Press Magazine Theme

First, here’s a screen shot to show what it looks like when completed.

StudioPress Magazine Theme Modification

First thing to do is go into the home.php page and find the following code:

<div id="contentleft">

<?php if(get_theme_mod('tabber') == 'Yes') { ?>

<div class="hptabber">
<?php include(TEMPLATEPATH."/tabber.php");?>
</div>

<?php } else { ?>
<?php } ?>

<div class="clear"></div>

Replace that with this code below:

<div id="contentleft">

<?php if (function_exists('gallery_styles')) : ?>

<div class="featuredcontentleft">
<div class="fcg">
<?php include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php'); ?>
</div>
</div>
<?php endif; ?>

<?php if(get_theme_mod('tabber') == 'Yes') { ?>
<div class="tabberright">
<div class="hptabber">
<?php include(TEMPLATEPATH."/tabber.php");?>
</div>
</div>

<?php } else { ?>
<?php } ?>

<div class="clear"></div>

That is all you’ll need to do for the home.php page.

Then, open up style.css and find the following code (if you have not modified the stylesheet, it should be at about line 539:

.hptabber {
background: #FFFFFF;
margin: 0px 0px 10px 0px;
padding: 15px 10px 0px 10px;
border: 1px solid #C0C0C0;
}

Replace that with the following:

.featuredcontentleft {
background: #FFFFFF;
border: 1px solid #C0C0C0;
float: left;
width: 299px;
height: 325px;
margin: 0px 0px 10px 0px;
padding: 0px;
}

.tabberright {
background: #FFFFFF;
border: 1px solid #C0C0C0;
float: right;
width: 299px;
height: 325px;
margin: 0px 0px 10px 0px;
padding: 0px;
}

.fcg {
background: #FFFFFF;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
}

.hptabber {
background: #FFFFFF;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
}

Now, you’ll need to go into tabber.php and find the following:

<?php
$i = 1;
while($i < 7) {
?>

You need to adjust the amount of tabs (atleast I did so it looked better) to only display 3 (<4)

<?php
$i = 1;
while($i < 4) {
?>

Then, upload all 3 files back to your server.

Go to the featured content gallery options and set the width to 275 and the height to 300.

That is all it took and now you’ll have both features on the home page!

Hope this helps! :D

Adam

Share

Comments

  1. Marie says:

    I tried this code several times. The tabs don’t work anymore and the featured gallery does not show up.

  2. Any idea why my tabber section isn’t showing at all?

    As soon as thats fixed I’m implementing what you’ve posted above!

    Thanx,

    Tom

    • Adam says:

      It looks like you haven’t activated the theme option for the tabber. Go into the control panel and then under “Appearance”, you’ll have the “Magazine Theme Options” tab. At the top, there will be an option for the tabber. Make sure it is selected as “Yes”. If it already is, just press the “Save Settings” button at the bottom. Sometimes it does not activate it properly when first activating the theme. Let me know how it goes!

  3. Chris says:

    Great post. I’ve done this before, however, and the problem I have is the FCG won’t rotate…or it rotates once, and then gets stuck on the same image. Any suggestions?

  4. jill says:

    Does anyone know how to autorotate the tabber??

    • Adam says:

      You could use a custom version of the Easy Slider Jquery slider.

      I am working on making it a full WordPress plug-in. It can be stylized to have the same look and feel of the tabber.

      I see that you are using the Magazine Theme for your site! Looks great!