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

i

Since switching to WordPress I’ve been using the WP-PostViews and Efficient Related Posts plugins. Although the inFocus theme I use now comes with its own popular posts and related posts widgets I much prefer the functionality of the aforementioned plugins.

For example, WP-PostViews displays popular posts based on post views whereas the inFocus version uses the number of comments to determine a post’s popularity. And while there appears to be little if any difference in how Efficient Related Posts and the inFocus version determine related posts, the latter does so on-the-fly whereas the former pre-determines them, thus reducing the load on the server.

These instructions are only applicable for versions of inFocus up to and including v1.6

It’s simple enough to disable the inFocus widgets using the theme’s admin panel and activate the WP-PostViews and Efficient Related Posts plugins. Unfortunately though, when displayed the layout and styling for both these plugins doesn’t really fit with the overall inFocus theme.

So, I thought I’d have a try at styling the output from these plugins to look exactly like the inFocus version. However, this proved not to be a simple case of adding the appropriate inFocus CSS classes to the plugins as the inFocus widget outputs some additional HTML tags which are difficult to add to either plugin.

Please note that this has been tested with

  • WordPress v2.9.2
  • inFocus v1.3
  • WP-PostViews v1.5
  • Effecient Related Posts v0.3.5 and v0.3.6

 

 

1. The WP-PostViews Plugin

Before we start changing the plugin it’s a good idea to have a basic understanding of how most or least popular posts are displayed.

The functions used are contained in wp-content/plugins/wp-postviews/wp-postviews.php. The function I’ll be focusing on is the one that displays the most viewed posts: get_most_viewed().

The output from this function is formatted as per the Most Viewed Template in Settings > PostViews. This is the default template:

<li>
    <a href="%POST_URL%"  title="">%POST_TITLE%</a>
    - %VIEW_COUNT% views
</li>

 

And this is how the template displays the output:

Original output from the WP-PostViews plugin

Original output from the WP-PostViews plugin

 

 

The variables used in the template, %POST_URL%, %POST_TITLE% and %VIEW_COUNT% are defined in get_most_viewed():

$temp = stripslashes($views_options['most_viewed_template']);
$temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp);
$temp = str_replace("%POST_TITLE%", $post_title, $temp);
$temp = str_replace("%POST_EXCERPT%", $post_excerpt, $temp);
$temp = str_replace("%POST_CONTENT%", $post_content, $temp);
$temp = str_replace("%POST_URL%", get_permalink(), $temp);
$output .= $temp;

 

2. Styling the Output from the WP-PostViews Plugin

The get_most_viewed() function only makes available limited post data to use in the template. So we first have to get some additional post information.

$temp = stripslashes($views_options['most_viewed_template']);
$temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp);
$temp = str_replace("%POST_TITLE%", $post_title, $temp);
$temp = str_replace("%POST_EXCERPT%", $post_excerpt, $temp);
$temp = str_replace("%POST_CONTENT%", $post_content, $temp);
$temp = str_replace("%POST_URL%", get_permalink(), $temp);
$temp = str_replace("%POST_DATE%", mysql2date('F j, Y', $post->post_date, false), $temp);
$temp = str_replace("%ARCH_URL%", get_month_link(mysql2date('Y', $post->post_date, false), mysql2date('m', $post->post_date, false)), $temp);
$temp = str_replace("%ARCH_TEXT%", mysql2date('F Y', $post->post_date, false), $temp);
$temp = str_replace("%POST_IMAGE%", userfunc_post_image ($post->ID), $temp);
$temp = str_replace("%TITLE_SHORT%", userfunc_truncate($post_title,47,70), $temp);
$output .= $temp;

 

The new variables are:

  • %POST_DATE%: The post’s date in month/date/year format
  • %ARCH_URL%: The URL of the post’s monthly archive
  • %ARCH_TEXT%: The text for the title attribute of the monthly archive URL
  • %POST_IMAGE%: The post’s thumbnail image
  • %TITLE_SHORT%: A shortened version of the post’s title

Two items of note here are %POST_IMAGE% and %TITLE_SHORT% the values for which are returned from two user-defined functions: userfunc_post_image() and userfunc_truncate() respectively.

I took the code for userfunc_post_image() from the inFocus webtreats_recent_widget() function in lib/functions/widgets.php. It determines if the post has a thumbnail image associated with it and returns a link to either that image or a default image if one doesn’t exist.

<?php
function userfunc_post_image ($postID) {
	$meta_image = get_post_meta($postID, "post_image", true);
	if(!$meta_image) {
		return get_template_directory_uri() .'/images/empty_thumb.gif';
	} else {
		return WEBTREATS_SCRIPTS_FOLDER .'/thumb.php?src=' .$meta_image. '&amp;w=60&amp;h=60&amp;zc=1&amp;q=100';
	}
}	// userfunc_post_image
?>

 

The second, userfunc_truncate() is used to truncate long post titles which can break the layout if too long.

<?php
function userfunc_truncate ($string_to_truncate, $greater_than, $not_less_than) {
	if (strlen($string_to_truncate) > $greater_than && !(strlen($string_to_truncate) < $not_less_than)) {
		return substr($string_to_truncate, 0, $greater_than) . " [...]";
	} else {
		return $string_to_truncate;
	}
}	// userfunc_truncate
?>

Both these functions should be placed in your own function library for two reasons. Firstly, to keep them separate from both the plugin’s and the theme’s code. Secondly, we’ll be using them again for styling the Efficient Related Posts plugin. If you don’t currently use a function library you can read about setting one up here.

Now that we have our additional post data we can create a new PostViews template like so:

<li>
	<a class='alignleft' href='%POST_URL%' title=''>
		<span class='small_frame'>
			<img src='%POST_IMAGE%' width='60' height='60' alt='%POST_TITLE%' />
		</span>
	</a>
	<a class='thumbnail_title' href='%POST_URL%' title='%POST_TITLE% (%VIEW_COUNT% views)' rel='bookmark'>%TITLE_SHORT%</a>
	<br/>
	<a class='date' href='%ARCH_URL%' title='Monthly Archive for %ARCH_TEXT%'>%POST_DATE%</a>
	<div class='clearboth'></div>
</li>

 

And this is how the template will display the output:

Modified output from the WP-PostViews plugin

Modified output from the WP-PostViews plugin

 

 

Next we’ll look at the Efficient Related Posts plugin.

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

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

Archives