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.

Awhile back, I wrote up a tutorial for injecting Divi Library Layouts into your footer by modifying the footer.php template. With the introduction of Divi Hooks, we can now inject that layout into the footer without having to modify any php template files.  All we have to do is add a simple snippet of PHP to your functions.php file.

By the way, this is the method I am using for the footer in this website 😉

So in this tutorial, I will show you how to use a little custom PHP to inject a layout saved in the Divi Library, into the footer on every page of your website. To do this you will need a basic child theme with a functions.php file.

View The Live Demo

 

Let’s Get Started Setting up the Divi Footer Section.

 

Adding the layout

1. Go to your Divi Library and add a new layout.

 

2. Give it a name and choose Layout as the the Layout Type.

 

3. In my demo I am using a couple of prebuilt sections from the Elegant Themes “Pottery Studio” Template. I just imported the entire layout on another draft page and then copied the sections I wanted, over to my Library Layout.

 

Adding The PHP

4. Go to Appearance>Editor and open your functions.php file and you are going to insert the function below. 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 the txt file below.

Grab The PHP Snippet

 

5. Your functions.php page should look like this after you have copied and pasted the snippet above.

 

Inserting the Divi Library Section into the PHP snippet

Now we are going to grab the layout shortcode and insert it into the PHP snippet above.

6. Go to your Divi Library and open up the layout you just created. 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 27496. This is the URL in my example: https://montereydev.com/demos/divi/inject-divi-library-layout-into-footer-using-divi-hooks/wp-admin/post.php?post=27496&action=edit

 

7. Go back to Appearance> Editor and open the functions.php where you added the snippet above and in this shortcode, replace the number with your own.

 

Adding The Custom CSS

For this tutorial, I am not using any custom CSS. If you still have widgets in your default footer area, then your footer is most likely still showing up. You can either remove all the widgets from your footer area in Appearance>Widgets.

Or you can add this CSS

	/* hide default footer */
		#footer-bottom {
			display: none;}		

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

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-2018 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