inFocus WP Theme: Customising WP-PostViews and Efficient Related Posts Plugins

i

6. Adding the WP-PostViews Plugin to the Footer Looks Weird!

I have implemented the changes detailed below on this blog without issue. However, having done so on a local testing server I inadvertently reverted to a prior version of the WP-PostViews plugin. Subsequently, the WordPress install was rendered totally inaccessible. I can’t say for certain that this was the cause, but coincidence? I think not. You should of course take all necessary precautions, DB backups etc, before making these changes.

All well and good, but if you now want to include the WP-PostViews plugin in the inFocus Footer as well this is what you’ll get:

WP-PostViews plugin displayed in the footer

WP-PostViews plugin displayed in the footer

 

 

Hmmmmm…. not pretty. The problem is that the plugin only allows for one Most Viewed Template to be used. We need a way to define and use a second template. To do this we need to first amend the plugin’s configuration settings.

Open the plugins/wp-postviews/postviews-options.php file and locate this code block:

### Form Processing
// Update Options
if(!empty($_POST['Submit'])) {
	$views_options = array();
	$views_options['count'] = intval($_POST['views_count']);
	$views_options['exclude_bots'] = intval($_POST['views_exclude_bots']);
	$views_options['display_home'] = intval($_POST['views_display_home']);
	$views_options['display_single'] = intval($_POST['views_display_single']);
	$views_options['display_page'] = intval($_POST['views_display_page']);
	$views_options['display_archive'] = intval($_POST['views_display_archive']);
	$views_options['display_search'] = intval($_POST['views_display_search']);
	$views_options['display_other'] = intval($_POST['views_display_other']);
	$views_options['template'] =  trim($_POST['views_template_template']);
	$views_options['most_viewed_template'] =  trim($_POST['views_template_most_viewed']);
	$update_views_queries = array();

After line 42, insert this highlighted code:

	$views_options['most_viewed_template'] =  trim($_POST['views_template_most_viewed']);
	$views_options['most_viewed_template_footer'] =  trim($_POST['views_template_most_viewed_footer']);
	$update_views_queries = array();

We now have a new option named most_viewed_template_footer which will store the additional template we’ll be using named views_template_most_viewed_footer.

 

Next, locate this code block:

<script type="text/javascript">
	/* <![CDATA[*/
	function views_default_templates(template) {
		var default_template;
		switch(template) {
			case 'template':
				default_template = "<?php _e('%VIEW_COUNT% views', 'wp-postviews'); ?>";
				break;
			case 'most_viewed':
				default_template = "<li><a href=\"%POST_URL%\"  title=\"%POST_TITLE%\">%POST_TITLE%</a> - %VIEW_COUNT% <?php _e('views', 'wp-postviews'); ?></li>";
				break;
		}
		jQuery("#views_template_" + template).val(default_template);
	}
	/* ]]> */
</script>

This JavaScript function is executed when one of the two Restore Default Template buttons is clicked in Settings > PostViews and, as you’d expect, restores the appropriate default template depending on the value of the string passed to it. Currently, these values are either template or most_viewed.

After the second case statement add this highlighted code block:

			case 'most_viewed':
				default_template = "<li><a href=\"%POST_URL%\"  title=\"%POST_TITLE%\">%POST_TITLE%</a> - %VIEW_COUNT% <?php _e('views', 'wp-postviews'); ?></li>";
				break;
			case 'most_viewed_footer':
				default_template = "<li> \n\t<a href=\"%POST_URL%\"  title=\"%POST_TITLE% (%VIEW_COUNT% views)\">%POST_TITLE% </a> \n</li>";
				break;
		}
		jQuery("#views_template_" + template).val(default_template);

Now we have the HTML for our new template, stored in the variable default_template, should we wish to restore it to it’s default.

The third and final change we need to make to this file is to add the form elements to Settings > PostViews that will allow us to modify and save the HTML for the new template.

 

Find this code block and immediately after the closing </tr> tag insert the highlighted code:

