Guide: Tweaks & Modifications for WP-Vybe 1.1 (Part 1)

March 1, 2009 By 22 Comments

In part one of this guide I will be showing some various tweaks and modifications that can be done to your WP-Vybe 1.1 theme. Most of these changes will be very easy to do if you follow the instructions carefully. I have already posted a few of these tweaks and modifications on the Solostream Forums. Now it’s time to have some fun tweaking away at your theme!

Using WP-Cumulus in WP-Vybe:

The default Tags dropdown in WP-Vybe may be a bit bland for some people. This quick guide will show you how to install the WP-Cumulus plugin in your sidebar tabs panel instead of using the default dropdown menu.

First you will need to install the WP-Cumulus plugin (get it here) then go into the WP-Cumulus settings and change the following options:

  • Width of the Flash tag cloud needs to be set to 278
  • Height of the Flash tag cloud needs to be set to 209
  • Use transparent mode needs to be on

Once those options are saved you will need to open your side-tabs.php file in your WP-Vybe theme folder and then find the following:

   <select name="tag-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
   <option value=""><?php echo attribute_escape(__('Select a Tag')); ?></option>
   <?php $posttags = get_terms('post_tag'); ?>
   <?php if ($posttags) {
    foreach($posttags as $tag) { 
     echo "<option value='";
     echo get_tag_link($tag);
     echo "'>";
     echo $tag->name;
     echo ""; }
    } ?>
   </select>

You will now need to replace those lines with the following:

<?php wp_cumulus_insert(); ?>

Save the file and upload it to your WP-Vybe folder. Now you can see your new tags section in action.

Using Global Translator in WP-Vybe:

For this modification we will be adding a 5th tab to our sidebar tabs panel. First you will need to download and install a plugin called Global Translator and activate it. Now navigate to your Global Translator settings section and change the following options:

Set Flags bar layout to Use a single and optimized image map and show: and use 14 flags for each row.

Now open your side-tabs.php file in your WP-Vybe theme folder and find the following:

  <ul class="tabs cleafix">  
  <li><a href="javascript:tabSwitch_2(1, 4, 'tab_', 'content_');" id="tab_1" class="on"><?php _e("Subscribe"); ?></a></li>
  <li><a href="javascript:tabSwitch_2(2, 4, 'tab_', 'content_');" id="tab_2"><?php _e("Archives"); ?></a></li>  
  <li><a href="javascript:tabSwitch_2(3, 4, 'tab_', 'content_');" id="tab_3"><?php _e("Tags"); ?></a></li>
  <li><a href="javascript:tabSwitch_2(4, 4, 'tab_', 'content_');" id="tab_4"><?php _e("Popular"); ?></a></li>
 </ul>

Change that code to:

 	<ul class="tabs cleafix">  
		<li><a href="javascript:tabSwitch_2(1, 5, 'tab_', 'content_');" id="tab_1" class="on"><?php _e("Subscribe"); ?></a></li>
		<li><a href="javascript:tabSwitch_2(2, 5, 'tab_', 'content_');" id="tab_2"><?php _e("Archives"); ?></a></li>  
		<li><a href="javascript:tabSwitch_2(3, 5, 'tab_', 'content_');" id="tab_3"><?php _e("Tags"); ?></a></li>
		<li><a href="javascript:tabSwitch_2(4, 5, 'tab_', 'content_');" id="tab_4"><?php _e("Popular"); ?></a></li>
		<li><a href="javascript:tabSwitch_2(5, 5, 'tab_', 'content_');" id="tab_5"><?php _e("Translate"); ?></a></li>
	</ul>

Now in side-tabs.php you need to add the following code in between the last two lines at the bottom of side-tabs.php.

	  <div id="content_5" class="cat_content" style="display:none">
  <div class="sidebox"><?php
if(function_exists("gltr_build_flags_bar")) { 
gltr_build_flags_bar(); 
}
?></div>
   </div>

Now that’s it, you now will have a fancy translator tab.

Featured:

If you’re like me you may think the featured links on the right hand side of the Features box is a waste of space and could be used for something better, then this short guide is for you.

The next customisation will show you how to remove the whole links section and place a banner in it’s place.

Open the style.css file in your WP-Vybe theme folder and find:

#my-glider .controls a, .control a:link, .controls a:visited {
 display:block;
 padding-left: 20px;
 background: transparent;
 }

Change to:

/* ---- #my-glider .controls a, .control a:link, .controls a:visited {
 display:block;
 padding-left: 20px;
 background: transparent;
 } ---- */

Now locate your features.php file in your WP-Vybe folder and find:

<?php _e("Featured Articles"); ?>

Remove that section of code. Now just below it you will need to remove the following chunk of code:

