Where to add custom code in Divi (CSS, JavaScript and PHP)?

There are many places where you can add custom code in Divi! This theme makes it easy to do just that. You will see in this article that your child theme is almost useless!

Yes... The native tools of Divi and WordPress allow us to easily add code for customise Divi. This is ideal if you are not a developer but have found a piece of code (a snippet) to copy and paste.

If you read Divi Tips, you must have seen that some articles offer this kind of "snippet to help you customise your site. So let's take a closer look at where to add custom code...

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - The Divi Text Module: CSS and HTML

The Divi Text Module allows you to do many things! You can :

• Writing text (obviously)
• Add titles
• Adding bulleted or numbered lists
• Inserting images
• Inserting shortcodes
• Etc.

It looks like the old WordPress editor (Classic Editor) and offers a tab that allows you to add CSS and HTML. Simply switch the module to "TEXT" mode and you will have access to the HTML version of your text. This is very useful, and even essential!

So, if you have some knowledge of HTML and CSS, you can modify your texts on the fly.

Pour vous donner un exemple, sur la capture d’écran ci-dessus, j’ai rapidement balisé une partie du texte avec des <strong><h2></strong> et ajouté une couleur à quelques mots.

Vous voyez la balise <strong><span></strong> ? À l’intérieur, j’ai ajouté du style (du CSS) : <strong><span style= »color:blue; »></strong><em>Placer un mot ici</em><strong></span></strong>. C’est ce que l’on appelle le <strong>CSS INLINE</strong>. Pour tout vous dire, ce n’est pas recommandé de placer du <strong>CSS Inline</strong> partout car cela peu avoir un impact sur la performance of your site. But sometimes it can help!

This Text module, as you can see, is an easy-to-use "all-terrain" module for adding HTML or CSS!

2 - The "advanced" tab of modules, lines or sections: CSS

Each module, line and section in the Visual Builder has a tab called ADVANCED which contains fields for adding CSS.

But be careful, this CSS will only act for the module, line or section.

Three fields are available for adding CSS:

1. Before: this is the "Pseudo-Element Before".
2. Main element: the CSS you add here will act on the main element.
3. After: this is the "Pseudo-Element After".

Learn more about Pseudo Elements Before and After.

These fields act on very specific CSS CLASSES. I advise you to click on the Question Mark icon to know where your code will act.

Note that in these fields you should only enter the CSS without calling any classes or tags as this will not work. You will then have to use other means, such as those we will discuss in the rest of this article.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

3 - Advanced page parameters: CSS

When you activate the Visual Builder within a page or article, you can add modules, of course, but you can also access advanced settings (see also : the hidden features of the Visual Builder).

To do this, simply open the page settings menu (the purple cross at the bottom of the page) and click on the gear icon.

Go to the ADVANCED tab: you can enter your CSS in the "Customise CSS" field.

This option is ideal if you want to create a CSS rule that only works within this page. This way, you don't load CSS unnecessarily on your entire site.

However, if this rule is redundant and you need to add it on several pages of your site, I recommend the following solution...

4 - The Appearance tab > Customise : CSS

The Appearance > Customise > Additional CSS tab natively allows you to add any CSS rules you need.

Just start entering your CSS in the dedicated field. You can add several rules in a row.

I still advise you to skip a line between each code and even add comments so you don't forget what your code is for 😉

Here is an example:

/* code texte encadré */
.encadre {
	border: solid 1px #7e3bd0;
	padding: 1em;
}

The text placed between /* and */ is a comment not taken into account by web browsers. By commenting on your CSS, you will find your way around more quickly!

5 - Divi theme options: CSS and JavaScript

The Divi theme natively allows you to add CSS and Scripts in the theme options...

5.1 - CSS in Divi Tab > Theme Options > General

At the end of the page of the Divi > Theme Options > GeneralYou will find a field for entering CSS. This field is the same as the one found in the Appearance > Customise > Additional CSS tab (seen in the previous chapter of this article).

So this is another way to add CSS to Divi.

5.2 - JavaScript in Divi Tab > Theme Options > Integration

The tab Divi > Theme Options > Integration offers the possibility to add JavaScript or jQuery code.

Les champs présents dans cet onglet permettent d’ajouter du code dans le <strong><head></strong> et dans le <strong><body></strong> de votre site.

On se sert de cela principalement pour ajouter des balises <strong><script></strong> mais également des balises <strong><link></strong>.

For example:

• This article on the Parallax Mobile shows the usefulness of this field for adding jQuery to the Divi theme.
• This other article on the addition of Google Analytics to Divi shows how to insert the UA code.

Enfin, on peut aussi se servir de la balise <head> pour ajouter des polices personnalisées dans Divi à l’aide d’une balise <strong><link></strong>. Voici à quoi cela ressemblerait :

(to add premium fonts, you will need a child theme)

6 - The Code module: CSS, HTML and JavaScript

Divi's Code module allows you to add CSS, HTML or JavaScript to your layout.

In this case, the code added via this module will only be active within the layout that embeds it.

Note that you can also use this module within your templates created with the Theme Builder. The code will then be active in all templates that use it.

To understand how it works, read this article dedicated to the Divi Code Module.

7 - The child theme : CSS, PHP, HTML, JavaScript

You can use a Child Theme to make customisations within your site. This is the most secure way to avoid losing changes every time the parent theme is updated.

Depending on the changes you need to make, a child theme is essential. This may be the case, for example, if you code a page template from scratch or add files.

The style.css file in any child theme will allow you to add your CSS rules. As for the functions.php file, it allows you to enter PHP.

If you need to add scripts, you can add .js files to your child theme folder and load them via the functions.php file.

To go further:

• Create or obtain a Divi child theme
• See how to add JavaScript or jQuery in a child theme.

8 - Using the Code Snippets extension: PHP, JavaScript, HTML, CSS

In case you only need to add some code snippets to your theme without adding files or folders, in this case the child theme is not really necessary. The Code Snippets extension does the job very well... It's even more practical!

This extension is free of charge and is available directly from your backoffice, in the Extension > Add tab.

To use it, just go to the 'Extracts' tab and click on 'New ': you can enter PHP.

If you need to enter HTML, JS or CSS, this is also possible. By the way, 3 sample code snippets are available to understand how to insert these language types.

Finally, I find that this extension offers some significant advantages:

• You do not need to go through FTP to add or remove code.
• You can enable and disable each code snippet. This is very useful if you encounter conflicts in the future.
• If the code you enter is not correct, your site will not "break". A message will appear explaining the error.
• You can name each extract to make it easier to find.
• You can prioritise the order in which you want to work.

9 - Custom code in Divi: summary table

You've just seen the overview of where you can add custom code in Divi. You're spoilt for choice!

It will then be necessary to choose "strategically": should the code be active on the entire site or should it only work on one page? Is this code recurrent? And so on...

So depending on your needs, there is always a solution!

Here is a summary table:

	HTML	CSS	JavaScript	PHP
Text Module	x	x
Divi Modules Advanced Tab		x
Page settings		x
Via the Appearance menu		x
Theme options		x	x
Divi Code Module	x	x	x
Children's theme	x	x	x	x
Code Snippet Extension	x	x	x	x

To go further, here are some links:

• CSS for beginners
• The article "Technical requirements for developing in WordPress of Captain WP
• A list of tutorials to learn PHP .