How to Display Featured Posts with Thumbnails in WordPress

There are a lot of tactics shared on the internet to demonstrate Featured Posts. But nearly all purposes and plugins lack one thing. In this instructional, we can percentage a serve as which is able to permit customers to make a choice particular Post IDs and demonstrate them as featured posts with thumbnails by using the WordPress Post Thumbnail characteristic that was once added in WordPress 2.9. This means lets in you to steer clear of the use of Sticky posts which every now and then is also essential due to different purposes in a customized mission.

Note: This is a Multi-Part instructional, so we suggest that you’ve got some wisdom of WordPress, PHP, HTML, and CSS.

We changed the plugin Featured Posts Lists via San of W3C Gallery. Even regardless that San has created a sophisticated model of his plugin to display pictures, it calls for a customized box. This means you’ll simply use Post Thumbnail characteristic in 2.9.

Final Product

Modified Plugin

First you could possibly want to paste the code beneath in your purposes.php record OR in a separate record and add it as a plugin.

<?php
/*
Plugin Name: Featured Posts List with Thumbnail
Plugin URI: http://www.w3cgallery.com/w3c-css/display-specificmultiple-posts-as-featured-post-list-plugins
Description: Display particular/a couple of posts List with Thumbnails to your sidebar or anyplace of your web page. It creates a tab "Featured Posts List" in "Settings" tab
Version: 2.0
Author: SAN – w3cgallery.com & Windowshostingpoint.com & Syed Balkhi
Author URI: http://www.w3cgallery.com/
*/

// Main serve as to diplay on entrance finish

serve as featuredpostsList() {
international $submit, $wpdb, $posts_settings;
// posts_id from database
$posts_id = $posts_settings['posts_id'];

if($posts_id) {

$posts_idarray = explode(',',$posts_id);

foreach ($posts_idarray as $listing){
$submit = new WP_Query('p='.$listing.'');
$post->the_post();
?>
<div magnificence="popcontainer">
<div magnificence="popthumb"><a href="<?php the_permalink(); ?>" name="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div magnificence="popcontent">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div magnificence="popauthor"><?php the_time('M j, Y') ?></div>

</div>

</div>

<?php }
} else {
echo $earlier than ."None discovered". $after;
}
}

$information = array(
'posts_id' => ''
);
$ol_flash="";

$posts_settings = get_option('posts_settings');

// ADMIN PANLE SEETTING
serve as posts_add_pages() {
// Add new menu in Setting or Options tab:
add_options_page('Featured Posts List', 'Featured Posts List', 8, 'postsoptions', 'posts_options_page');
}

/* Define Constants and variables*/
outline('PLUGIN_URI', get_option('siteurl').'/wp-content/plugins/');

/* Functions */

serve as posts_options_page() {
international $ol_flash, $posts_settings, $_POST, $wp_rewrite;
if (isset($_POST['posts_id'])) {
$posts_settings['posts_id'] = $_POST['posts_id'];
update_option('posts_settings',$posts_settings);
$ol_flash = "Your Featured List has been stored.";
}

if ($ol_flash != '') echo '<div identification="message"magnificence="up to date fade"><p>' . $ol_flash . '</p></div>';

echo '<div magnificence="wrap">';
echo '<h2>Add Posts ID to Create Featured Post List</h2>';
echo '<desk magnificence="optiontable form-table"><variety motion="" way="submit">
<tr><td colspan="2"><sturdy>This plugin offers complete freedom to demonstrate a couple of posts as Featured Post List to your web page.</sturdy></td></tr>
<tr><td><sturdy>Post ID :</sturdy></td><td><enter kind="textual content" title="posts_id" price="' . htmlentities($posts_settings['posts_id']) . '" length="50%" /></td></tr>
<tr><td colspan="2"><sturdy>SAN Hint: To Add Multiple Post IDs use " , " for exmple : " 1, 2, 3" </sturdy></td></tr>
</desk>';

echo '<Div magnificence="put up"><enter kind="put up" price="Save your listing" /></div>
<p>Paste this code into the place you need it to demonstrate featured posts listing <sturdy>&lt;?php featuredpostsList(); ?&gt;</sturdy> <br/> Or you'll go variable earlier than and after like this default environment <sturdy>&lt;?php featuredpostsList($earlier than = &lt;li&gt;", $after = &lt;/li&gt;") ?&gt;</sturdy></p>
</variety>';
echo '</div>';

}

add_action('admin_menu', 'posts_add_pages');

?>

Once you’ve achieved that then you’ll demonstrate it via pasting the code any place in your template record:

<?php featuredpostsList(); ?>

Custom CSS

We are the use of customized CSS categories, so you could possibly want them as smartly. Paste the next code in your taste.css record.

.popcontainer{
border-bottom: 1px cast #D0CDC5;
width: 274px;
glide: left;
padding: Zero 0 15px 0;
margin: Zero 0 15px 0;
}
.popthumb{
width: 60px;
glide: left;
background: #D0CDC5;
padding: 5px;
margin: 0 10px Zero 0;
}
.popcontent{
width: 185px;
glide: left;
}
.popcontent h2{
font-size: 13px;
margin: Zero Zero 3px 0;
padding: 0;
}
.popcontent h2 a{
text-decoration: none;
}

Advanced Options

The above code will pull your default thumbnail and demonstrate it with the submit name and the date the submit was once printed. The most effective drawback is if you need to use a unique length of thumbnail. Your theme may well be the use of the thumbnail characteristic somewhere else thus you can’t use two other sizes with the present codes. So you’ll have to tweak it somewhat bit and upload a brand new symbol length.

Open your purposes.php and to find the thumbnail codes and upload the next code:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // Normal submit thumbnails
add_image_size( 'featured-thumbnail', 60, 60 ); // Featured thumbnail length

Now to find the next line in the plugin above:

<div magnificence="popthumb"><a href="<?php the_permalink(); ?>" name="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>

and Replace it with:

<div magnificence="popthumb"><a href="<?php the_permalink(); ?>" name="<?php the_title(); ?>"><?php the_post_thumbnail('featured-thumbnail'); ?></a></div>

This would permit you to have two other sizes.

Another identified factor can be in case your thumbnail isn’t proportional, it might purpose a smaller symbol to demonstrate somewhat than 60 x 60px as a result of WordPress does now not have the cropping skill. To steer clear of that you’ll use Additional Image Sizes Plugin which has the facility to crop. Name the customized symbol length as featured-thumbnail and use the similar code as above to substitute the unique code.

The sole reason we used this system was once as a result of we had been the use of Sticky posts to demonstrate every other listing. You too can do so via the use of sticky posts. For the thumbnail trick, we selected the Additional Image Sizes plugin as a result of we wish to steer clear of the use of TimThumb JavaScript and handle a quick loading web page.

If you’ve further answers to this drawback, please percentage it with us in the feedback.

Recent Articles

How to Add Tabs to WordPress Posts and Pages

Tabs effectively organizes the content and engages the user. You can divide your posts into tabs in order to save space and...

How To Check Whether Someone Blocked You On Instagram

All social media platforms including Instagram do not notify people when they get blocked by a user. But when someone’s post and...

Free Apps Make Money through These Innovative Ways

Have you always wondered why are some apps available to you free of cost? If you want to know how apps make...

How To Completely Remove Google Account From Chrome Browser

Google Chrome when used with your personal Google account lets you keep the data in sync with all your devices. Your YouTube...

How To Know If Your Android Smartphone Is Hacked And How To Fix It!

One of the worst nightmares you can ever witness is realizing that your Android Smartphone Is Hacked. Yes, you're allowed to be...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here