<?php $count = 1 ?>
<?php $featurecount = $wp_vybe_features_number; ?>
<?php $my_query = new WP_Query("category_name=featured&showposts=$featurecount");
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[$post->ID] = $post->ID; ?>
 
<?php if ( $count == 1 ) { ?>
      <li><a class="active" href="#section<?php the_ID(); ?>"><?php the_title(); ?></a></li>
<?php } else { ?>
      <li><a href="#section<?php the_ID(); ?>"><?php the_title(); ?></a></li>
<?php } ?>
 
<?php $count = $count + 1 ?>
<?php endwhile; ?>

Our new banner link will go where that chunk of code was. For example you can use this code:

<div align="center"><a href="http://www.affiliatelink.com/"><img border="0" src="http://www.website.com/images/banner.jpg"/></a></div>

Keep in mind that the area is quite small, the largest banner can only be 249 pixels in height and 290 pixels in width.

To make things a bit fancier we could create rotating banners like on our homepage.

Instead of using the banner code above we can use a simple script to rotate different ads. Insert the following code where the large chunk of code was removed from features.php

<script LANGUAGE="JavaScript">
<!-- Begin
var how_many_ads = 2;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
url="URL GOES HERE";
alt="ALT TEXT";
banner="IMAGE URL HERE";
width="NUMBER";
height="NUMBER";
}
if (ad==2) {
url="URL GOES HERE";
alt="ALT TEXT";
banner="IMAGE URL HERE";
width="NUMBER";
height="NUMBER";
}
document.write('<a href="' + url + '" target="_blank">');
document.write('<img src="' + banner + '" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt="' + alt + '" border=0/>');
// End -->
</script>

The only part that needs to be edited for two banners is the two instances of the following code:

url="URL GOES HERE";
alt="ALT TEXT";
banner="IMAGE URL HERE";
width="NUMBER";
height="NUMBER";

Now you will have a fancy rotating banner ad.

This WordPress site uses Gravatar:

I love Gravatar but I think it’s lacking one major thing in WordPress Blogs. We need plugins to help the registration process without leaving our comment box. Currently there are no plugins that work to help the registration process, we still need to advertise to our commenters that Gravatar is in fact a feature on our blogs.

Open comments.php in your WP-Vybe theme folder and find the following line of code:

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small>-->

Now right below that line add something like the following:

<p><b>If you want a picture to show with your comment, go get a <a href="http://en.gravatar.com/" target="_self">Gravatar</a>!</b></p>

This small tweak is an easy way of telling your readers that you support Globally Recognised Avatars in your comments. It is a two minute modification but it is worth it.

Archives list:

Another small change I have made within my sidebar tabs section is to remove the archives dropdown and use a monthly list instead. Once again this modification can be seen in the right sidebar of our site.

To do the modification open side-tabs.php in your WP-Vybe theme folder and find:

 <div id="content_2" class="cat_content" style="display:none">
  <div class="sidebox">
   <select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
    <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> 
    <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>
   </select>
  </div> 
 </div>

Change to:

 <div id="content_2" class="cat_content" style="display:none">
                                 <ul>
                                       <?php wp_get_archives('title_li='); ?>
                                 </ul>
 </div>

It’s a pretty simple modification that can make your monthly archives a little quicker to access.

Ditching Popularity Contest:

One feature that I dislike in WP-Vybe 1.1 is the return of the popular sidebar tab that relies on the very outdated Popularity Contest plugin. Why support a plugin that causes so much trouble? Anyway here is a quick guide to setup the popular sidebar tab while using another plugin.

Download the plugin called Recently Popular and activate it. No need to activate the Recently Popular Widget because we are using the function to insert it into our sidebar.

Now locate your side-tabs.php file in your WP-Vybe theme folder and find the following lines:

<?php /* Alex King's <a href="http://alexking.org/blog/2007/10/02/popularity-contest-13b2">Popularity Contest plugin would work really well here. */ ?>
<?php if ( function_exists('akpc_most_popular') ) : ?>
  <ul><?php akpc_most_popular($limit=5); ?></ul>
<?php else : ?>
  <div class="sidebox"><p><?php _e('This feature has not been activated yet.'); ?></p></div>
<?php endif; ?>

Replace those lines with the following line:

<ul> <?php get_recently_popular(2, 'WEEK', 5, 0, 2); ?> </ul>

And that’s it! You will now have a popular posts tab that works a lot better.

Filed Under: CSS Styling, WordPress Themes

Comments

  1. Iskwew says:
    March 1, 2009 at 6:53 am

    Ahh. Really nice.

    I suppose a lot of these suggestions may work just as well for Vybe 1.0? I’m especially looking for something that says something about Popular posts, which is not Popularity contest.

    Reply
  2. Martin PWPH says:
    March 2, 2009 at 6:52 am

    The only one that will not work is the mod listed under Featured. From what I remember WP-Vybe 1.1 had some changes in the style.css or style.php. If you want that mod for WP-Vybe 1.0 let me know!

    Reply
  3. Iskwew says:
    March 3, 2009 at 6:52 am

    Recently popular works like a charm!

    Reply
  4. Nigel .W says:
    March 5, 2009 at 6:50 am

    Thanks for the guide on replacing popularity contest. That plugin has never worked for me since purchasing Vybe a month ago.

    Can that image rotation script be used anywhere?

    Reply
  5. Greg says:
    March 6, 2009 at 6:40 am

    Great guide. How did you get recent comments in your sidetabs?

    Reply
  6. Martin PWPH says:
    March 6, 2009 at 6:47 am

    Thanks! I will be adding the Recent Comments mod in my next guide, should be ready tomorrow!

    Reply
  7. XRush says:
    March 7, 2009 at 6:46 am

    Recently Popular worked great for me!

    Reply
  8. Martin PWPH says:
    March 8, 2009 at 6:45 am

    @ Iskwew & XRush,

    Good to hear it worked, I tried 4 different plugins and found this the easiest to use and install when it came down to popularity plugins.

    Reply
  9. Martin PWPH says:
    March 10, 2009 at 6:45 am

    Guide: Tweaks & Modifications for WP-Vybe 1.1 (Part 2)

    http://www.premiumwphosting.com/2009/03/04/guide-tweaks-modifications-for-wp-vybe-1-1-part-2/

    Reply
  10. Drew McManus says:
    March 14, 2009 at 6:43 am

    question about the translator (which is really cool): how did you set it up to translate your page directly without going to the google page?

    Reply
  11. Drew McManus says:
    March 15, 2009 at 5:01 am

    one more puzzler with the translator: when I try to use it on a blog with only two tabs (subscribe as the first) it doesn’t seem to work. I changed the settings from slot 5 to slot 2 in the top and bottom code but no go. Thoughts?

    Reply
  12. Martin PWPH says:
    March 15, 2009 at 5:22 am

    For the Global Translator to translate directly I’m just using the normal plugin options. I think that’s how it works by default. Mind you I’m using version 1.2 of the Global Translator, the latest did not work for me so the plugin author might have changed things.

    For the second problem, In side-tabs.php find the following code:

     
  <a href="tabSwitch_2(1, 4, 'tab_', 'content_');" rel="nofollow"></a>
  <a href="tabSwitch_2(2, 4, 'tab_', 'content_');" rel="nofollow"></a>  
  <a href="tabSwitch_2(3, 4, 'tab_', 'content_');" rel="nofollow"></a>
  <a href="tabSwitch_2(4, 4, 'tab_', 'content_');" rel="nofollow"></a>

    If you have only two tabs it should look something like this:

     
  <a href="tabSwitch_2(1, 2, 'tab_', 'content_');" rel="nofollow"></a>
  <a href="tabSwitch_2(2, 2, 'tab_', 'content_');" rel="nofollow"></a>

    As you can see the numbers change depending on how many tabs exist etc.

    For example, a 3 tab sidebar would be:

    1, 3
    2, 3
    3, 3

    A 5 tab sidebar would be:

    1, 5
    2, 5
    3, 5
    4, 5
    5, 5

    Etc, etc…

    Reply
  13. Drew McManus says:
    March 15, 2009 at 6:04 am

    That’s exactly what I did for the lower number of tabs but still no go. It isn’t a deal breaker so no worries.

    Reply
  14. Martin PWPH says:
    March 15, 2009 at 6:18 am

    If you want send me your side-tabs.php code via email, i’ll fix it.

    http://www.premiumwphosting.com/contact/

    Reply
  15. Drew McManus says:
    March 15, 2009 at 6:20 am

    you beat me to the punch, it’s on the way…
    Thanks!

    Reply
  16. Martin PWPH says:
    March 15, 2009 at 6:25 am

    Cheers, got the email and sent you a new code. Let me know how it goes!

    Reply
  17. John says:
    March 31, 2009 at 6:25 am

    I tried the recently popular tweak. When I remove the Alex King code and add the Recently Popular snippet. All my right side bar widgets disappear and the Recently Popular plug-in does not work. (Recently Popular plug-in is activated)

    Maybe this tweak ties in with replacing the standard tab panel with WP-Cumulus ?

    I have not changed the default tab panel because I am fine with it as long as I could get it to work with Recently Popular.

    Reply
  18. Ghengis says:
    April 24, 2009 at 6:15 am

    Martin,

    I am trying to get small widebar widgets like yours (catagory, link ets) that can fit in one sidebar.

    Reply
  19. deffa says:
    January 12, 2011 at 10:51 am

    thank you, because your article finally solved my problem

    Reply

Speak Your Mind

*