Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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.

 

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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.

 

View The Live Demo

 

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.

001 Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

2. Open up the unzipped folder and find the single.php file.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

 

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: https://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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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.

005

 

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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

 

This is what my example looks like

 

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

 

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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

12. The first line of code should look like this.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

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.

Add a Header Section & Fullwidth Category Menu to the Top of your Single Post Pages

 

BOOM!!!! You have just injected 2 Divi Page Builder Sections into your Single Post Pages

 

Add a Header Section & Fullwidth Category Menu to the Top of 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.

Have fun!


Well, that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest