The Divi theme is a popular WordPress theme that allows you to create beautiful and customizable websites. One of the common features of a blog post is to display an excerpt or a summary of the post content on the blog page. In this case, we’ll be using the Divi theme to display the blog post excerpt.
To display the blog post excerpt in Divi, you can use the the_excerpt()
function within the WordPress loop. This function will automatically generate an excerpt for the blog post based on the post content.
Here’s an example of how you can use the the_excerpt()
function in the Divi theme:
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<div class="blog-post">
<h2><?php the_title(); ?></h2>
<div class="excerpt">
<?php the_excerpt(); ?>
</div>
</div>
<?php
endwhile;
else :
echo 'No posts found.';
endif;
?>
In this example, we first check if there are any posts available using the have_posts()
function. If there are posts, we enter the loop using the while
loop. Inside the loop, we use the the_post()
function to set up the post data. Then, we display the post title using the the_title()
function and the post excerpt using the the_excerpt()
function.
You can customize the HTML structure and styling of the blog post and excerpt as per your requirements. The example above simply wraps the post title and excerpt in a <div>
element with appropriate classes.
By using the the_excerpt()
function in the Divi theme, you can easily display the blog post excerpt on your blog page.
Examples
Example 1: Customizing the Divi blog post excerpt length
This example demonstrates how to customize the length of the blog post excerpt in the Divi theme.
function wpsnippets_custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length', 'wpsnippets_custom_excerpt_length', 999 );
In this code example, we define a custom function wpsnippets_custom_excerpt_length
that returns the desired length of the excerpt (in this case, 20 words). We then use the add_filter
function to hook this custom function to the excerpt_length
filter with a priority of 999. This ensures that our custom function is called when generating the excerpt, allowing us to modify the default length.
Example 2: Adding a “Read More” link to the Divi blog post excerpt
This example shows how to add a “Read More” link to the end of the blog post excerpt in the Divi theme.
function wpsnippets_add_read_more_link( $excerpt ) {
$permalink = get_permalink();
$read_more = '<a href="' . $permalink . '">Read More</a>';
return $excerpt . $read_more;
}
add_filter( 'excerpt_more', 'wpsnippets_add_read_more_link' );
In this code example, we define a custom function wpsnippets_add_read_more_link
that appends a “Read More” link to the end of the excerpt. We retrieve the post permalink using the get_permalink
function and then concatenate it with the HTML markup for the link. Finally, we return the modified excerpt by appending the link to it using the .
operator. The add_filter
function is used to hook our custom function to the excerpt_more
filter, which allows us to modify the default “Read More” text.
Example 3: Customizing the Divi blog post excerpt ellipsis
This example demonstrates how to customize the ellipsis used in the Divi blog post excerpt.
function wpsnippets_custom_excerpt_ellipsis( $more ) {
return '...';
}
add_filter( 'excerpt_more', 'wpsnippets_custom_excerpt_ellipsis' );
In this code example, we define a custom function wpsnippets_custom_excerpt_ellipsis
that returns the desired ellipsis (in this case, three dots). We then use the add_filter
function to hook this custom function to the excerpt_more
filter. By returning our custom ellipsis, we override the default ellipsis used in the excerpt.