How to Display Featured Posts with Thumbnails in WordPress

Are you interested to display featured posts with thumbnails in WordPress? If you are really interested and want to display featured posts in WordPress then you are at right place. On the internet, you will have noted that, there are several websites publishing various methods related to this topic. We also have searched about this topic and found that almost all the methods and plugins lack something.

It is therefore, necessary that we compelled to write this article. In this article we will share with you a function that will help our blog visitors to select specific Post IDs and then display them as featured posts with thumbnails by utilizing the WordPress Post Thumbnail. This thumbnail feature that was added in the old version of WordPress 2.9. With the help of this method you will be able to avoid using sticky posts, which sometime important due to other functions in a custom project.

To understand this article you have to know about the basic knowledge of WordPress, HTML, CSS and PHP. After that you will be able to easily understand what we want to explain here.

Keep notice that the Featured Posts Lists by San of W3C Gallery has been changed. And more latest and advanced version of this plugin is now available to show images.

Adjusted Plugin For Your Site

To start our project you will be required to copy and paste the code provided below, in your functions.php file. You can also keep it in a separate file and then upload it as a plugin. The code is provided below.

1 <?php

2 /*

3 Plugin Name: Featured Posts List with Thumbnail

4 Plugin URI: http://www.w3cgallery.com/w3c-css/display-

5 specificmultiple-5 posts-as-featured-post-list-plugins

6 Description: Display specific/multiple posts List with

7 Thumbnails on your sidebar or any place of your site.

8 It creates a tab “Featured Posts List” in “Settings” tab

9 Version: 2.0

10 Author: SAN – w3cgallery.com & Windowshostingpoint.com &

11 Syed Balkhi

12 Author URI: http://www.w3cgallery.com/

13 */

14

15 // Main function to diplay on front end

16

17 function featuredpostsList() {

18 global $post, $wpdb, $posts_settings;

19 // posts_id from database

20 $posts_id = $posts_settings[‘posts_id’];

21

22 if($posts_id) {

23

24 $posts_idarray = explode(‘,’,$posts_id);

25

26 foreach ($posts_idarray as $list){

27 $post = new WP_Query(‘p=’.$list.”);

28 $post->the_post();

29 ?>

30 <div class=”popcontainer”>

31 <div class=”popthumb”><a href=”<?php the_permalink(); ?>”

32 title=”<?php the_title(); ?>”><?php the_post_thumbnail();

33 ?></a></div>

34 <div class=”popcontent”>

35 <h2><a href=”<?php the_permalink() ?>” rel=”bookmark”><?

36 php the_title(); ?></a></h2>

37 <div class=”popauthor”><?php the_time(‘M j, Y’) ?></div>

38

39 </div>

40

41 </div>

42

43 <?php }

44 } else {

45 echo $before .”None found”. $after;

46 }

47 }

48

49 $data = array(

50 ‘posts_id’ => ”

51 );

52 $ol_flash = ”;

53

54 $posts_settings = get_option(‘posts_settings’);

55

56 // ADMIN PANLE SEETTING

57 function posts_add_pages() {

58 // Add new menu in Setting or Options tab:

59 add_options_page(‘Featured Posts List’, ‘Featured Posts

60 List’, 8, ‘postsoptions’, ‘posts_options_page’);

61 }

62

63 /* Define Constants and variables*/

64 define(‘PLUGIN_URI’, get_option(‘siteurl’).’/wp-

65 content/plugins/’);

66

67 /* Functions */

68

69 function posts_options_page() {

70 global $ol_flash, $posts_settings, $_POST, $wp_rewrite;

71 if (isset($_POST[‘posts_id’])) {

72 $posts_settings[‘posts_id’] = $_POST[‘posts_id’];

73 update_option(‘posts_settings’,$posts_settings);

74 $ol_flash = “Your Featured List has been saved.”;

75}

76

77 if ($ol_flash != ”) echo ‘<div

78 id=”message”class=”updated fade”><p>’ . 78 78 $ol_flash . ‘</p>

79 </div>’;

80

81 echo ‘<div class=”wrap”>’;

82 echo ‘<h2>Add Posts ID to Create Featured Post

83 List</h2>’;

84 echo ‘<table class=”optiontable form-table”><form

85 action=”” method=”post”>

86 <tr><td colspan=”2″><strong>This plugin gives full

87 freedom to display multiple posts as Featured Post List to your site.</strong></td></tr>

<tr><td><strong>Post ID :</strong></td><td><input type=”text” name=”posts_id” value=”‘ . htmlentities($posts_settings[‘posts_id’]) . ‘” size=”50%” /></td></tr>

<tr><td colspan=”2″><strong>SAN Hint: To Add Multiple Post IDs use ” , ” for exmple : ” 1, 2, 3″ </strong></td></tr>

</table>’;

 

echo ‘<Div class=”submit”><input type=”submit” value=”Save your list” /></div>

<p>Paste this code into where you want it to display featured posts list <strong>&lt;?php featuredpostsList(); ?&gt;</strong> <br/> Or you can pass variable before and after like this default setting <strong>&lt;?php featuredpostsList($before = &lt;li&gt;”, $after = &lt;/li&gt;”) ?&gt;</strong></p>

</form>’;

echo ‘</div>’;

}

add_action(‘admin_menu’, ‘posts_add_pages’);

?>

After you have completed the above process now you are able to display/show it just by copying and pasting the code anywhere in your desired template file.

1 <?php featuredpostsList(); ?>

Also add some Custom CSS to add style

As we are using the custom CSS classes, therefore, you will also require them too. Copy and paste the below given code in your style.css file to add style to your plugin.

1 .popcontainer{

2 border-bottom: 1px solid #D0CDC5;

3 width: 274px;

4 float: left;

5 padding: 0 0 15px 0;

6 margin: 0 0 15px 0;

7 }

8 .popthumb{

9 width: 60px;

10 float: left;

11 background: #D0CDC5;

12 padding: 5px;

13 margin: 0 10px 0 0;

14 }

15 .popcontent{

16 width: 185px;

17 float: left;

18 }

19 .popcontent h2{

20 font-size: 13px;

21 margin: 0 0 3px 0;

22 padding: 0;

23 }

24 .popcontent h2 a{

25 text-decoration: none;

26 }

Also Think About Some Advanced Options

With the help of the above given CSS code, your default thumbnail will be pulled and displayed with title of the post and on the date on which that post has been published. Here is a little difficulty exist and that is if you want to use different size of thumbnails on your site. Your blog/website template may be using the feature of the thumbnail elsewhere. It is, therefore, you will be unable to use two different sizes of thumbnails with the current codes. For this purpose you have to make some adjustment in it and add some new image sizes.

To do this, you have to open your functions.php file and then find the thumbnail codes and then add the following code:

1 add_theme_support( ‘post-thumbnails’ );
2 set_post_thumbnail_size( 150, 150, true ); // Normal post thumbnails
3 add_image_size( ‘featured-thumbnail’, 60, 60 ); // Featured thumbnail size

Next you have to search & find the following line in the plugin above.

1 <div class=”popthumb”><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_post_thumbnail(); ?></a></div>

Once you searched and find the above code, you have to replace it with the following code.

1 <div class=”popthumb”><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_post_thumbnail(); ?></a></div>

With the help of above changes you will be able to add two different sizes of the thumbnails. You might face another issue and that would be if your thumbnail is not proportional, as a result it will display a smaller image, rather than 60 x 60px because WordPress don’t provide the cropping feature.

To get rid of this problem you have the option to use another good WordPress Plugin called Additional Image Sizes Plugin . This plugin is capable of cropping feature of images. Now you have to name your desired custom image size as featured-thumbnail and also use the same code as we have provided above to replace the original code.

The question may arise in your mind that what is was the reason of using this method? The answer is that we have used sticky posts to show another list. If you like this article please share it on social media with your friends, family members and colleagues. Also if you have some extra suggestions about this issue, please do not forget to write it in the comment box below.

Leave a Reply

Your email address will not be published. Required fields are marked *