Add Excerpts To Portfolio
If you have searched the internet for this, you did not find the answer – until now! In this tutorial, I am every excited to show you how to add an excerpt text and read more button to the projects in the Divi Portfolio module. I will provide a PHP code snippet to you that you can easily customize with a lot of options, so let’s get started with this exciting solution to a very common request in Divi.
▶️ Please watch the video above to get all the exciting details! 👆
1. Add A PHP Code Snippet
The tutorial may look intimidating with PHP code, but please don’t worry. It is actually very easy if you know how to copy and paste. I really only requires two simple steps, pasting the PHP code snippet below into your website and adjusting any of the values to your preferences. There are a number of locations to add PHP to your Divi website, and it will totally depend on your website and experience.
Where To Paste The PHP Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
PHP Snippet
if (!function_exists('pac_misc_filter_portfolio_output')):
function pac_misc_filter_portfolio_output($output, $render_slug, $module)
{
// Return If Frontend Builder
if (function_exists('et_fb_is_enabled') && et_fb_is_enabled()) {
return $output;
}
// Return If Backend Builder
if (function_exists('et_builder_bfb_enabled') && et_builder_bfb_enabled()) {
return $output;
}
// Return If Admin/Ajax and Output Array/Empty
if (is_admin() || wp_doing_ajax() || is_array($output)) {
return $output;
}
// Return If Not Slug Match
if ('et_pb_portfolio' !== $render_slug && 'et_pb_filterable_portfolio' !== $render_slug) {
return $output;
}
// Return If Empty
if (empty($output)) {
return $output;
}
// Show/Hide Excerpts
$show_excerpts = true;
// Allow Formatted Excerpt
$show_formatted_excerpt = true;
// Set Excerpts Words Limit
$excerpt_limit = 10;
// Set Excerpts Trim
$excerpt_more = '...';
// Show/Hide Readmore Button
$show_readmore_button = true;
// Set Readmore Button Text
$readmore_button_text = 'View Project';
$dom = new DOMDocument('1.0', 'UTF-8');
if (function_exists('mb_convert_encoding')) {
$dom->loadHTML(mb_convert_encoding($output, 'HTML-ENTITIES', 'UTF-8'), LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$dom->encoding = 'utf-8';
} else {
$dom->loadHTML('<?xml version="1.0" encoding="UTF-8"?>'."\n".$output, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
}
$dom_xpath = new DOMXPath($dom);
$nodes = $dom_xpath->query('//div[contains(@id,"post-")]');
if (isset($nodes->length) && 0 !== $nodes->length) {
foreach ($nodes as $node) {
$node_id = $node->getAttribute('id');
$parent_ele = $dom->getElementById($node_id);
$poject_id = str_replace('post-', '', $node_id);
$excerpt = get_the_excerpt($poject_id);
$link = get_the_permalink($poject_id);
// Show Excerpt
if (!empty($excerpt) && $show_excerpts) {
if ($show_formatted_excerpt) {
$excerpt_ele = $dom->createElement('div');
$excerpt_ele->setAttribute('class', 'et_pb_portfolio_excerpt');
$excerpt_ele->appendChild($dom->createCDATASection($excerpt));
$parent_ele->appendChild($excerpt_ele);
} else {
$excerpt = wp_trim_words(wp_strip_all_tags($excerpt), $excerpt_limit, $excerpt_more);
$excerpt_ele = $dom->createElement('p', $excerpt);
$excerpt_ele->setAttribute('class', 'et_pb_portfolio_excerpt');
$parent_ele->appendChild($excerpt_ele);
}
}
// Show Button
if ($show_readmore_button) {
$btn_ele = $dom->createElement('a', $readmore_button_text);
$btn_ele->setAttribute('href', $link);
$btn_ele->setAttribute('class', 'et_pb_portfolio_link');
$parent_ele->appendChild($btn_ele);
}
}
}
return $dom->saveHTML();
}
add_filter('et_module_shortcode_output', 'pac_misc_filter_portfolio_output', 10, 3);
endif;2. Adjust Any Values In The PHP Code
The code is designed to work great as is, but it is also thoughtfully designed to be customized very easily. Even though it is easy to do, I do need to remind you to be careful as you are editing.
Please be attentive to detail and especially careful when editing PHP on your live website. Only adjust the values mentioned below. Please watch the video to help understand exactly what can be adjusted.
Show/Hide Excerpts
I assume if you are coming to this tutorial that you want to show the excerpt, but hey, maybe you only want to show a button and not the excerpt. If you want to hide it, just change the value to “false” for $show_excerpts.
Show/Hide Excerpt HTML Formatting
If you are wanting to add formatting to your excerpts like bold, italic, or line breaks, you can change the ‘$show_formatted_excerpt’ variable to true/false to show excerpt with or without HTML.
Set Excerpts Word Limit
If you want to set a limit to the number of words that appear in the excerpt, you can adjust the $excerpt_limit value. By default, this is set to “10” but can be changed to whatever you want.
Set Excerpts Trim
When you are limiting the number of words that show in the excerpt, then it helps to show the cut-off point with three dots. If you want to change the $excerpts_more value to something else you can do so.
Show/Hide Readmore Button
Here you can choose either to show or hide a button. It is totally optional, but can look great and give that extra call-to-action to encourage visitors to click to view the project. By default, the $show_readmore_button is set to “true” but you can change this to “false” if you desire.
Set Readmore Button Text
And of course we are giving you the option to customize your own text for the button. We set this $readmore_button_text to “View Project” by default, but you can write whatever you want.
3. Style The Text And Button With CSS
Naturally you will want this new text and button to look great and match your website. Since there are obviously no design settings in the module for this, you will need to use CSS to style the excerpt text and link as a button.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Excerpt
To style the excerpt text, you can target it with the selector “.et_pb_portfolio_excerpt” using CSS. Here is an example of some code you may want to use.
Example CSS
/*style the Divi Porfolio excerpt text*/
.et_pb_portfolio_excerpt {
color: #000000;
font-size: 18px;
}
Button
To style the excerpt text, you can target it with the selector “.et_pb_portfolio_link” using CSS.
A perfect example of code that is very similar would be from our tutorial on the Divi Blog module read more button: How To Style And Customize The Divi Blog Read More Button. I have modified it and provided the sample below:
Example CSS
/*style the Divi Porfolio read more link as a button*/
.et_pb_portfolio_link {
color: #ffffff;
background: #0071fc;
border: 2px solid #0070fc;
padding: .7em 1.3em;
margin-top: 20px;
border-radius: 50px;
text-transform: capitalize;
display: inline-block;
transition: all 0.3s ease-in-out;
}
/*style the Divi Portfolio read more link as a button on hover*/
.et_pb_portfolio_link:hover {
background: transparent;
color: #0070fc;
border: 2px solid #0070fc;
transition: all 0.3s ease-in-out;
}
I got a message saying that the snippet caused an error at line 38:
$dom->loadHTML(mb_convert_encoding($output, ‘HTML-ENTITIES’, ‘UTF-8’), LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
Any idea what I can do to fix it?
Hi Raquel!
Please remove the line 38 code and try using the following code in its place:
if ($dom->loadHTML($htmlContent, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD)) {
// Successfully loaded HTML
echo $dom->saveHTML();
} else {
// Handle errors
echo “Failed to load HTML content. Here are the errors:
“;
foreach (libxml_get_errors() as $error) {
echo “Error: ” . $error->message . “
“;
}
Also, please implement these customization on a staging site first.
Does it work too when using the Divi Assistant plugin? I renamed the Projects Post Type and can’t this great solution get to work. Am I doing something wrong?
UPDATE: Forget my comment… I did not activate PHP code in the Divi assistant 😉
Hi Eric,
I’m happy to see you got this to work by enabling the setting, perfect!
Nelson, I noticed in a number of blog posts that you recommend using the Code Snippets plugin as the easiest method over adding it to a child theme. I have used the Code Snippets module myself and like it very much; however, I continue to recommend to clients to add a child theme to Divi. Just wondering how important that is anymore. What would you recommend regarding a child theme?
Hi Ernie!
Using both the child theme and Code snippet plugin are good options. Some users are not comfortable using the child theme as an error in any PHP code could cause critical error. Otherwise, child theme is more light weight option than the plugin. We personally use child theme as well.