10 Techniques Explaining How To Display a Featured Article in Your Blog

Howdy Guys,

Today I researched a few integration options that I thought would interest other bloggers. One thing that I found that many bloggers are interested in integrating into their site is the Featured Article option.
Featured Article gives your site a professional appearance, and once you have created 3 or 4 posts under this area you will see the benefits of it.

Today I will introduce a few ideas on how to set up the featured article option and what plugins that should be used.

1: Simple sticky Post in wordpress ( Demo )

Simple sticky post is the simplest way to display featured article in your blog. Typical way for the new bloggers, yet it is easy, simple and effective.

With this method, you can show (simple image, post title and post excerpt) from the selected category. Example below

My Web Blog_1256891026871

So how can we display this simple sticky post in our theme?

Follow these simple steps :-

1: To show featured post only in the home page, you can use the code below;

<?php if(is_home() &!is_paged()): ?>
<?php // Featured posts go here.
include (TEMPLATEPATH . "/featured.php"); ?>
<?php endif;?>

2: Adding the new template where we can call the feature post from. Simply add the new template to your wordpress directory under the name ( featured.php ). This file will contain the featured post elements (Numbers, Category, Style, etc..).
3: To add the code that shows the featured post content (featured post image – featured post title – excerpt – and the featured category). Look at the example code below ;

    <!-- start Featured -->
<?php query_posts("showposts=1&cat=6"); ?>
<?php while (have_posts()) : the_post(); ?>
<div id="featured">
<div id="featured2">
<div id="featurediv">
<div class="epic">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Continue reading <?php the_title(); ?>"><img src="<?php $values = get_post_custom_values("Thumbnail"); echo $values[0]; ?>" alt="Continue reading <?php the_title(); ?>" /></a>
</div>
<div class="etext">
<div class="ehead">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue reading <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entryinfo"><?php edit_post_link('Edit', '', ' |'); ?> Posted by <strong><?php the_author(); ?></strong> on <?php the_time('d M Y'); ?> under <?php the_category(', ') ?> | <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
</div>
</div>
<div class="post">
<?php the_excerpt(); ?>
</div>
</div>
<div class="clearer"></div>
</div>
</div>
</div>
<?php endwhile; ?><!-- end Featured -->

4: You can change the number of sticky posts or featured posts from the code above also you can select the category where you can call posts from.

I would consider this the simplest way to show Featured article in WordPress blog.

2: Featured Content Gallery (Demo - Download )

Featured Content Gallery - WordPress Plugin - by iePlexus_1256813964032

Description::

Featured Content Gallery is The first Plugin released for displaying sliding featured article in your wordpress blog. It creates an automated sliding gallery with latest featured articles added to your site. It is based on one sliding gallery with two arrows in the sides that allows visitors to rotate between different featured posts.

Finally, A very powerful back-end for user to change the option of the sliding gallery (width, height, color, etc.).

Features::

* Single category only supported.
* Height, Width and Text Overlay values can be configured.
* Can be displayed on the WordPress Blog by using one line php statement.

Installation ::

1: Simply download Featured Content Gallery from wordpress.org.

2: Upload the plugin to your wordpress plugins directory, then activate the plugin from plugins page.

3: Integration of featured content gallery is very easy, Simply follow the steps below.

-Open Index.php then finds

    <?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

And then place this code below just above it.


<?php include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php'); ?>

4: In the option page, you can configure the gallery for (Width – Height – Category – Number of Articles To show).

3: d13slideshow ( download)

d13slideshow_example

Description :::

D13Slideshow plugin is another wordpress plugin to display featured posts in your blog. It creates an animated slide-show of maximum of 10 posts.

By inserting simple code in your wordpress template you can display the featured articles in a beautiful way with customized setting from very powerful admin back-end. This plugin is different from other plugins in using the prototype and scriptaculous JavaScript libraries.

Features::

1. The ability to select posts by drop-down or text entry.
2. Improved HTML and CSS.
3. Improved support for Internet Explorer.

Installation::

1:Begin by downloading the plugin file using the link above.

2: Upload the plugin and activate it from plugins page.

3: Use the integration code and place it in your wordpress Index.php (Follow the same way used in the featured content gallery plugin).

    <?php d13slideshow(): ?>

4: Edit options from settings > d13slideshow.

4: J Post Slider ( Demo - Download )

s3Slider jQuery plugin_1257169655044

Description::

J- post- slider plugin designed to show feature post in fancy appearance in j-qurey box. Sliding images with Excerpted test to overlay it in many different positions, Mouse-over stop the animation.

Apowerful back-end where you can change the slider setting, colors, opacity, rotating time etc.

Features::

1. Choosing Number of featured articles.
2. Post order ( latest , random , Oldest ).
3. Images for animation box.
4. Rotating time and speed.
5. Post excerpt.
6. Select the featured category.

Installation ::

1. Unzip JPostSlider archive zip file, upload J-Post-Slider folder into (wp-content/plugins/).
2. Activate J Post Slider WordPress plugin.
3. Go into Settings -> J Post Slider, and customize options.
4. Place this code below (After header or before post loop),

<?
if (function_exists("js_show_images")) {
js_show_images();
}
?>

5:Featured articles plugin for WordPress ( With Moo Tools) ( Demo - Download)

PHP.help! - resources for web developers_1256817513751

Description::

Featured Article Plugin With Moo tools designed to give wordpress special appearance with sliding-show and navigation between featured articles.

