The Divi theme is a popular WordPress theme that allows users to easily create beautiful websites without any coding knowledge. One of the key features of the Divi theme is the ability to display a featured image for each blog post. This featured image is typically displayed at the top of the blog post and can help to visually engage readers.
To add a featured image to a Divi blog post, you can use the the_post_thumbnail() function provided by WordPress. This function retrieves the featured image for the current blog post and displays it on the page. Here’s an example of how you can use this function in your Divi blog post template:
<div class="featured-image">
<?php the_post_thumbnail(); ?>
</div>
In this example, we wrap the the_post_thumbnail() function inside a <div> element with a class of “featured-image”. This allows us to apply custom styling to the featured image if needed. The the_post_thumbnail() function will automatically retrieve and display the featured image for the current blog post.
By using this code snippet, you can easily add a featured image to your Divi blog posts and enhance the visual appeal of your website.
Examples
Example 1: Displaying the Divi blog post featured image on the single post page
This example demonstrates how to display the featured image of a Divi blog post on the single post page.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
In this code example, we use the has_post_thumbnail() function to check if the current post has a featured image. If it does, we use the the_post_thumbnail() function to display the featured image.
Example 2: Customizing the size of the Divi blog post featured image
This example shows how to customize the size of the Divi blog post featured image using the the_post_thumbnail() function.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'medium' );
}
?>
In this code example, we pass the 'medium' parameter to the the_post_thumbnail() function, which tells WordPress to display the featured image in the medium size. You can replace 'medium' with other available sizes like 'thumbnail', 'large', or a custom size defined in your theme.
Example 3: Adding a custom class to the Divi blog post featured image
This example demonstrates how to add a custom CSS class to the Divi blog post featured image using the post_thumbnail_class filter.
<?php
function wpsnippets_custom_featured_image_class( $classes ) {
$classes[] = 'custom-featured-image';
return $classes;
}
add_filter( 'post_thumbnail_class', 'wpsnippets_custom_featured_image_class' );
?>
In this code example, we define a custom function wpsnippets_custom_featured_image_class() that adds the CSS class 'custom-featured-image' to the array of classes returned by the post_thumbnail_class filter. We then use the add_filter() function to hook our custom function into the post_thumbnail_class filter.