One of the most common Divi requests I receive is how to make the archive pages stand out a little more. People often want to do more than just change the some colors and the sidebar.
If you don’t know how template hierarchy works within WordPress, check out this infographic on the topic.
In this tutorial I hope to show you how easy it is to add a saved Divi Builder section to the header of all your archive pages (and more).
To do this you will need a basic child theme and you will need to use either an ftp program such as FileZilla, or if your hosting company offers you access to the cPanel, you can use the File Manager.
Let’s Get Started
Creating the Archive.php File
The first thing we are going to do is create an archive.php template and add it to your child theme. If you have never done this before, don’t worry. It is much easier than you think and you will be stoked once you do it for the first time.
1. Unzip your most recent Divi Theme file that you downloaded from Elegant Themes.
2. Open up the unzipped folder and find the index.php file and make a copy of it.
3. Now rename the file and name it archive.php
4. Good job. You just created the template file. Now you will need to upload it to the child theme you have already installed. If you have not installed a child theme you can learn more about them, and download a free one here: http://quiroz.co/the-ins-outs-of-child-themes-premium-divi-child-themes/
4a. If you use an FTP program like Filezilla or WinSCP, you can just drag and drop the file over to your child theme. This is what it will look like using WinSCP.
4b. If you prefer to use the cPanel File Manager, then you just open up the file manager and go to the child theme folder (/wp-content/themes/the_name_of_your_child_theme/) and upload the archive.php file. This is what it will look like.
Awesome. Now that was not so hard was it? Let’s move on to the next step.
Creating the Archive Header Section
Now we are going to create a header section and save it to the Divi Library.
5. Create a new page and and click on “Use The Divi Builder”. It does not matter what you name the page because once you save the section to your Divi Library, you will be able to delete the page.
6. Now go ahead and create the header section of your choice. In my example I added a dark background image to the section and added a Text Module for the headline and a Button Module for the Contact Us button.
This is what my example looks like
7. Open up the Section Module Settings and Save it to your Divi Library.
Now you can go ahead and delete the temporary page as you will be able to update or change the header section directly in the Divi Library.
Inserting the Archive Header Section into the PHP template
Now we are going to grab the header short code and insert it into the archive.php page with a little php snippet.
8. The first thing you will need to do is go into your Divi Library and open up the saved layout.
9. Once you have the layout open, check out the url and you will see a sequence of characters and numbers. You are going to want to grab the numbers as we will need that for the next steps. For example in my case, the number sequence that I want to grab is 26861. This is the url: http://montereydev.com/demos/tophead001/wp-admin/post.php?post=26861&action=edit
10. Go to Appearance> Editor and on the right you will find the archive.php file we added to your child theme. Go ahead and open that up.
11. The first line of code should look like this.
<?php get_header(); ?>
Replace that line with this snippet. And then replace the number 26861 with the number you wrote down for your particular layout (see step 2)
Unfortunately my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from this rich text format file.
So your archive.php file should now look like this.
BOOM!!!! You have just injected a Divi Page Builder Section into your Archive pages.
Inserting Different Header Sections into Search pages, author pages and category pages.
On one of our child themes we created different header sections for the Search Results pages, Author pages, Category Pages and even Single Post Pages.
All you have to do is follow the same steps for each page type and just name each php file after that type. So you will be creating a search.php, category.php, author.php, etc…
Once you start playing around with this type of stuff you will find you can do all sorts of amazing stuff in Divi.
Well that’s all for now. I hope you find this article useful.
Latest posts by Geno Quiroz (see all)
- Align Buttons To The Bottom of the Row - May 1, 2018
- Inline Buttons - April 6, 2018
- Animated Gradient Background Overlay Close-In From Both Sides - March 28, 2018