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 Popups in WordPress?

Do you want to increase your website's conversion rate? Popup is an effective marketing tool for generating leads and it has a...

What is an XML Sitemap? How to Create a Sitemap in WordPress?

An XML sitemap is helping engines like google simply navigate thru your web site content material. It provides them a listing of your whole...

Vintage iPhone Film Camera Apps that you need to use in 2020

The iPhone has a great camera and it keeps getting better with every new version of the phone. Have you noticed how...

Transfer Your Data From Your Old iPhone to Your New iPhone

Want to buy a new iPhone this season, but don’t want to do all the work of transferring your data. Well, I...

Best Tools and Resources to Write Professionally for Everyone

Writing is considered the best medium to communicate your views, cause unlike speaking you can edit and improve. Written communication provides the...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here