WordPress Content Teaser with Thumbnail

Here’s the source link. Click Here

I want to make 4 preview post in the homepage of my website just like in YAHOO. Teasers to be exact.

The first thing i did was get the x number of character from the post and show it where it should be. So i use the function “substr” in php.

$content=get_the_content();    // get the whole content of the post
$content2=substr(strip_tags($content), 0, 100);  //rip of x number of characters from the $content
echo $content2;  //print it.

Then i integrated it with the code showed in the link above. After that, I went to the wp-include folder and looked for the function.php and inserted this chunk of code.
// Retrieve the src of first image in a post
function bm_extract_string($start, $end, $original) {
$original = stristr($original, $start);
$trimmed = stristr($original, $end);
return substr($original, strlen($start), -strlen($trimmed));
}
function getFirstImage() {
$content = get_the_content();
$pic_string = bm_extract_string('src="','" ',$content);
$imagesize = getimagesize($pic_string);
list($width, $height, $type, $attr) = getimagesize($pic_string);
$link = get_permalink();
$title = get_the_title($post->post_title);
echo '<a
href="'.$link.'" style="background:url('.$pic_string.'); display:block;
width:'.$width.'px; height:'.$height.'px;" title="'.$title.'"></a>';
}

If the post doesn’t have an image it will print error notice that’s why i inserted conditional codes that will check if the post has an image in it or doesn’t have.

// Retrieve the src of first image in a post
function bm_extract_string($start, $end, $original) {
$original = stristr($original, $start);
$trimmed = stristr($original, $end);
return substr($original, strlen($start), -strlen($trimmed));
}
function getFirstImage() {
$content = get_the_content();
if(bm_extract_string('src="','" ',$content)) // this is the conditional statement i've inserted
{
$pic_string = bm_extract_string('src="','" ',$content);
$imagesize = getimagesize($pic_string);
list($width, $height, $type, $attr) = getimagesize($pic_string);
$link = get_permalink();
$title = get_the_title($post->post_title);
//echo '<a href="'.$link.'" style="background:url('.$pic_string.'); display:block; width:'.$width.'px; height:'.$height.'px;" title="'.$title.'"></a>';
echo '<img src="'.$pic_string.'" height="100" align="left" style="margin-right:5px;">';
}
else
{
// this returns nothing if post doesnt have an image
return 0;
}
}

NOTE (code above): do not put this code outside the tag or else it will send a warning that has says like “Header already sent”. Place the code inside the same tag.

Back to the index.php part, i want the number of teasers be limited to 4 latest posts. so i used a $ctr variable counter and initialized it to 4. After that i used the while process that is being taught in WordPress Codex for posts.

Finally, put the following snippets in index.php (template folder) where the four teasers must appear.


<div>
<?php query_posts('category_name=teaser'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if($ctr <= 4) // checks if there are already four posts listed in the index page, if not, proceed
{
?>
<div>
<p style="margin-left:auto; margin-right:auto; color:#c00000; margin-top:10px; margin-right:5px;">
<?php getFirstImage(); ?>
<?php $link=get_permalink();
echo '<span style="font-weight:bold; font-size:16px; margin-bottom:15px"><a href="'.$link.'">';
?>
<?php the_title(); ?></a></span>


<br />


<?php
$content=get_the_content();
//$content2=substr($content,0,100);
$content2=substr(strip_tags($content), 0, 100);
echo $content2;
$link=get_permalink();
echo "...";
echo '<br><a href="'.$link.'">Read More >></a>';
//echo strip_tags($content);
$ctr++;
}
else //if the $ctr reaches value four, the loop stops or breaks
{
break;
}
?>
</p>

Or you can set the number of posts that can be displayed in the index file via the Dashboard. Go to Settings > Reading then find the “Blog pages show at most” and set it to 4 or whatever number of posts you like.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s