Note: This article requires a child theme to be installed and active. The child theme can be created using this tutorial.
In order to add an excerpt and a read more button to Divi's Portfolio projects, please follow the instructions below:
Step 1: Add PHP code for the functionality
To add an excerpt and read more button to your portfolio projects, you need to add some custom PHP code.
You have two options:
Add the below PHP code to your Child theme's functions.php file.
Utilize the Code Snippets plugin for a hassle-free way to integrate the snippet. After installing the plugin, add the codes from WordPress Dashboard > Snippets > Add New option.
For a comprehensive guide on adding PHP codes to Divi, you can follow this resource.
function check_divi_builder_and_apply_filter() {
if (function_exists('et_fb_enabled') && et_fb_enabled()) {
// Divi Visual Builder is active, do not add the filter
return;
}
// Divi Visual Builder is not active, add your filter
add_filter('et_module_shortcode_output', 'custom_add_excerpt_and_readmore_button_to_portfolio_output', 10, 3);
}
add_action('template_redirect', 'check_divi_builder_and_apply_filter');
function custom_add_excerpt_and_readmore_button_to_portfolio_output($output, $render_slug, $module) {
// Check if the render slug is for the portfolio module.
if ('et_pb_portfolio' !== $render_slug && 'et_pb_filterable_portfolio' !== $render_slug) {
return $output;
}
/**
* The arguments for the excerpt and read more button.
*
* @var array $args
*/
$args = [
'custom_excerpt_show' => true, // Display project excerpts
'custom_excerpt_limit' => 10, // Limit excerpt to 10 words
'custom_excerpt_more' => '...', // Ellipsis for long excerpts
'custom_readmore_button_show' => true, // Display "Read More" button
'custom_readmore_button_text' => 'Read More', // Text for the button
// The class names for the button and excerpt.
'custom_excerpt_class' => 'my-custom-excerpt-class',
'custom_readmore_button_class' => 'my-custom-readmore-button-class',
];
// Sanitize the output.
$output = wp_kses_post($output);
// Create a DOMDocument object from the output.
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->loadHTML($output);
// Iterate through all of the 'div' elements in the DOMDocument object.
foreach ($dom->getElementsByTagName('div') as $node) {
// Check if the `id` attribute of the `div` element starts with `post-`.
if (strpos($node->getAttribute('id'), 'post-') === 0) {
// Get the ID of the project.
$project_id = str_replace('post-', '', $node->getAttribute('id'));
// Get the excerpt of the project.
$excerpt = get_the_excerpt($project_id);
// Get the permalink of the project.
$link = get_the_permalink($project_id);
// Create a 'p' element with the class 'custom_excerpt_class' and set itstextContent to the excerpt.
$p_ele = $dom->createElement('p');
$p_ele->setAttribute('class', $args['custom_excerpt_class']);
$p_ele->textContent = wp_trim_words($excerpt, $args['custom_excerpt_limit'], $args['custom_excerpt_more']);
// Append the 'p' element to the 'div' element.
$node->appendChild($p_ele);
// Check if the 'custom_readmore_button_show' argument is true.
if ($args['custom_readmore_button_show']) {
// Create an 'a' element with the href attribute set to the permalink of the project and the class 'custom_readmore_button_class'.
$a_ele = $dom->createElement('a');
$a_ele->setAttribute('href', $link);
$a_ele->setAttribute('class', $args['custom_readmore_button_class']);
// Set thetextContent of the 'a' element to the 'custom_readmore_button_tex' argument.
$a_ele->textContent = $args['custom_readmore_button_text'];
// Append the 'a' element to the 'div' element.
$node->appendChild($a_ele);
}
}
}
// Save the HTML of the DOMDocument object to a
//
//
//
//
//
// ing.
$output = $dom->saveHTML();
// Return the modified output.
return $output;
}
Step 2: Change the functionality or text from the code
You can modify the code to change the functionality or text of the excerpt and read more button. It is important to note that adding incorrect codes can break your website's functionality. It is best to use cPanel or FTP to access the file manager and modify the codes. You should also keep a backup of your site to be on the safe side.
Here are some of the things you can change in the code:
Excerpt word limit: This determines how many words are displayed in the excerpt. To change the word limit, you can change the value of the custom_excerpt_limit variable. For example, to set the word limit to 20, you would change the value of the variable to 20.
Excerpt trim: This determines how the excerpt is trimmed when it exceeds the word limit. You can choose to trim the excerpt with an ellipsis (...) or to truncate the excerpt. To change the trim, you can change the value of the custom_excerpt_more variable. For example, to trim the excerpt with an ellipsis, you would change the value of the variable to ....
Show/hide the read more button: You can show or hide the read more button by changing the value of the custom_readmore_button_show variable. To show the read more button, you would change the value of the variable to true. To hide the read more button, you would change the value of the variable to false.
Read more button text: You can customize the text of the read more button by changing the value of the custom_readmore_button_text variable. For example, to change the read more button text to "Learn More", you would change the value of the variable to Learn More.
Step 3: Use CSS to style the excerpt and read more button
You can use custom CSS to style the excerpt and read more button of the portfolio module. To change the button style, you can add the following CSS to the Custom CSS field in the Divi > Theme Options:
.my-custom-readmore-button-class {
background-color: #2996cc;
color: #fff;
font-size: 14px;
padding: 10px 20px;
border-radius: 5px;
}
To change the excerpt style, you can add the following CSS to the Custom CSS field in the Divi > Theme Options:
.my-custom-excerpt-class {
font-size: 16px;
color: #333;
margin-bottom: 10px;
}
You can adjust all of the above CSS properties to your own liking to create the look and feel that you want.
The result can be seen in the screenshot below:
