Add a Layout from the Divi Library to Archive Pages
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
The Divi Page Builder makes it easy to create beautiful layouts for pages and posts. But we’re still stuck with using page templates for creating page layouts for archive pages. This tutorial will show you how to easily load a layout from your Divi Library into an archive page like a custom post type archive.
PHP
The first thing you’ll want to do is create an empty file in your child theme folder and name it based on the archive page you want to change. You can reference the WordPress Template Hierarchy page to determine the file name. For this example, I have a testimonials custom post type so I’ll name my file archive-testimonials.php and place it within my child theme folder. Here is a tutorial on creating a child theme.
* If you want to keep the archive loop to display your CPTs, copy the index.php file from the Divi theme folder to your child theme folder. Then rename it to the correct template file name explained above. Then you can place the layout code given below anywhere in the file that makes sense to you. Keep in mind that if you place it inside the container div, it can’t be fullwidth without modifying the container CSS. If you want fullwidth, you’ll want to place it directly below the main-content div. I personally use the method below, and then load the CPTs in a module in the Page Builder layout using our Portfolio Posts Pro plugin. This way I have more control over how the posts are displayed, rather than being limited to the default archive loop.
In either case, your file location should be similar to his /wp-content/themes/Divi-child/archive-testimonials.php
Now just copy and paste the following code into this new archive page:
1 2 3 4 5 6 7 |
<?php get_header(); ?> <div id="main-content"> <?php echo do_shortcode('[et_pb_section global_module="25388"][/et_pb_section]');?> </div> <!-- #main-content --> <?php get_footer(); ?> |
The code above loads the header, the layout, and then the footer. You’ll want to replace the module number “25388” with the layout number from your library. To do this, log into your dashboard and go to Divi->Divi Libary and create a new layout. In the New Template Settings popup, make sure you select Layout under the Template Type dropdown and make sure Global is NOT checked. Click Submit and create your new layout. Now go back to your Divi Library and you should see your new layout. Hover over your layout and you should see the layout number in the URL at the bottom of your browser screen.
Once you replace the number in your archive template page, save the file and go to that page. You should see your new layout instead of the default archive page. If you don’t, you have probably named your archive page the wrong name. Again, refer to the WordPress Template Hierarchy page to determine the correct name for your archive page.
You can also use this same method to load any layout from your Divi Library above or below your header or footer. Just paste the shortcode into your header.php or footer.php file where you want the layout to load:
1 |
<?php echo do_shortcode('[et_pb_section global_module="25388"][/et_pb_section]');?> |
Again, make sure you replace the global_module=”25388″ with your layout number.
Page Builder Everywhere Plugin
You can also use the Page Builder Everywhere plugin by DiviSpace. This plugin makes it really easy to add a layout from your Divi library above and below your header or footer. You can also use it to load a layout above or below your content. You can even add logic so the layout only loads on pages, posts, custom post types, certain categories, etc. I like to use it on client websites that require an elaborate footer layout design. After installing and activating the plugin, simply navigate to your widgets and drag the new Divi Layout widget to the section you want it to display. From there you can select the layout you want to load from a dropdown and voila!
23 Comments
This is a great way to go about it, I’ve done it with category pages with great success, but would love to be able to add a post title module to a layout in tags pages, so each has an H1 with the tag name created by the post title module, for some reason this module doesn’t show up.
March 22, 2017
Thank you for this…it has definitely solved a few issues I was having trying to re-code the template files to get a new archive page layout!
However, it would be great to know how to also add a page created using the Divi Builder into an archive page for the ‘project’ custom post type?
Thank you 🙂
March 28, 2017
It is very easy! To add a layout from the Divi Library to the “Project” post type, just name the file “archive.php” (not archive-slug.php) and follow the instructions above.
May 31, 2017
You would need to add this code to the single-project.php file
August 17, 2017
I did this for a custom post type for boats. it is AWESOME. one problem i have is using a gallery module in the layout. AS it does not update. I am using ACF Pro Gallery fields. I can use [Gallery] in a code or text module and it works. i can use PHP code and it works. BUT i like DIVIS gallery and pagination. it is very uniform. Any ideas on how i can get this to work. MY authors see a simple form and publish. I don’t want them in the divi modules that is the point of this great template tutorial right. keep it all uniform SWEET. i need help. does what i am asking make sense? I have tried everything i think. Thanks.
July 4, 2017
Sorry Scot, that one is beyond me. My best suggestion would be to just find a similar gallery plugin on Codecanyon and you could use the shortcode but you already knew that. Sorry.
August 17, 2017
Hi there. Your tutorial is great, but I’m having a little trouble applying it to my archive pages (archive.php). I have the layout all set, but the blog module is displaying ALL of my posts, not just the posts for that particular month. Do you know how I can make the layout only call the posts for the specific archive page/month the visitor is on? Thanks!
August 17, 2017
Thanks Sara. So the blog module overwrites the default archive loop with a new query, which is why you’re not seeing the expected results from The Loop. I see three options.
1. Modify the blog module and remove the new query using this tutorial.
2. Take the code from the blog module loop and paste it inside the loop in the archive.php file.
3. Install my new plugin which takes the best from 1 & 2. Unfortunately I have another day or two (possibly longer) before it will be ready. Contact me if you’re interested.
August 17, 2017
Brad, thanks so much!
Since I’m using the blog module elsewhere in the site #1 won’t work as I only want to apply the modification to the archive layout.
For #2 – where would the loop get pasted – at the top of the page? Or right before the php echo? This seems like the best option for me right now.
I would be ABSOLUTELY interested in your plugin if it’s finished in time and I can afford it. As a frequent Divi developer this type of customization would be a lifesaver for me!
August 18, 2017
Hey Brad – any updates on the plugin release – or an idea of how to implement #2? Thanks! -Sara
August 22, 2017
Hi Sara! We are working around the clock trying to get this new plugin released. Our goal is to have it ready by tomorrow but we still have some last minute testing to do. I’ll post back as soon as it’s ready. If we run into another delay, I’ll help you out with option 2. Thanks!
August 23, 2017
Finally! We have released our new plugin:
https://diviplugins.com/plugins/divi-module-builder/
This would allow you to copy the output from the blog module and create a new module using that output. And of course you could change the text and modify the output however you want. Let me know if this isn’t something you would be interested in and I’ll help you with option 2. Or if you want, I can create the custom module for you and you could import it into your site using the plugin above. Thanks!
August 28, 2017
I would love to know how to implement #2 because there is no loop only a shortcode. So I am not sure where this would be pasted.
I hope you can help!
Thanks
March 15, 2018
Am I missing something? there’s no loop??? The layout loads but not the posts from my custom post type
September 22, 2017
In this case you would copy the index.php file, which includes the loop, and then add your layout somewhere above or below the loop. I modified the tutorial to explain this. Thanks for pointing it out. I typically load CPTs using our Portfolio Posts Pro plugin so I have more control over the layout: https://diviplugins.com/downloads/portfolio-posts-pro/
April 8, 2018
WOW, just wow, I searched for about 3 hours on how to completely transform woocommerce shop page with a divi loyout, well this just made it all. thanks. It just happens that i have WC Product Builder For Divi , bought it from divikingdom, so I created a loyout for the shop page with the modules that integrated the plugin to divi and then i modify the woocommerce/archive-product.php (in my divi child theme) with your code, and for my surprise IT WORKED. YAYYYY! pretty good. I´m guessing this can be done with product category and much mure with the correct modules (sorry for my english i´m spanish native)
/the website it is under development/
January 7, 2018
Should this work with single.php? I’m trying to use this on a CPT for regular posts but no luck so far.
February 19, 2018
This should work in any of the template files.
April 8, 2018
Can I use this to add an element from the divi library to woocommerce category and product pages? Sorry, this is a little over my head. Thanks.
March 8, 2018
You can! I actually had the same thought soon after creating this tutorial: http://www.eleganttweaks.com/divi/add-content-to-woocommerce-category-pages/
April 8, 2018
Hi and THX for this nice tip. still I need a slight bit essential enhancement. How do we make this executable for WPML multilingual websites as European countries and more need this essentially. Sadly the Page Builder everywhere is even not compatible with WPML.
I truly hope you can give us a great tip for selecting another layout per language.
Best.
May 13, 2018
Superb Tip! Thank you for this
June 11, 2018
how i solve the proplrm : making archive for my categery ?
divi not support . (Divi can’t be used to style and edit archive, category and search result pages)
we use these article ,but it not work for us
what can we do ?
April 2, 2019