WordPress seems to be popping up more and more these days. Each project that I am to undertake I always find myself thinking “WordPress can do that”, which in reality 99% of the time it is true.
I will begin (and continue to) post functions which you can add to your theme’s functions.php file to help speed up production.
Overview
This function will allow you to have previews of posts displayed (including preview image, date/time) similar you my front page.
Step 1:
This is the easiest step, simply copy and paste the following code into you themes functions.php file.
<?php
function hasExcerpt( $id = 0 ) {
$post = &get_post( $id );
return ( ! empty( $post->post_excerpt ) ? $post->post_excerpt : false );
}
function get_latest( $cat_id, $amount = 10, $thumb = false, $offset = 0 ) {
$featuredArray = array();
$featured = query_posts('cat=' . $cat_id . '&posts_per_page=' . $amount . '&post_status=publish&offset=' . $offset);
foreach( $featured as $fPost ) {
$array = array();
if ( has_post_thumbnail( $fPost->ID ) || $thumb === false ) {
$array['img'] = get_the_post_thumbnail( $fPost->ID, 'featured' );
if( $excerpt = hasExcerpt( $fPost->ID ) ) {
$array['summary'] = $excerpt;
}elseif( strpos( $fPost->post_content, "<!--more-->" ) != 0 ) {
$split = explode( "<!--more-->", $fPost->post_content );
$array['summary'] = nl2br( strip_tags( $split[0] ) );
}else{
$array['summary'] = nl2br( substr( strip_tags( $fPost->post_content ), 0, 455 ) );
}
$array['date'] = date( "F jS Y", strtotime( $fPost->post_date ) );
$array['permalink'] = get_permalink( $fPost->ID );
$array['title'] = $fPost->post_title;
$featuredArray[] = $array;
}
}
return $featuredArray;
}
?>
Explanation
Category ID – If your not sure what the id of the category is, if you have firebug installed on FireFox, go to edit the post, on the right hand-side where the category check-boxes are right click and inspect element, and you will find that the parent (<li>) will have an id “category-” followed by the category id number.
Amount - relates to the amount of latest posts from this category (is 10 by default) and in this example we want it to be 2.
Thumbnail - is a Boolean value, set true if you want to only use posts which have a “featured image” set (yet again like my home page).
Offset - was added recently due to if you don’t want to use 3 separate categories and only use one, then you can call the function 3 times instead of looping or any other hack methods making the code run more efficiently.
The hasExcerpt() function is slightly different from the cores has_excerpt() which only seems to return Boolean (true not being the excerpt itself but actually “true”) which the above returns false or the content if present.
Step 2:
Add the following to your template (a separate temple for your home page is what I would suggest) setting your desired parameters.
<?php
/* Get 2 posts from cat 3 with images */
$first_col_latest = get_latest( 5, 2, true );
foreach( $first_col_latest as $latest ) {
echo '<div class="block">';
echo ' <a href="' . $latest['permalink'] . '">' . $latest['img'] . '</a>';
echo " <h2>" . $latest['title'] . "</h2>";
echo " <p>" . $latest['summary'] . "</p>\n";
echo ' <span class="icon"></span><p><a href="' . $latest['permalink'] . '">Continue to read.</a></p>';
echo '</div>';
}
?>
If you run the above code you will see that if you have added a featured image to your post, the code should be displaying (if not, please relate to the final few paragraphs at the bottom of this page) a 455 character summary, the featured image, time and date posted and a link to the full post.
I have also integrated the ability to check to see if firstly an excerpt for the post has been added which will display that instead of the first 455 characters. If an excerpt has not be added it will check to see if the more tag is in use and use that data instead.
About the featured image
More than like you will not have figured out why the image is not displaying. Firstly, to use custom image sizes, you will need the following in your functions.php file.
<?php add_theme_support( 'post-thumbnails' ); add_image_size( 'featured', 220, 110, true ); ?>
The above code firstly enables the use of custom thumbnails and secondly defines a reference (featured) and also sets a height and width.
Once this code is inserted, from then on when you upload a new image WordPress will create a separate image scaled/cropped (http://codex.wordpress.org/Function_Reference/add_image_size for more details) to the size you have defined.
Hopefully you will find this snippet useful,
