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

i

3. The Efficient Related Posts Plugin

First, lets take a look at the plugin. This code block is part of the getRelatedPosts() function in wp-content/plugins/efficient-related-posts/efficient-related-posts.php. It generates the HTML which in turn displays the appropriate related posts:

if ( empty($relatedPosts) || $settings['num_to_display'] == 0 ){
	$output .= "<li>{$settings['no_rp_text']}</li>";
} else {
	$relatedPosts = array_slice($relatedPosts, 0, $settings['num_to_display']);
	foreach ( $relatedPosts as $p ) {
		/**
		 * Handle IDs for backwards compat
		 */
		if ( ctype_digit($p) ) {
			$related_post = get_post($p);
			$p = array(
				'ID'			=> $related_post->ID,
				'post_title'	=> $related_post->post_title,
				'permalink'		=> get_permalink($related_post->ID)
			);
		}
		$link = "<a href='{$p['permalink']}' title='" . attribute_escape(wptexturize($p['post_title']))."'>".wptexturize($p['post_title']).'</a>';
		$output .= "<li>{$link}</li>";
	}
}

$output = "<ul class='related_post'>{$output}</ul>";

if ( !empty($settings['title']) ) {
	$output = "<h3 class='related_post_title'>{$settings['title']}</h3>{$output}";
}

return $output;

The HTML is stored in two variables: $link and $output.

 

Here is the HTML the above code block generates:

<h3 class='related_post_title'>Related Posts</h3>
<ul class='related_post'>
	<li>
		<a href='http://www.tech-otaku.com/blogging/problem-read-more-link-urls-webtreats-infocus-wordpress-theme-solved/' title='A Problem with Read More Link URLs and Webtreats inFocus WordPress Theme: Solved'>A Problem with Read More Link URLs and Webtreats inFocus WordPress Theme: Solved</a>
	</li>
</ul>

 

And this is what is displayed in the browser:

Original output from the Efficient Related Posts plugin

Original output from the Efficient Related Posts plugin

 

 

4. Styling the Output from the Efficient Related Posts Plugin

To alter the HTML output from the plugin we need to amend the values stored in the $link and $output variables.

The plugin as-is only gives us access to limited post data: ID, title and permalink. So before we can amend the HTML we need to assign some additional post data to a new array named $x.

$this_post = get_post($p['ID']);
$x = array(
	'post_date'				=> mysql2date('F j, Y', $this_post->post_date, false),
	'archive_link_url'		=> get_month_link(mysql2date('Y', $this_post->post_date, false), mysql2date('m', $this_post->post_date, false)),
	'archive_link_text'	 	=> mysql2date('F Y', $this_post->post_date, false),
	'post_thumb'			=> userfunc_post_image ($p['ID']),
	'post_title_short'		=> userfunc_truncate($p['post_title'],47,70)
);

The new variables are:

  • post_date: The post’s date in month/date/year format
  • archive_link_url: The URL of the post’s monthly archive
  • archive_link_text: The text for the title attribute of the monthly archive URL
  • post_thumb: The post’s thumbnail image
  • post_title_short: A shortened version of the post’s title

Notice that to populate post_thumb and post_title_short we’re using the same two user-defined functions mentioned previously: userfunc_post_image() and userfunc_truncate().

Now that we have the additional post data we can include it in our HTML by amending the $link and $output variables. I’ve broken the $link variable string into separate lines to make the code more readable and also included some new line characters to make the HTML clearer should you wish to view the page source in a browser.

This is the new code block in its entirety. The changes required to the $link and $output variables are highlighted.

if ( empty($relatedPosts) || $settings['num_to_display'] == 0 ){
	$output .= "<li>{$settings['no_rp_text']}</li>";
} else {
	$relatedPosts = array_slice($relatedPosts, 0, $settings['num_to_display']);
	foreach ( $relatedPosts as $p ) {
		/**
		 * Handle IDs for backwards compat
		 */
		if ( ctype_digit($p) ) {
			$related_post = get_post($p);
			$p = array(
				'ID'			=> $related_post->ID,
				'post_title'	=> $related_post->post_title,
				'permalink'		=> get_permalink($related_post->ID)
			);
		}

		$this_post = get_post($p['ID']);
		$x = array(
			'post_date'				=> mysql2date('F j, Y', $this_post->post_date, false),
			'archive_link_url'		=> get_month_link(mysql2date('Y', $this_post->post_date, false), mysql2date('m', $this_post->post_date, false)),
			'archive_link_text'	 	=> mysql2date('F Y', $this_post->post_date, false),
			'post_thumb'			=> userfunc_post_image ($p['ID']),
			'post_title_short'		=> userfunc_truncate($p['post_title'],47,70)
		);

		$link = "<a class='alignleft' href='{$p['permalink']}' title='{$p['post_title']}'>". "\n".
		"<span class='small_frame'>". "\n".
		"<img src='{$x['post_thumb']}' width='60' height='60' alt='{$p['post_title']}' />". "\n".
		"</span>". "\n".
		"</a>". "\n".
		"<a class='thumbnail_title' href='{$p['permalink']}' title='{$p['post_title']}' rel='bookmark'>{$x['post_title_short']}</a><br/>". "\n".
		"<a class='date' href='{$x['archive_link_url']}' title='Monthly Archive for {$x['archive_link_text']}'>{$x['post_date']}</a>". "\n".
		"<div class='clearboth'></div>";

		$output .= "<li>" ."\n". "{$link}" ."\n". "</li>" ."\n"; 

	}
}

$output = "<ul class='thumbnail_list'>" ."\n". "{$output}</ul>";

if ( !empty($settings['title']) ) {
	if (!(empty($relatedPosts) || $settings['num_to_display'] == 0)) {
		$output = "<h3 class='related_post_title'>{$settings['title']}</h3>" ."\n". "{$output}";
		} else {
		$output = "<h3 class='related_post_title'>{$settings['no_rp_text']}</h3>";
	}
}

return $output;
}

 

The plugin will now generate this HTML:

<h3 class='related_post_title'>Related Posts</h3>
<ul class='thumbnail_list'>
	<li>
		<a class='alignleft' href='http://www.tech-otaku.com/blogging/problem-read-more-link-urls-webtreats-infocus-wordpress-theme-solved/' title='A Problem with Read More Link URLs and Webtreats inFocus WordPress Theme: Solved'>
		<span class='small_frame'>
			<img src='http://www.tech-otaku.com/wp-content/themes/infocus-v13/images/empty_thumb.gif' width='60' height='60' alt='A Problem with Read More Link URLs and Webtreats inFocus WordPress Theme: Solved' />
		</span>
		</a>
		<a class='thumbnail_title' href='http://www.tech-otaku.com/blogging/problem-read-more-link-urls-webtreats-infocus-wordpress-theme-solved/' title='A Problem with Read More Link URLs and Webtreats inFocus WordPress Theme: Solved' rel='bookmark'>A Problem with Read More Link URLs and Webtreats inFocu [...]</a><br/>
		<a class='date' href='http://www.tech-otaku.com/2010/03/' title='Monthly Archive for March 2010'>March 5, 2010</a>
		<div class='clearboth'></div>
	</li>
</ul>

 

And this is how it will be displayed:

Modified output from the Efficient Related Posts plugin

Modified output from the Efficient Related Posts plugin

 

 

Now we’re ready to include the plugins in the inFocus theme.

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