This plugin is different from the others as it contains dot like navigation where you can select specific post instead of clicking next and previous.

It features a powerful Admin back-end where you can control the following;

1: Number of featured articles to display.
2: The order in which they will appear.
3: The plugin Always calls the first image from the Featured post if there.

Features::

* Add Featured Post Section Title.
* Limit the number of character For description.
* Featured Articles Number To display.
* The display order (Random, New, old).
* Thumbs Display.

Installation::

1: Download and upload the plugins to you wordpress plugins directory.

2: Activate the plugin and edit options.

3: To set the JavaScript, simply open (/scripts/FeaturedArticles.js.)with an editor and change the values of the class instance located at the bottom of the file to the ones you need.

Same as the code below;


window.addEvent('domready', function(){
new FeaturedArticles({
slides: '.FA_article',
slideDuration:5000,
effectDuration:1000,
fadePosition:'left',
stopSlideOnClick: false,
autoSlide: true,
infoContainers: '.FA_info',
navigationHeight: 21,
navigationNums: false
});
})

6:Wordpress Featured Content Slideshow ( Demo - Download )

screenshot-1

Description::

I consider this plugin to be one of the best wordpress plugins to use for displaying featured article in your blog. It shows up to five featured posts in very awesome slide-show appearance (You Can See the Demo Link Above).

On the left side of the slide-show it displays an image for every post while on the right side, there are all the titles (and a small description under the title) of the Posts.

The slide-show highlights the active post and repeats automatically after getting to the 5th-Post.

You have a strong administration area to adjust the category,the number of posts, the width and height, and colors.

Features ::

* Titles and small description for every featured post.
* Navigation possibilities (when hitting a Title the Image appears).
* An image for every different featured post.
* A powerful administration back-end for posts and styles of the slide-show.
* Java-script effects.

Installation ::

1. Upload /wp-content-slideshow/ to your plugin directory (wp-content/plugins/).
2. Go to the ‘plugins’ Page in your administration area and activate it.
3. Go to Settings/WP Content Slide show and customize the content slide-show according to your needs.
4. Place Place this code below in your template(Same as the way described in the first method),

<?php include (ABSPATH . '/wp-content/plugins/wp-featured-content-slider/content-slider.php'); ?>
  1. 1. Add a custom field to your post with Key “Thumbnail” and Value should be a direct link to the image.

7: Featured Content Slider For WordPress ( Demo - Download )

Featured Content Slider - IWEBIX_1257165875297
Description::

Wp Featured Content Slider Similar to simple featured post as previously explained above. However, it has a nice java-script slide-show/slider for wordpress. It can be integrated anywhere on your Blog/Website.

Based on calling specific post (excerpts) from the selected category, adding post image thumbs beside it in a way that looks very nice.

Features::

* Featured Posts with (excerpts).
* A nice Image next to the Text (Selected Via Custom Field).
* An Administration Setting for Category and Post Items.
* A Java script / css Effect when sliding to another Post.
* Arrows for navigating through the Posts.

Installation ::

1. Upload /featured-content-slider/ to your Plugin directory (wp-content/plugins/).
2. Go to the ‘Plugins’ page in your administration area and activate it.
3. Go to Settings/Featured Content Slider and customize the Content Slider according to your needs.
4. Place this code below in your template (As previously explained above)

<?php include (ABSPATH . '/wp-content/plugins/wp-featured-content-slider/content-slider.php'); ?>
  1. 1. Add a custom field to your post with Key “Thumbnail” and Value should be a direct link to the image.

8: Featured Content Slider Using (jQuery)

FeaturedContentSliderjQuery

Description ::

This tutorial will show you how to add sexy featured content slide-show to your wordpress site using jQuery UI library.

Installation Tutorial

9:Slick Auto-Playing Featured Content Slider

fc-preview

Description::Based on Coda slider Jquery Plugin .Simple Easy and beautiful.

Installation Tutorial ::

10:Easy Image with Content Slider (Demo)

Easy image with content slider enables images to slide with nice appearance based one JavaScript and css.

This tutorial will show you how to add easy image slider to your wordpress blog with simple instructions .

Installation Tutorial ::

Enjoy

Description::

Featured Content Gallery The first Plugin released for displaying sliding featured article in your wordpress blog . It creates an automated sliding gallery with latest featured articles added to your site . It’s based one sliding gallery with two arrows in each side allow visitors to rotate between different featured posts .

Finally very powerful back-end for user to change the option of the sliding gallery ( width, height ,color etc… ) .

Features::

* Single category only supported.
* Height,Width and Text Overlay values can be configured.
* Can be displayed on the WordPress Blog by using one line php statement.

Installation ::

1:Simply download Featured Content Gallery from wordpress.org .

2:Upload the plugin to your wordpress plugins directory , then activate the plugin from plugins page.

3:Integration of featured content gallery are extremely easy , Simply follow the steps below.

-Open Index.php find [sourcecode language='css']

Author : Asif Ahmed

Author's Website | Articles From This Author

Asif Ahmed is a Delhi based blogger and is in love with Web2.0.

Like this post? Share it!

  • Tweet
  • Facebook
  • Diggit
  • Delicious
  • Diggit
  • Diggit
  • Diggit
  • Diggit
  • Diggit

Related Posts


Rss Feeds   Twitter Followers Email Updates



Community Feeds


Submit More