Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Update 16/10/17: After recent updates this method no longer works. It can still be done but rather than updating this recipe, I have instead chosen to write a much simpler solution on how to Limit the Excerpt Length in Divi with CSS which will be easier to implement and maintain .
Recipe #18 follows on from the blog layout theme of recent recipes, but I have decided this week to show you how to change the excerpt length of Divi blog posts as it is something that I see asked quite often in the Divi Facebook groups.
The reason why this appears to be difficult is that Divi doesn’t use the WordPress built in blog layout, it has one all of it’s own which is how you are able to have the custom Divi blog module in the builder.
Now obviously you can set manual excerpts but what if you are importing a ton of existing content in to a new site? You don’t want to have to go into each post and add a manual excerpt to every single one, with this method you don’t have to.
If you haven’t yet checked them out yet you can read How to Create a Pinterest Style Blog Layout (Recipe #15) here, How to Create a Letterbox Style Blog Layout (Recipe #16) here, and How to Create a Large Thumbnail Style Blog Layout (Recipe #17) here.
So let’s get cooking!
Ingredients
The Divi Theme from Elegant Themes
An active child theme (we are going to be editing a little PHP so a child theme is a ‘must have’ for this recipe)
FTP or cPanel access to upload your modified PHP files
Some existing blog content or sample blog content for testing purposes
Cooking time
This should take you around 10 minutes max.
Preparation
There is not much prep for this recipe, just make sure you have the latest version of the Divi theme saved and unzipped somewhere on your computer as we are going to need a file from it. You will also want to BACK UP before you begin, it’s not a good idea to start editing PHP without a back up.
Method
So the first thing we need to do is go into our unzipped Divi theme folder on our computer and navigate to Divi > includes > builder and then locate the file called main-modules.php.
Copy the main-modules.php file and then paste it into the root of your child theme.
Now open up the main-modules.php file from your child theme folder in your favourite text editor (I’m using Brackets by Adobe which is free for both Windows & Mac) and scroll down to line 11118 (at the time of writing this is accurate for the latest version of Divi, 2.7.5, for later versions the location may move so you may need to search a bit). The line you are looking for is truncate_post( 270 );
270 is the number of characters, not words, the excerpt is set to display, change this number to whatever you want, but be careful not to mess with any formatting. I am going to use 170 as that should fit nicely with the layout I am working with.
Be sure to save the file.
Next, open up your functions.php file from your child theme root folder (this file is automatically created with any child theme builder or plugin you use). Paste in the following code.
if ( ! function_exists( 'et_builder_add_main_elements' ) ) : function et_builder_add_main_elements() { require ET_BUILDER_DIR . 'main-structure-elements.php'; require 'main-modules.php'; do_action( 'et_builder_ready' ); } endif;
Now save the functions.php file too.
Next you will need to open up your FTP program or cPanel and upload the modified functions.php and main-modules.php file to the root of your child theme folder.
Ok, now lets check our blog posts. You may need to clear your browser and system caches before you will see the changes.
Here is what mine looked like to start with (270 characters).
And here is what it looks like after changing the excerpt length (170 characters).
Much better
And that’s it. you should now have a shorter (or longer if that’s what you chose) excerpt on your Divi blog posts.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
That’s precisely what i have been looking for for my latest project. Thanks a lot!
Dear Michelle – is there any way to set up two types of post excerpts to display on the blog page? My client would like one category to display about two lines of type and the other to display about five lines. Possible? Thanks for considering!
Not with this recipe, but you can with this one by changing the CSS class: https://divisoup.com/q17-limit-the-excerpt-length-in-divi-with-css/
Great post, thanks so much , this is what i was looking for. All of your recipes pf styling blog layout are awsmm,going to try for sure.
Thank you Sunita
Hey Michelle, how about remove the Excerpt, btw if you change it into 0 characters, it will display ‘…’.
.et_pb_post .post-content {
display: none;
}
Hi Michelle,
When i check the blog module in the visual builder mode, it shows the decreased length. But when i look in actual live page, the changes didn’t take effect. Cleared browser cache.
How odd is that?
(site is in dev-mode)
Rob
Replied via email
Hello Michelle,.
I love your recipes for it, would you propose a Variant by setting the height rather than the number of characters?
In a blog page, the items would be put away and the soldiers.
(translated from the french by Bing translation)
Yes you could do it that way but it may not translate well on smaller screens and you could have sentences showing the top half, you would need to write some media queries
Dear Michelle,
Thanks a lot for your solution! it actually works and as far as I’ve searched online is the only solution for this matter.
The only (big) problem is that when I put this php code in function.php some pages in my wp admin break like (appearances > themes and also edit posts and pages)
do you have any clue why this happens since you know what this code does. I don’t have any php knowledge.
Thanks a billion
Nasser
I would need to see the whole code Nasser, it doesn’t do this for me so I would imagine you have an error or conflict somewhere
Michelle hi
I just followed this for the Extra theme but it doesn’t seem to work. Any ideas?
link to web page
Hey Lisa
Extra like has different code so no it probably would not work unfortunately
Thanks for this great tutorial! I have just a little question: is it possible to shorten the work a bit when file-editing directly in the cPanel is possible? I thought of changing the excerpt-length in the main-modules.php-file of the parent theme and then adding the code in the functions.php-file of the child theme. But I’m sure if this would work. Have you ever tried this?
I am not entirely sure I understand what you mean, but in order to change the functionality of the module you need to duplicate it, edit it and then call it from functions.php. Is that what you mean?
Would it be possible to hire you to do this for me? I’m little uncomfortable tweaking the php files. Please let me know. I have provided my email address in the required comment boxes. Thank you!
I am flattered Alex but I am not currently taking on any client work. It is a simple process and as long as you keep backup copies of the files and have FTP access you shoould be fine, but if you really want someone to do it then try this FB group https://www.facebook.com/groups/divifreelancers/
How is it possible to hide the excerpts on the blog grid on a home page in CSS? I am having trouble targeting it??
Give your blog module a custom class and then…
.myclass .post-content {
display: none;
}
Hi Michelle, I’ve tried several times to add that css snippet to both the custom css for the blog module and custom css for the “Divi Theme Options”. None of which worked. Would you please be able to give a little bit more detail so that I can make this edit to remove the excerpts completely. Thanks in advance
Hi George, this is PHP not CSS so it won’t work in the custom css box, you need to go back an take another look at the instructions.
If you want to hide the excerpt altogther then add this to your stylesheet or divi theme options custom CSS box :
.et_pb_post .post-content p {
display: none;
}
Hello and thanks for a great tutorial. I want to remove the whole excerpt, which can be done easily by setting the truncate_post( ) to 0. However, I still get the ellipsis (…) where the post content should be. Any ideas on how I could remove it? Thanks
If you don’t want the excerpt to show its actually my simpler to do it with CSS rather than editing the PHP files. Do you have a link please?
Hi Michelle, I’ve removed it using CSS. Thanks for the pointer.
Thank you for this Michelle, I found it very instructive! If Divi updates and there’s a change in the original main-modules.php, that wouldn’t reflect in your child theme right? Is that a likely scenario do you think? And how would you deal with that if it happens? I imagine if you’re managing a single site it’s doable, but if you have multiple client sites, each with modifications, keeping them all updated would potentially be quite a job. What are your thoughts on that? And would there be an alternative way of making modifications like you described, that would be more… Read more »
Hi Dave
That correct, it wouldn’t reflect. And also, modifications like this don’t currently work with the visual builder so you will see the module on the front end but won’t be able to edit it.
To be honest I rarely use these types of modifications in child themes but the design required it. I don’t plan to use them in future child themes if I can help it or until there is support for them in the visual builder.
That said, I recently found this which I haven’t yet tried but it looks very promising, hopefully it will help you http://wpclips.net/
Hello! Does this same code work in Extra 3.0?
It’s not working for me, however the 270 was not working as my excerpts were and are still coming in over 600 characters.
Thanks,
Leslie
No probably not Leslie, the blog functionality in Extra is much more complicated because of the category layout etc.
Hello! I was looking for a tutorial on how to modify main-modules.php in a child theme and I found your post. thanks a lot!
Glad it was helpful for you
Thank you!!! This is SO helpful! Any ideas on how to prevent the htmls tags from being stripped out? I edited the excerpt length but I also want to keep line breaks, bolded text, etc. I don’t see any place to edit that in the main-modules.php file. Thoughts on how to do that? Thank you!
Hi Meg
Just wanted to rely to your comment here and provide the link to the Facebook discussion on this in case it is helpful to anyone
https://www.facebook.com/groups/DiviHelpAndShare/permalink/1018459064912070/
Thank you so much for putting this information out there in such a clear and concise form. Wonderfully done, and extremely helpful! I would like to ask what text editor you would suggest to use? I’ve found few interesting apps at http://besttexteditor.com
Thanks Jannete
The easiest is Notepad++ which is for PC but my editor of choice is Brackets by Adobe. Sublime is also supposed to be very good.
Thank you for posting this, it help me to understand the structure.
Here’s the thing though.
What if, as in my case, you want to use two different excerpt lengths in two different areas.
In my case, I have the excerpt for each blog post, which is the standard 270 characters or close to that, and I also use a blog module in my side bar where I i only need about 1-20 characters.
What do I do in that case to be able to control both of them independently each other?
Hi Stewart
This would need to be modified to work with the Divi blog modules but should get you started
http://www.wpexplorer.com/custom-excerpt-lengths-wordpress/
Great tip, thank you Michelle!
My pleasure Eileen
As always great content that is very helpful for a website and PHP novice like me!
Thanks Dee
muy bueno y muy buenos diseños michelle desde argentina! saludos!
Muchas gracias por sus amables palabras Adara , tener un gran día