Divi’s Single Post Page allows you to use the Divi Builder, giving you a ton of options for the look of your Single Post Page. But I have to admit sometimes using the Page Builder on a post page sort of defeats the purpose of the simplicity of the single post.
After all, WordPress was designed to make it very easy to non-techies to publish posts on a regular basis and the Page Builder layout can be a little intimidating to some of my clients. They actually prefer to use the Default Editor page because it is just more familiar, like using a Word Doc.
On this blog, I use the Default Editor for all my posts. I do the same on Monterey Premier because our bloggers are more comfortable with it as well.
But that does not mean we can’t add some nice Divi Page Builder elements to your Single Post Pages without having to use the Divi Builder Editor for each post. For example just look at my fullwidth menu above. I injected it into every single post page from the Divi Library. Slick huh?
So in this tutorial, I will show you how easy it is to add a saved Divi Builder Header and Fullwidth Menu Section into the header of all your Single Post pages.
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 Single.php File
The first thing we are going to do is create a single.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 single.php file.
3. 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/
3a. 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.
3b. 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 single.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 Single Header Section & Fullwidth Menu Section
Now we are going to create a header section and fullwidth menu section (using a category menu) and save it to the Divi Library.
4. Go to your Divi Library and select Add New.
5. Give the template a name and make sure to select “Section” as the Template Type.
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 Search Module just below it.
7. Go back to the Divi Library, add a new layout, and this time make sure to select “Fullwidth Section” as the Template Type. And then Use the Fullwidth Menu Module. I chose to use a menu I created with all my blog categories.
This is what my example looks like
Inserting the Archive Header Section into the PHP template
Now we are going to grab the header shortcode and insert it into the single.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 26866. This is the URL: http://montereydev.com/demos/tophead001/wp-admin/post.php?post=26866&action=edit
10. Now do the same for the Fullwidth Menu Layout. For example in my case, the number sequence that I want to grab is 26870. This is the URL: http://montereydev.com/demos/tophead001/wp-admin/post.php?post=26870&action=edit
11. Go to Appearance> Editor and on the right you will find the single.php that you added to your child theme earlier. Go ahead and open that up.
12. The first line of code should look like this.
Replace that line with this snippet adding the two new lines highlighted below. And then replace the number 26866 with the number from your header section and the number 26870 with the number from your Fullwidth Menu section.
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 single.php file should now look like this.
BOOM!!!! You have just injected 2 Divi Page Builder Sections into your Single Post 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…
If you don’t know how template hierarchy works within WordPress, check out this infographic on the topic.
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