How to edit the file templates with the visual editor

When we activate the Divi theme in our WordPress installation, we can lay out the pages and the entries with the visual editor but, in principle, we can not edit the file templates: neither categories, nor taxonomies .. .

So, if we do not know the code, we can use the Divi theme to visually format our pages, but we will not be able to edit the templates .

As of now, with a little knowledge of how WordPress works, we can have a much improved Divi .

Knowing the hierarchy of WordPress templates and with a simple line of code, we can hack Divi to be able to edit these templates with the visual editor .

Edit file template with Divi

To layout the content of the file template with the Divi's visual editor, we have to create a template with Divi, know which file of the Divi theme we must edit (or create new, if it does not exist) and include a short code with the design ID that we have created .

Let's go step by step to get this:

Create the Divi template with the design we want to give the file page

Let's go to the Divi Library and create a new template . The type of template must be " Design " (" Layout ") and it is important that it is not global .

 New settings template

In this design we can include all the modules that we need but it is important that in the design we include a module that collects the entries of Custom Post Type ] for which we are creating this design, since later we will include it in the template of that CPT and it is the archive page.

In our case, the CPT is " Projects " , so we will include a "Portfolio"

Create a child theme

To be able to edit the theme files without losing Divi updates, we must create a child theme. To achieve this, we need to access the files on our website via FTP, or if you prefer with a plugin .

Locate the file that we must edit or create in our child theme

Once let's have our folder with the theme son, we must create in that folder a file that is called with a specific name, which WordPress understands as template file .

To know what name we have to give to this template file, we must know the famous outline of the structure of a WordPress theme .

According to this scheme, to edit the file template, we must edit or create the file ] archive.php . This is true in all WordPress installations, regardless of the theme they have installed.

If we wanted to edit one of the pages of a Custom Post Type we should edit the file single-slug. php . In our case, as we have installed the Divi theme, which comes with the Custom Post Type which is called "Projects", whose slug is "project", we must edit or create the file single-project.php .

Insert in the template the module of the Divi Library

To insert in the file template the template that we have created and that we have saved in the Divi Library, we have to do the following:

We create a file that is called archive.php . We can do this with our favorite code editor (I use Sublime Text ) or with the notebook, and copy the following code:

The number that appears in quotation marks is the ID of the template type design or " layout " that we have previously created with our visual editor and saved in the Library of Divi.

How can we find out the ID of a template in the Divi Library? We go to the Divi Library, we put the cursor on the name of the module, and we look in the bar of State. The number that appears is the ID of the design.

 ID of the template or Divi module

We visit the page and we see the magic

We visit misitioweb.com/project and we check that our own design is loaded on the file page.

By touching a bit of code and understanding the WordPress template scheme slightly, we can take a very big step in designing our web pages with Divi.

Other applications

Knowing this system, we can go much further and get to design pages with a much improved user experience.

For example, we can automatically include a navigation system for messages in all the tickets. This would significantly improve the usability of our website, in a very simple way. You already know how to do it, right? Let's see what it would look like:

1. You create a template with a "Navigation through messages" module in the Divi Library.
2. You see what your ID is.
3. Edit or create the file single.php (or single-slug.php ) of your child theme.
3. You paste this code in the place where you want to place the navigation module, replacing the numbers that are in quotes with the ID of the template:

Thus, the navigation module for the messages would appear in all the entries (if you have edited single.php ) or in the entries of a certain category (if you have edited single-slug ).

As you can see, this system is very simple and very useful at the same time. In my opinion, Divi is the best commercial theme for WordPress that currently exists . If, in addition, we learn a little about how WordPress works, we get a very valuable tool .

I invite you to share in the comments how you use this system so that we can all see examples of templates of Divi Enhanced .

Loading …

May Also Help You: