How To Showcase Featured WordPress Blog Posts

Clio Websites Blog

  • Home
  • >
  • How To Showcase Featured WordPress Blog Posts

Do you want to showcase featured WordPress blog posts? Follow this guide to find out how to accomplish this.

This method is useful for websites that sell premium memberships or access to “premium content”. Implementing this feature will help you showcase premium content and encourage users to sign up.

What you will need

We will be using Elementor Pro and Advanced Custom Fields to make this work. 

You can accomplish this using other methods and plugins as well, but since we are already using this stack for this particular project, this was the easiest way to accomplish this goal.

Showcasing WordPress Posts Steps

In order to make this work, we will configure an ACF field to capture the text we will use to highlight a featured blog post. 

After that, we will enable this setting in Elementor Pro using a featured image caption feature. 

Lastly, we will style it and make it look cool.

Step 1 – Configuring the field in ACF

Create a new Custom Field group and call it Post Feature.

Add a new Text field, you can call it Featured Content.

acf-screenshot-clio-websites

Enable this field group on the Posts object, by setting the Post Type equal to Posts.

acf-screenshot-clio-websites

You have now created a new custom field that you can use in your posts to highlight the premium content you want to showcase.

We can confirm that the new field shows up in the edit Post settings:

acf-post-settings-screenshot-clio-websites

Step 2 – Configuring Elementor

We will be editing the Elementor Post Loop object which can be configured to display a blogroll on an Elementor WordPress website. 

Because our new custom field is empty, nothing will show up on the post featured image on the front end:

how-to-showcase-featured-wordpress-blog-posts-before-screenshot

We will edit the post loop by opening it in the Elementor editor.

Create the post loop Elementor object by adding a featured image and any other fields you want to show up in this post loop. 

Click on the Featured Image object to open additional settings.

Enable the Custom Caption option, and select the ACF Field custom caption type.

Select the custom field you created in the previous step (Featured Content in our case) by clicking on the ACF Field box which opens an additional menu.

When you are finished, your options should look like the following screenshot:

elementor-post-loop-featured-image-screenshot-clio-websites

Now, when you add text to your custom field, it will show up on the bottom of the featured image.

Step 3 – Style the new Custom Caption using CSS

The last step is to style the Custom Caption using CSS. 

This will depend on what look and feel you are looking for, but there are a ton of free CSS ribbon tutorials that you can find online and implement. 

Since we want this style to apply globally on any archive page on the website, we will add the code to the Customize screen of the theme, in the Additional CSS section. 

For example, we applied this CSS to style the Custom Caption:

.widget-image-caption {
	display: inline;
	padding: 5px 0 10px 0;
	position: absolute;
	content: '';
	right: 10px;
	top: 0px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 100% 75%, 50% 100%, 0 75%, 0% 75%);
}

Step 4 – Finishing up and testing

Once you implement and save your changes, enter in the custom featured text you want to show up on your featured image.

For example, this is what it looks like with our styling:

how-to-showcase-featured-wordpress-blog-posts-after-screenshot

About Clio Websites

Hope you enjoyed reading our how-to guide on how to showcase featured WordPress blog posts.

Clio websites is a Calgary-based web development agency that specializes in WordPress. Contact us to start your next WordPress project. 

Do you know of a better way to implement this or have any questions? Comment below.

Share

Share on facebook
Share on twitter
Share on linkedin
Share on email

2 thoughts on “How To Showcase Featured WordPress Blog Posts”

Average
5 Based On 1

Leave a Comment

On Key

Related Posts

Signup for our newsletter

If you are enjoying our blog, sign up for our newsletter. We promise not to spam you and you can unsubscribe at any time.