PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Using Sticky Posts

Posted by on 8th Feb 2009 | 3 comments

A new feature with 2.7 is the sticky posts. You can write a post and set it to be sticky, and it’ll stay at the top of your front page until you unstick it. If you’ve also used the new post_class() tag, then you’ll easily be able to target the post and style it differently to the other posts on the page as you get a specific class of ‘sticky’.

However, you can go one step further and enhance the post further by adding an image to it. You could just attach an image to the post and then insert it into the post, but what happens when you’ve taken it off being a sticky post? You don’t want to have to remember to remove the image too when it can be done automatically for you :)

To detect if a post is a sticky post we use the is_sticky() conditional. Then, we want to check to see if there are any images attached to the post, as not every sticky post may have an image. So we can use the get_children() tag with a few parameters to narrow down the results.

The get_children() tag is similar to get_posts() except it is specifically to get any children of a specified post ID, which could include child pages of a static page, and file attachments such as documents and images. We, of course, want to limit this to just images, and we only want one, so we can do this using the following parameters:

post_type
This is the type of post we want to pull out. In this case we only want attachments
post_mime_type
We need to set this to image to ensure we only pull out images, as there could be other files attached to the same post
numberposts
This sets how many images are retrieved. -1 would give all, however for this example we just need 1
post_parent
We give the post ID as the post_parent
orderby
This is where we set the order if we’ve added more than one image to the post.

The code for this function then becomes;

$images =& get_children( 'post_type=attachment&post_mime_type=image&numberposts=1&post_parent='.$post->ID.'&orderby=rand' );

Running the get_children() function gives us an array of results if there are any, so we can check if this variable is empty, and if so then there aren’t any images to display. However, if it isn’t empty then we need to grab the attachment ID to get the image. Luckily WordPress has a handy function for this, wp_get_attachment_image. This accepts an attachment ID and a size (thumbnail, medium, full), and returns the specified image in the given size. Unfortunately the HTML image tag returned contains an empty alt attribute, which is a bit strange to be honest, considering the amount of usability and accessibility taken into consideration in WordPress. However, this is easily fixed by doing a simple string replace, and inserting the image title into the alt attribute.

We then just need to echo out the image.

Here’s the final code that can go right before the_content() template tag.

[sourcecode language="php"]< ?php if (is_sticky()) :
$images =& get_children( 'post_type=attachment&post_mime_type=image&numberposts=1&post_parent='.$post->ID.’&orderby=rand’ );

if (!empty($images)) :
foreach ( $images as $attachment_id => $attachment ) :
$hyperlink = wp_get_attachment_image( $attachment_id, ‘thumbnail’ );
echo str_replace(‘alt=””‘, ‘alt=”‘.$attachment->post_title.’”‘, $hyperlink);
endforeach;
endif;
endif;
?>[/sourcecode]

Of course you will want to target the image, probably floating it to the left of the content. To do this we can use the sticky class, and the image itself will have a class of attachment-size where size is the size of the image displayed. In the case above this would be image-thumbnail. So finally, to float the image to the left of the content and perhaps give it a slight border we could use

[sourcecode language="css"].sticky .attachment-thumbnail {
float: left;
margin: 0 10px 10px 0;
padding: 5px;
border: 1px solid #999;
}[/sourcecode]

If you wanted to take this idea one step further, and use this with a magazine theme, then you could alter the above statement using the is_sticky() condition to display the_content() if it’s a sticky post, and the_excerpt() if it isn’t.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

3 comments - Leave a reply
  • Posted by hamdi on 9th Feb 2009

    Oh my god.. this is what i search for…

    thank you very much..

  • Posted by diana on 11th Feb 2009

    great post! the post is really informative it give more information how to enhance more the post….i plan to create a post the vitaminsinwater.wordpress.com/ about Anti Aging Product thank for the information! it help me a lot

  • Posted by Antalya on 26th Feb 2009

    Really great article. Thanks, i love you guys.