<tr>
			<td valign="top">
				<strong><?php _e('Most Viewed Template:', 'wp-postviews'); ?></strong><br /><br />
				<?php _e('Allowed Variables:', 'wp-postviews'); ?><br />
				- %VIEW_COUNT%<br />
				- %POST_TITLE%<br />
				- %POST_EXCERPT%<br />
				- %POST_CONTENT%<br />
				- %POST_URL%<br /><br />
				<input type="button" name="RestoreDefault" value="<?php _e('Restore Default Template', 'wp-postviews'); ?>" onclick="views_default_templates('most_viewed');" class="button" />
			</td>
			<td valign="top">
				<textarea cols="80" rows="15"  id="views_template_most_viewed" name="views_template_most_viewed"><?php echo htmlspecialchars(stripslashes($views_options['most_viewed_template'])); ?></textarea>
			</td>
		</tr>
		<tr>
			<td valign="top">
				<strong><?php _e('Most Viewed Template [Footer]:', 'wp-postviews'); ?></strong><br /><br />
				<input type="button" name="RestoreDefault" value="<?php _e('Restore Default Template', 'wp-postviews'); ?>" onclick="views_default_templates('most_viewed_footer');" class="button" />
			</td>
			<td valign="top">
				<textarea cols="80" rows="15"  id="views_template_most_viewed_footer" name="views_template_most_viewed_footer"><?php echo htmlspecialchars(stripslashes($views_options['most_viewed_template_footer'])); ?></textarea>
			</td>
		</tr>
	</table>

So we can better understand how these changes tie together, lets take a look at a few things.

On line 196 we’ve defined the Restore Default Template button which, when clicked, will execute the JavaScript function views_default_templates passing it the string most_viewed_footer.

Line 199 defines the textarea where we can view and modify our new template. The textarea has an id of views_template_most_viewed_footer which is used when populating the new option we defined earlier: most_viewed_template_footer. In turn, the contents of this option are displayed as the current template.

 

Now that we have our new template we need to tell the inFocus theme which template it should use. You may recall that to include the WP-PostViews plugin we have this line of code in lib/includes/template-single.php:

<?php get_most_viewed('post', 5); ?>

The first parameter passed to get_most_viewed() determines if we want to show posts, pages or both. The second, determines the number of posts to display. If we look at the get_most_viewed() function in wp-content/plugins/wp-postviews/wp-postviews.php we can see that it takes another two parameters: $chars and $display.

