How To Add An Excerpt And Read More Button To Projects In The Divi Portfolio Module Tutorial by Pee Aye Creative

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

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

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

If you have a child theme, then you would add this snippet to the functions.php file of a Divi child theme. If you don’t already have one, you can download our free Divi child theme here.

If you want the easy way, then I will recommend installing the Code Snippets plugin. It is a great plugin that allows you to add snippets easily in the backend of your admin area. After activating, just go to Snippets>Add New, write a title, paste the snippet, and click the save and activate button. Here is how that will look:

PHP code snippet to add an excerpt and read more button to the Divi Portfolio module

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;
        // 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 = wp_strip_all_tags(get_the_excerpt($poject_id));
                $link = get_the_permalink($poject_id);
                // Show Excerpt
                if (!empty($excerpt) && $show_excerpts) {
                    $excerpt = wp_trim_words($excerpt, $excerpt_limit, $excerpt_more);
                    $p_ele = $dom->createElement('p', $excerpt);
                    $p_ele->setAttribute('class', 'et_pb_portfolio_excerpt');
                    $parent_ele->appendChild($p_ele);
                    $output = $dom->saveHTML();
                }
                // Show Button
                if ($show_readmore_button) {
                    $button_ele = $dom->createElement('a', $readmore_button_text);
                    $button_ele->setAttribute('href', $link);
                    $button_ele->setAttribute('class', 'et_pb_portfolio_link');
                    $parent_ele->appendChild($button_ele);
                    $output = $dom->saveHTML();
                }
            }
        }

        return $output;
    }

    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.

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.

If you are using our free Divi child theme, you can add CSS snippets in the style.css file. Otherwise, place any CSS code in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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;
}

Last updated Feb 28, 2023 @ 12:17 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart