Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add An Excerpt And Read More Button To Projects In The Divi Portfolio Module

Nelson Miller Profile Orange
In this tutorial I will show you how to add an excerpt text and read more button to the Divi Portfolio module projects grid!

▶️ 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;
}
Categories: Divi PHP Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

28 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Ernie St Gelais <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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?

    Reply
    • Hemant Gaba

      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.

      Reply

Comments By Others

  1. Irene

    Hi! Thanks so much for the code! It works perfectly. I was wondering if it would be possible for the excerpt to link to the relevant portfolio page, as the title and image do. Thank you so much

    Reply
  2. piero

    Hi, thank you very much for your help with this topic. I used it on my website, and it works fine. I have a little problem with cutting words. It is not working properly. Do you have any suggestions for fixing it?

    Reply
    • Hemant Gaba

      Hi Piero!

      Please try adding the following code and see if it helps:

      .et_pb_portfolio_excerpt {
      word-break: keep-all;
      }

      Reply
  3. Ewout

    Hello,

    Great work on this tutorial, very helpful. I also noticed a similar tutorial about the blog page, addressing it in a similar way, which is very useful.

    I do have a question about the link/button. Is there a way to ensure that the buttons, regardless of the length of the title and excerpt (for desktop view), stay in line so that all buttons in the grid overview have the same height?

    Currently, the issue is that the link/button appears right below the excerpt, and this sometimes results in the buttons in the grid overview shifting. Providing an exact length in the number of words doesn’t help because some words are longer than others, causing the buttons to still shift.

    It might be a bit of a convoluted question, but I hope my point comes across 🙂

    Thanks in advance, and keep up the good work!

    Reply
    • Hemant Gaba

      Hi Ewout!

      Can you share the URL of the page so that I can check the button alignment as per the content of the page?

      Reply
  4. Birgitte Tüpker

    Whenever I google a problem, I find one of your fantastic tutorials.
    Thank you!

    Reply
  5. Jaime L Ward-Yassin

    Hi there, you do another post “Move Portfolio Text Over image”. How would I include that excerpt in that with the title and Meta? Thanks in advance. You’re tutorials are very helpful.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Jaime,
      I haven’t tried combining them, but it should work fine if there is enough physical space for the text. You may have to just include the selector for the excerpt in addition to the title and meta selectors.

      Reply
      • Hemant Gaba

        Hi Jaime!

        The excerpt should be included with the title on the image. To check further, share the page URL for investigation.

      • Jaime

        Would that be in the script or the css? and what would the selector be? I’m not super Script Swavy

  6. Sheldon

    This is exactly what I was looking for, however using the code creates a whole bunch of errors on the site that say “Warning: DOMDocument::createElement(): unterminated entry reference”

    To fix, I changed line 53 to
    $p_ele = $dom->createElement(‘p’, htmlentities($excerpt));

    And it worked great. Thank you!

    Reply
  7. Henrik

    Hello

    Thanks for all your great codes, they really help a lot.

    by this what can you do if you have text in Excerpt? and would like to use

    HTML codes do not include it in your code here.
    Is it possible to get it in some way?

    Reply
    • Hemant Gaba

      Hi Henrik!

      Are you referring to the HTML format in the excerpt?

      Reply
  8. Chelsea

    Hello, Just wondering – is it possible to have the excerpt text display on hover as an overlay instead of having it under the featured image?

    Reply
    • Hemant Gaba

      Hi Chelsea!

      We don’t have any such tutorial for it right now. However, I think Elegant themes can provide you with such customization. You can contact their support.

      Reply
  9. inextable

    Hi:
    Thanks very much for your post, it’s really helpful.
    My question: How to make button’s text translatable with wpml plugin?
    Thanks very much

    Reply
    • Hemant Gaba

      Hi Inextable!

      I think it is not possible to translate the button in WPML. We need to translate it manually. Can you please share the page of other language with me so that I can provide you the script?

      Reply
  10. Martijn

    Hi! I’m using this on a website I’ve build but a few of my projects don’t show the excerpt (even though it’s filled out in the project page settings).

    Reply
  11. anweb

    Hi,
    Great turtorial but I wonder if it’s possible to have a background color for all the part with the title, excerpt, button link? I succeded with css for all the parts except the button link but need to do it one by one so is it for the whole part an css?

    Thanks,
    anweb

    Reply
  12. Liam

    I added it to my child theme’s function.php but it’s not working. Can you please help me. Thank you!

    Reply
  13. Chris

    Very helpful. One wishlist item would be to be able to use shortcodes in the excerpt. I’ve seen snippets that can enable shortcodes in excerpts but they don’t work for me when using the Divi Portfolio module and your snippet. Hoping to add a small media player but no luck. 🙁

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart