Wordpress Make A Featured Post Jquery Ticker | Wordpress Make featured Posts

Now a days blogging is very common, every human being wants to have their own blog or website where they can put some useful stuffs, but out of that blogs, there are some important or hot blogs, which we say as featured blogs, if you are wordpress user then why to adopt plugin, where you can create a simple one.
So lets get started.

First decide where you want to display the featured post section, usually it is on the home page. So considering it on home page, we will edit two files in this tutorial.
index.php
header.php

So lets get started with header.php, open that file, and in the head section put this small piece of code

[css]
<style>
#posts-container{ }
#posts-container ul li div{
border: 1px solid #aaaaaa;
background: #ffffff;}
</style>
[/css]

You can see that the style is not fully complete, cause I have left it upto you, so that you can have your own style, but if you leave this also it doesn't matter, cause this will also give the blog a simple and neat looks to featured posts

After styling we will add some javascript code to head section.
Be very careful while adding javascript code, as it may conflict with other js files.

[javascript]
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.vticker-min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#posts-container').vTicker({
speed: 600,
pause: 3000,
animation: 'fade',
mousePause: true,
showItems: 3
});
});
</script>
[/javascript]

As you can see the $ is been replaced by jQuery just to avoid the conflict.
So the final header code will look something like this:

[html]
<style type="text/css" media="all">
#posts-container{ }
#posts-container ul li div{
border: 1px solid #aaaaaa;
background: #ffffff;}
</style>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.vticker-min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#posts-container').vTicker({
speed: 600,
pause: 3000,
animation: 'fade',
mousePause: true,
showItems: 3
});
});
</script>
[/html]

In the above javascript, you can change the attribut as per your need, like speed, animation, on-mouse-over-pause etc etc. You can change it anytime. I have kept the js file into the js folder of the theme, if you are keeping it in any other folder then be sure to edit the code.

This part completes the main jquery.
But the question is how will you select the posts as featured?
For this we can use custom fields.
Add a new custom field in your Add-new or Edit posts page, and replicate the same as in below image


Tip: Instead Of Manually Adding one-one custom field, I recommend that you use More Fields Plugin. Which Will help you to have a custom field for all post.

Do the above step for only those posts which you want to display as featured posts.

Now open index.php file and just paste this code just above the if ( have_posts() ) code

[php]
<?php
$key = 'featured';
$themeta = get_post_meta($post->ID, $key, TRUE);
if($themeta == 'no') {
echo 'No Featured Posts';
}
elseif($themeta == 'yes'){
?>
<?php query_posts('meta_key=featured&meta_value=Yes');  ?>
<div style="border:4px solid #666666; -moz-border-radius:5px; -webkit-border-radius:5px; padding:12px; color:#333333;font-weight:bold; background-color:#FFFFE0;">
<h1 style="color:#880000; font-weight:bold; font-size:18px; text-decoration:underline;">Featured Posts:</h1>
<div id="posts-container">
<ul>
<?php while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" style="color:#333333;"><?php echo the_title() ?></a>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>

<?php wp_reset_query();

}?>
[/php]

In this code we are taking the posts which has custom field value set to yes for featured, and displaying it in a list format, here I have given the css into the style tag of a div, you can change it any time as per your theme design.  I am also using wp_reset_query just to be sure that it doesn't conflicts with other posts.

This above tutorial is just going to display posts title, but if you also want to display posts content, then just make a small change to the above code, just add the 3 line to the code.

[php]
<li>
<a href="<?php the_permalink() ?>" style="color:#333333;"><?php echo the_title() ?></a>
<br><em><php echo the_excerpt(); ?></em>
</li>
[/php]

You can see the demo on my websites homepage
Demo | Download [download id="3"]