How to add a Featured Content Box inside WordPress Post without a plugin?

Learn to show Featured Content Box anywhere inside WordPress blog post with a shortcode function or with the Gutenberg Editor using Media and Text block.

If you love reading articles online, You might have seen some content boxes within the blog post content, which offers something exciting such as free eBook, video courses or access to exclusive content.

These featured content boxes or you can also call them offers section look different than the rest of the blog post and attract readers to take action.

Featured content boxes in WordPress blog post
Featured content boxes in WordPress blog post

See the screenshot below, You can see three different content boxes. The first content box has an image with some text and a link to download the eBook, while the other two boxes have a different background color.

The first Content box has been created with WordPress Gutenberg editor while two other boxes have been created with a WordPress shortcode feature. All three boxes have been styled with custom CSS.

These type of content section are great to sell your products or you can use them to offer something great such as an ebook, video course, cheatsheet in return of an email subscription.

If you want to use these type of boxes within your blog post, You can do this by adding a simple function in your child theme’s functions.php file or you can create and use a custom-functions-plugin for WordPress.

Add the following code in your child theme’s functions.php file or in custom functionality plugin.

//https://createwptheme.com/featured-content-inside-post
//First Featured box inside the content

function tcab_featuredbox($atts, $content = null) {
return '<div style="background: none repeat scroll 0 0 #ff9; clear: both; margin-bottom: 24px; overflow: hidden; border: 10px solid #e5e597; padding: 13px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('featuredbox', 'tcab_featuredbox');

//Second Featured box inside the content
function tcab_featuredbox2($atts, $content = null) {
return '<div style="background: none repeat scroll 0 0 #8ae2da; clear: both; margin-bottom: 24px; overflow: hidden; border: 10px outset #83c2bc; padding: 13px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('featuredbox2', 'tcab_featuredbox2');

Save your changes and edit an existing blog post or create a new blog post. If you are using the WordPress version 5 or above with Gutenberg editor, Click the + symbol and search for Shortcode block, if you are using the old classic WordPress editor, go to Code editor mode and add the following code.

Gutenberg Editor HTML and Shortcode blocks
Gutenberg Editor HTML and Shortcode blocks
[featuredbox]<h3>This is featured box</h3><p>Your offer content goes here, You can also use HTML code inside this box</p><a href="#" class="btn-primary">Get free eBook</a>[/featuredbox]

Save the changes and preview your blog post. You can add this shortcode anywhere within your blog post.

We have added two different featured boxes with different background and borders. Now add an HTML block and paste the following code in it.

[featuredbox2]<h3>Title for great offer</h3><p>Your offer content goes here, You can also use HTML code inside this box.</p> <a href="#" class="btn">Download free eBook</a>[/featuredbox2]

Save your changes and preview your blog post.

Featured boxed with Shortcode and WordPress custom function
Featured boxed with Shortcode and WordPress custom function

You should see the above result. You don’t need to remember these shortcodes or HTML. You can add them to reusable blocks to use them in future blog posts. Place your mouse cursor inside the block, select the more options and choose to Add to Reusable Blocks.

How to Display Featured offer with Gutenberg editor?

Gutenberg editor has made it very simple and easy to create content. It is a very powerful and free drag and drop visual page editor for WordPress.

Gutenberg editor has so many useful blocks. Media & Text is one of them. Add a new Block and select/search Media and Text. This block lets you create a two-column layout. One for image and other for text.

Upload an image or select from the media library. You can make the image small or large. Holding down the Blue icon and move the cursor to change the image size.

You can style this Block with custom CSS. For example, add the following CSS to your styles.css file.

WordPress Gutenberg Media Text Block
WordPress Gutenberg Media Text Block
.wp-block-media-text {
    background: #FFEB3B;
    margin: 1rem 0;
    border: 10px outset #FFEB3B;
}

.wp-block-media-text is the class, WordPress uses for Media and Text block. You can use this class to style his block.

Conclusion

We have explained two different ways to add and style featured content secion inside post content. You can use them without any technical knowledge. If you have any question, feel free to ask me in he comments below.

Leave a Reply

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