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

In part two of this guide I will be showing you some more 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.

Recent Comments:

This quick guide will show you how to add a Recent Comments listing to your sidebar tabs panel just as shown on our homepage. This guide we will be scrapping our Subscribe tab and changing it to a Recent Comments tab instead.

Open side-tabs.php and find the following bit of code:

<?php _e("Subscribe"); ?>

Change it to:

<?php _e("Recent Comments"); ?>

Now find the following chunk of code and remove it:

<div class="sidebox">
<?php if ( $wp_vybe_fb_feed_id ) { ?>
			<form action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=<?php echo $wp_vybe_fb_feed_id; ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
				<input type="hidden" value="http://feeds.feedburner.com/~e?ffid=<?php echo $wp_vybe_fb_feed_id; ?>" name="url"/>
				<input type="hidden" value="<?php bloginfo('name'); ?>" name="title"/>
				<input type="hidden" name="loc" value="en_US"/>
				<p><?php _e("Get the latest updates via email."); ?><br /><br />
				<input type="text" style="width:140px" name="email" value="<?php _e('enter email address'); ?>" /> <input type="submit" value="<?php _e('Subscribe'); ?>" /><br />
<small><?php _e('Privacy guaranteed. We will not share your information.'); ?></small></p>
			</form>
<?php } elseif ( $wp_vybe_alt_email_code ) { ?>
			<?php echo stripslashes($wp_vybe_alt_email_code); ?>
<?php } else { ?>
			<p><?php _e('This feature has not been activated yet.'); ?></p>
<?php } ?>
		</div>

Now you will need to place the following code into the position where the code above has been removed:

    <?php $comments = $wpdb->get_results("SELECT comment_author, comment_author_url, comment_ID, comment_post_ID, comment_content, comment_author_email, comment_date FROM $wpdb->comments WHERE comment_approved = '1' AND comment_type = '' ORDER BY comment_date_gmt DESC LIMIT 5") ?>
    <ul>
        <?php if ( $comments ) : foreach ($comments as $comment) : ?>
        <li class="clearfix">
            <?php if (function_exists('get_avatar')) { ?>
            <?php
            $gravsize = 36;
            echo get_avatar($comment,$size="$gravsize");
            ?>
            <?php } else { ?>
            <?php if ( !empty( $comment->comment_author_email ) ) {
            $gravsize = 36;
            $md5 = md5( $comment->comment_author_email );
            echo "<img class='avatar' src='http://www.gravatar.com/avatar.php?gravatar_id=$md5&amp;size=$gravsize' alt='' />"; } ?>
            <?php } ?>
            <?php comment_excerpt() ?><br />
            <strong><?php comment_author_link() ?> | <?php comment_date('jMy'); ?> | <a class="more-link" href="<?php echo get_permalink($comment->comment_post_ID); ?>#comment-<?php comment_ID(); ?>">More</a></strong>
        </li>
<?php endforeach; endif; ?>
    </ul>

And that’s it! Now you will have your Recent Comments in your sidebar tabs panel. I also want to credit WP-Vybe creator Michael Pollock for the modified Recent Comments code.

Tidying Up Headings:

One thing I like in themes is having all headings different from the main content text. Here is a guide to correct some headings throughout your WP-Vybe theme.

Open index.php in your WP-Vybe folder and find the following bit of code:

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

Change it to:

<strong><?php _e("Recent Articles"); ?></strong>

Open single.php in your WP-Vybe folder and find the following bit of code:

<?php _e("Entry Information"); ?>

Change it to:

<?php _e("Entry Information"); ?></strong>

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

<?php comments_number('No Responses', 'One Response', '% Responses' );?> to "<?php the_title(); ?>"

Change it to:

<strong><?php comments_number('No Responses', 'One Response', '% Responses' );?> to "<?php the_title(); ?>"</strong>

You can even modify the side tabs headings text to make it match the rest of your sidebar. Only use this modified code if you have not made any changes to this part of your side-tabs.php. You will need to change these by hand if your side-tabs.php has been heavily modified!

Open side-tabs.php in your WP-Vybe folder and find the following lines:

	<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 it to:

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

That’s it, all your headings should now be better and in bold.

Social Panel:

One tweak I like is to keep all my social bookmarking links in their own section instead of being inside a post and making it look cluttered. As you can see on our site the social bookmarks container is in between the post and entry information section.

This modification can be made by installing the plugin called Sociable then activating it. Now once activated navigate your way to the Sociable settings section within your dashboard and untick all of the Position options. Also make sure the ‘Use the sociable stylesheet‘ option is ticked.

First you will need to open your single.php and find:

						</div>
 
						<h3 id="postinfo"><?php _e("Entry Information"); ?></h3>

You will need to add the following lines of code inbetween those two lines of code above:

				<div class="banner468">
 
        </div>

Now once that is done you can add the Sociable function template code in between the two new lines of code that was added. The Sociable template code is below:

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

It all should look like the following code:

						</div>
 
				<div class="banner468">
 
         <?php if (function_exists('sociable_html')) {
         echo sociable_html();
         } ?>
 
        </div>
 
						<h3 id="postinfo"><?php _e("Entry Information"); ?></h3>

You can now upload the updated single.php to your server and the end result will look like this:

Instead of using Sociable you can display anything you prefer in the container. It is very flexible and can be used for just about anything. As seen on our site we have included both Sociable and GD Star Ratings in the one container.

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

Recent Comments:

Tidying Up Headings:

Leave a Reply:

Social Panel:

Comments

Speak Your Mind Cancel reply

Current Nameservers

Subscribe to our news blog

Twitter Feed

WordPress Download Counter

Customers