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.

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:

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.

 

divi-layout-url

 

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:

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!

 

divi-page-builder-everywhere-widgets

 

    13 Comments

  1. 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.

    Maria

    March 22, 2017

  2. 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 🙂

    Jim

    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.

      Ana Cirujano

      May 31, 2017

    • You would need to add this code to the single-project.php file

      Brad (admin)

      August 17, 2017

  3. 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.

    scot

    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.

      Brad (admin)

      August 17, 2017

  4. 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!

    Sara

    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.

      Brad (admin)

      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!

        Sara

        August 18, 2017

        • Hey Brad – any updates on the plugin release – or an idea of how to implement #2? Thanks! -Sara

          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!

            Brad (admin)

            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!

            Brad (admin)

            August 28, 2017

  5. Am I missing something? there’s no loop??? The layout loads but not the posts from my custom post type

    Kevin

    September 22, 2017

Post a Reply

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