a

How to create featured posts block with a shortcode

Its always useful to be able to choose which posts do and dont display on certain pages of your wordpress site, for example the homepage.

So first thing you need to do is create a new field for your posts.

If you go to posts in your wordpress dashboard, click on either edit a post or Add new post, you see a custom fields section

(If you don’t see this, then at the top in right hand corner you have screen options, make sure “custom fields” is checked.)

So you need to click the button “Enter new”

You will need to Name the field and give it a value and the click “Add custom field”

(All your posts will now show this field).

So now just have a quick run through your posts and put yes in a the value box for the ones you want to feature, remember you can remove yes and add yes to any posts at any time.

Coding the query and shortcode

Now, We need to create a shortcode.

function featured_posts( $atts ){
	// our code will go here
}
add_shortcode( 'featured', 'featured_posts' ); 

This will give us the shortcode [featured].

Now, to build a query for our shortcodes function.

$cl_args = array(
	'meta_query' => array(
		array(
			'key' => 'featured', // The name of our custom field we made
			'value' => 'yes' // the value for all featured posts
		)
	)
);
 
$cl_query = new WP_Query( $cl_args );

So now we have our query and our shortcode, we can put them together.

function featured_posts( $atts ){
	$cl_args = array(
	'meta_query' => array(
		array(
			'key' => 'featured', // The name of our custom field we made
			'value' => 'yes' // the value for all featured posts
		)
	)
);
 
$cl_query = new WP_Query( $cl_args );

// the loop goes here
}
add_shortcode( 'featured', 'featured_posts' ); 

Now we create a loop for the featured posts

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// Post Content here
		//
	} // end while
} // end if
?>

Now, we need to decide what parts of the post we want to show.

POST TITLE: <?php the_title(); ?><br />
AUTHOR: <?php the_author(); ?><br />
POSTED: <?php the_time(‘jS F Y’) ?><br />
CATEGORY: <?php the_category(‘, ‘) ?><br />

for demonstration we will get the featured image, title, author, posted date and what category for all featured posts.
Starting with the image, we first need to decide on what size we want.

//Default WordPress
the_post_thumbnail( ‘thumbnail’ );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( ‘medium’ );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( ‘medium_large’ );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( ‘large’ );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( ‘full’ );          // Full resolution (original size uploaded)

So we will go with medium, And also create a link to the post,

<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('large'); ?>
</a>

Putting it together

<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('large'); ?>
</a><br>

<?php the_title(); ?> posted by: <?php the_author(); ?> <br>
Posted on: <?php the_time(‘jS F Y’) ?> in: <?php the_category(‘, ‘) ?>

So lets complete our shortcode

function featured_posts( $atts ){
$cl_args = array(
'meta_query' => array(
array(
'key' => 'featured', // The name of our custom field we made
'value' => 'yes' // the value for all featured posts
)
)
);

$cl_query = new WP_Query( $cl_args );

if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('large'); ?>
</a><br>

<?php the_title(); ?> posted by: <?php the_author(); ?> <br>
Posted on: <?php the_time(‘jS F Y’) ?> in: <?php the_category(‘, ‘) ?>
<?

} // end while
} // end if
}
add_shortcode( 'featured', 'featured_posts' );

Thats it, Now just go ahead and add your code to your themes functions.php

Then go to your page and add your shortcode [featured]



LEAVE A COMMENT