function get_most_viewed($mode = '', $limit = 10, $chars = 0, $display = true) {

If omitted, these parameters are defaulted to 0 and true respectively.

We need to add a fifth parameter, $use_infocus_theme_style, with a default value of true like so:

function get_most_viewed($mode = '', $limit = 10, $chars = 0, $display = true, $use_infocus_theme_style = true) {

Next, locate this line:

$temp = stripslashes($views_options['most_viewed_template']);

And replace the entire line with this:

if ($use_infocus_theme_style) {
	$temp = stripslashes($views_options['most_viewed_template']);
} else {
	$temp = stripslashes($views_options['most_viewed_template_footer']);
}

Now if we omit the $use_infocus_theme_style parameter it will display posts in the inFocus theme style. If we send it a value of false it will display posts using our new template.

 

And finally. To display posts in the Footer we’d normally add the WP-PostViews widget to the Footer sidebar. However, the widget has no way of knowing which template to use. So, we have to add some PHP code directly to the Footer sidebar that will execute the get_most_viewed() function. We can’t use the Text widget to do this because it won’t accept PHP code, only HTML and text.

First, download and install the PHP Code Widget WordPress plugin. Next, add the PHP Code widget to the Footer’s sidebar and paste this code block into it:

<?php get_most_viewed('post', 5, 0, true, false); ?>

And that’s it!

 

In conclusion then, this is a fairly lengthy customisation for something that’s entirely cosmetic and perhaps quite trivial. Whether it’s worth the effort or not, I’ll leave up to you.

UPDATE 21st March 2010: My apologies to anyone who’s previously implemented this change and noticed when viewing their blog in Safari for Mac, and possibly Windows, that the display of related and popular posts was being overlaid with subsequent page elements. This was due to using <div class=”clearboth” /> instead of <div class=”clearboth”></div>. The incorrect code was included in the WP-PostViews Template and the Efficient Related Posts’ file efficient-related-posts.php. All 3 references in this post have now been corrected.

About the author

A native Brit exiled in Japan, Steve spends too much of his time struggling with the Japanese language, dreaming of fish & chips and writing the occasional blog post he hopes others will find helpful.

22 responses

Leave a Reply to tolu Cancel reply

21 Comments

    • The number is formatted using number_format_i18n on line 235 of wp-content/plugins/wp-postviews/wp-postviews.php like so:

      	$temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp);
      

      You could change it using a function similar to the one described here.

      Regards, Steve

  • Hi Steve, my question is not related to this post but since you have a lot of experience in this field I wanted to ask, have you come across any wordpress plugin that can bookmark to various sites from within the worpress admin panel rather then from the site itself. I mean say there are buttons like the bold, italics, etc. for various social sites and you can bookmark the post while writing the post itself. Please help I require it urgently. If not what is the way I can proceed I mean coding one myself with your assistance if you would not mind.

    • dev,

      ….i can provide snapshots if required

      Sure. These will help, but without seeing the code you’re using it may be difficult to give a definitive answer.

      Regards, Steve.

  • Also the sliding Popular Post widget is affected. It too shows the image icons which doesnt look good. Sorry I am new to web development so the questions may be lame but please help me out.

  • After going through the steps you have mentioned the popular posts widget in my footer shows both the infocus style and modified footer template. First the infocus style on the top followed by the modified style in the bottom thus showing posts two times. Any idea why this is happening?

  • Thanks…I was able to find the discuss area and posted the question…so hopefully I’ll be able to figure it out. thanks!

  • Thanks Steve. I’ve scoured that page many times and cannot for the life of me figure out how to leave a comment. Nor can I seem to search the comments there for my issues. Quite frustrating. I have not altered anything in the theme, so…… And yes, to answer your questions, I’ve never experienced this before and I run quite a few wordpress sites. If you know of a way to actually contact the developer and I am totally missing it, please let me know. Thanks so much for your time!

    • Hi Charissa,

      Yeah, not being able to search the discussions is frustrating. At the bottom of the page though there’s a ‘Discuss This Item’ box would should allow you to post a comment. Failing that, you could try ‘Email Webtreats’ at the bottom of this page.

      Sorry I can’t be of more help. Steve.

  • I am banging my head against the wall trying to figure out why category links for my inFocus theme return ALL POSTS. Tag links work just fine. Cannot figure out what the heck is going on?
    Any insights would be smashing. Thanks!
    http://epoxy-surfboard-reviews.com/surfer-feedback
    Try clicking on a category link and you’ll get every post returned.
    Try clicking on a tag and you’ll get only the posts tagged with that particular name.
    ?????????????

    • Hi Charissa,

      I’ve not seen this before and without access to your WP install I’m afraid I can’t be of much of help. Does this only happen with the inFocus theme? If it does, you may do better contacting the inFocus developers.

      Good luck, Steve.

  • Neat! curious though, do you know if it is possible to filter the results of $output from your theme without modifying the code of the plugin itself? once you mod the plugin doesn’t that pretty much mean you can never upgrade? now that you can easily attach a featured image to a post (without a custom field) i hope the ERP author will include that as part of the array that is stored w/ each post.

    • Hi Kathy,

      …do you know if it is possible to filter the results of $output from your theme without modifying the code of the plugin itself?

      Not sure about this. You may want to ask the developers.

      …once you mod the plugin doesn’t that pretty much mean you can never upgrade?

      True to some extent, but it should be possible to apply the changes to the upgraded plugin. Just makes it not so simple to upgrade.

      Regards, Steve.

  • Tolu

    …how did you get to style the popular posts widget in your footer to look so much like the built-in widget? I’m getting some space after the h3 header before the first list item…

    Add this to the bottom of style.css:

    .widget_execphp h3.widgettitle {
    	margin: 0 !important;
    }
    

    Regards, Steve

  • By the way, how did you get to style the popular posts widget in your footer to look so much like the built-in widget? I’m getting some space after the h3 header before the first list item, can’t figure out why!

  • In your own words:
    “In conclusion then, this is a fairly lengthy customisation for something that’s entirely cosmetic and perhaps quite trivial. Whether it’s worth the effort or not, I’ll leave up to you.”

    I tell you what? It was really worth it!

1 Pingback

Steve

Recent Comments

Recent Posts