If you’ve ever had to add code to your child theme’s functions.php file, or you just want to try your hand at creating a simple plugin, this tutorial is for you. In this tutorial, we’re going to create a very simple WordPress plugin that you can use to add Divi Sections or Modules almost anywhere on your site. Okay, this plugin is very simple but perfect for someone who’s just starting off and wants to learn the basics without getting too caught up in the complexities of a sophisticated plugin. This was my first attempt at creating a plugin and, to be honest, it was quite cool to use a plugin I had created myself, even if it wasn’t rocket science building it.
Although, in principle, this tutorial will demonstrate the fundamentals of creating a WordPress plugin, please note that the functionality of this plugin does require that you already have the Divi theme by Elegant Themes.
What is This Plugin Going to Do
Once you’ve built and installed this plugin, you’ll be able to insert Divi Sections and Modules using a shortcode pretty much anywhere that accepts shortcodes. All you’ll need to do is save or create Divi Sections or Modules in the Divi Library and then insert them anywhere using the shortcode [showmodule id=”246″] where the ID is the ID of the section/module in the library.
The functionality of this plugin is based on the tutorial How to add a DIVI section or module inside another module by Fabrice Esquirol of creaweb2b.com.
If you have a look at the tutorial by Fabrice, you’ll see that in essence, you can simply drop the code into your child theme’s functions.php file but for this tutorial, we’re going to use it as the heart of our plugin.
Let’s break this down into four easy steps:
- Create a folder and give it a name. The name needs to be unique otherwise there will be a conflict if you already have a plugin with the same name.
- Create a PHP file in the folder you’ve just created and give it the same name as the folder, and insert the PHP script below:
I called my folder simple-divi-shortcoder and the file, in turn, was called simple-divi-shortcoder.php.
A PHP file is essentially just a plain text file with the file extension of .php. You can use a number of tools to create a file like this but my personal preference is Atom, a “hackable text editor for the 21st Century”.
- Zip the folder, giving the zip file the same name as the folder itself (in most cases it should be the same by default).
- Upload, install and activate the plugin.
Using the Plugin
Now that your plugin is up and running, head over to your Divi Library and create the section or module you’d like to insert somewhere else. You can of course use items in the library that have been saved there from existing posts or pages. Next, locate the ID of this item. The two easiest ways to find an ID are:
- By hovering over the edit link in the library.
- The second is to find it in the URL of the section or module while you’re editing it.
Now that you’ve located the ID, all you need to do now is insert the shortcode [showmodule id=”InsertIDhere“] whereever you want to use it. Just remember that that you need to put it in a container that supports shortcodes. I’ve tested it in a number of places including a Widget area, a Divi Tab Module, and a Divi Text Module at it worked beautifully every time.
Wrapping It Up
Well there you have it! Your very own plugin, and who would have thought it would have been that easy! With this particular tutorial, you’re just created what’s really a very powerful plugin. Imagine the possibilities; you could insert Divi Map Modules, Pricing Tables, Person Modules into Tab or Accordion modules for example, or even Divi Modules within Widgets.
Now, if you don’t have the time or the inclination, Fabrice has built a plugin that is more sophisticated than the version we’ve built here. The plugin is available on his site and is called Simple Divi Shortcode.
If you are interested in learning more about creating plugins, check out the official WordPress guide, Writing a Plugin, or for something a little more beginner friendly, How to Create a Simple WordPress Plugin or Writing a Simple WordPress Plugin, Beginner Tutorial.
Support Divi Notes
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.