Style featured posts with WP-Sticky plugin

WP-Sticky is a plugin by Lester Chan, used to sticky blog posts that you want more attention for. If you sticky a post, it’ll stay at the top of your blog page, regardless of its published date.

That is especially useful if you publish multiple times per day with the need to feature one important post. You could simply publish the most important post in the morning, sticky it, and continue publishing instead of waiting to publish the most important one as the last post, just so it would be the first blog post your visitors see.

To install it, you simply download, unpack, and upload its folder to your Plugins folder. To use it, while editing or publishing a post, go to Post Sticky Status and select the status.

stick-status.png

(There’s an additional feature, Announcement. Announcement posts show up above Sticky posts, which I guess… is useful for highlighting the most important post of all stickied posts.)

Beyond what WP-Sticky was built for, there’s a

post_sticky_status()

function that you can use to mark your stickied posts. By default, that function outputs texts only. For example, it’ll output Sticky or stickied posts and Announcement for announcement posts. You can customize it to output XHTML too.

How is that function useful for you in terms of design? Well, here’s your typical posts listing template:

<div class=”post”>
<h2><?php the_title(); ?></h2>
<div class=”entry-content”>
<?php the_content(); ?>
</div>
</div>

What if we insert the

post_sticky_status()

function as a CSS selector like this:

<div class=”post <?php post_sticky_status(); ?>”>
<h2><?php the_title(); ?></h2>
<div class=”entry-content”>
<?php the_content(); ?>
</div>
</div>

After inserting it, you end up with:

<div class=”post Sticky”>

Now, you have a conditional CSS selector that will only appear for posts marked as Sticky. That alone gives you lots of options to customize. You can use different background colors, images, and etc. to highlighting Sticky posts. Here’s an example of highlight a sticky post with a background image:

sticky-styling.png

Or, you could simply highlight it by changing the back color like this:

.Sticky{
background: #fbfbfb;
}

sticky-styling-2.png

It doesn’t stop there. You can go on to customize post title link color, font size, line-height, and etcetera. Also, you don’t have to use the

post_stick_status()

function as a conditional CSS selector. Remember I mentioned that you could customize that function to output xhtml too?

Here’s how:

<?php post_sticky_status(”,”); ?>

. Everything in the first set of single quotes appear before the word Sticky or Announcement; everything in the second set of single quotes appears after the same word.

For example:

<?php post_sticky_status(’<span>’,'</span>’); ?>

. You would end up with

<span>Sticky</span>

.

Warning: If you’d like to test this plugin, do not copy and paste my codes. I posted my codes as texts, not actual codes, so copy and pasting will not give you the proper format.

What's Next?
Related Posts
TiJé:

How… I’ve ever used this plugin but didn’t think to use it like this. It’s a good idea I will test.

i’m currently using it and you’re right it’s very useful if you blog more one in one day.

[…] Style featured posts with WP-Sticky plugin | WPDesigner If you sticky a post, it’ll stay at the top of your blog page, regardless of its published date. (tags: wordpress plugins) I wrote this on August 4, 2007 at 7:23 am and filed it under Uncategorized. Bookmark the permalink. Follow comments with the RSS feed for this post. Post a comment or leave a trackback. « links for 2007-08-03 […]

Tavo!:

Thanks man!
This is exactly what I need!

Myriam:

I am sorry, just starting with Wordpress so I do not understand very well the steps to follow, but would like to have a sticky post too.

I downloaded WP-Sticky already, but where is this “plugin folder”. I can not see it in my Dashboard… Is this an extra service (payment)?

Thank you.

Myriam - It’s in your hosting account directory, not the dashboard. wp-content/plugins/

After you’ve uploaded your plugin, go to the dashboard Plugin management page and activate the newly uploaded plugin.

Myriam:

Hello,

I did not rent a hosting service yet, and I was thinking about not to have one till my blog growns up a bit.

Well, I suppose there is no way, then. I mean, if I only have Wordpress free hosting.

But thank you very much, Great Potato.

:)

I tried this tutorial and I can’t my posts to stick. What am I doing wrong?

Thanks 4 tutorial!

Yea thanks for this. :)

Hey Lester. This looks like a good tutorial and I can see how to style the post itself but I have somewhat of a dilemma. I’m wanting to not only change the background of the sticky post but I also want to change the postmeta information. If you look at my site I have a scrolling box on the top left. I want to put my sticky posts inside that box. Currently it is a table with 3 rows. Do you have any idea how I can put my sticky posts inside that box?

Thanks
Kelly

Dave:

I found if I used the sticky option it wouldn’t work. But then I switched it to announcement and it worked. The only trouble is now you can’t use the announcement option as it was intended but oh well.

Reply
Comment Policy
  • Theme support questions should be posted at the support forums.
  • Name and Email are required. Email is never published.
  • You grant this site perpetual license to reproduce your words and name/website in attribution.
  • Inappropriate comments will be removed at my discretion.
Close
Powered by ShareThis