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

Many places where you can add custom code in Divi Hey! This theme facilitates this task. You will see in this article that your theme child is almost useless !

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

If you read Astuces Diviyou must have seen that some articles proposed this kind of "Snippet" to help you customize your site. So let's take a closer look. where to add custom code...

1 - The Divi Text module: CSS and HTML

The Divi Text module allows to do a lot of things! You can:

• Write text (of course)
• Add Titles
• Add lists with chips or numbers
• Insert Images
• Insert shortcodes
• Etc.

It looks like the old WordPress editor (Classic Editor) and offers a tab that you allows to add CSS and HTML. All you have to do is switch module to "TEXT" mode and you access the HTML version of your text. It's very practical, even indispensable!

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

To give you an example, on the screenshot above, I quickly marked part of the text with <h2> and added a color to a few words.

You see the beacon <span> ? Inside, I added style (of the CSS): <span style="color:blue;">Placer un mot ici</span>. This is called the CSS INLINE. To tell you everything, it is not recommended to place CSS Inline everywhere because this may have an impact on the performance of your site. But sometimes it can help!

This Text module, you understand, is an easy-to-use off-road module to add HTML or CSS!

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

Each Visual Builder module, line and section has a tab named ADVANCED which contains fields to add CSS.

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

Three fields are available to add CSS:

1. Before: This is the "Pseudo-Element Before"
2. Main Element: the CSS you add here will affect 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 Questioning point to know where your code will work.

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

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

3 - Advanced settings of the page: CSS

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

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

See you at ADVANCED tab : you can enter your CSS in the field Personalize CSS.

This option is ideal if you want create a CSS rule that only acts within this page. Thus, you do not unnecessarily load CSS on your entire site.

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

4 - Appearance > Customize: CSS

The tab Appearance > Customize > Additional CSS natively adds all the CSS rules you need.

Just start to enter your CSS in the dedicated field. You can add several rules afterwards.

I suggest you skip a line between each code and even add comments to remember what your code is for. 😉

Here is an example:

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

The text between /* and */ is a comment not taken into account by web browsers. By commenting on your CSS, you will find it faster!

5 - Divi theme options: CSS and JavaScript

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

5.1. - The CSS in Tab Divi > Theme Options > General

At the end of the tab Divi > Theme Options > General, you will find a field to enter CSS. This field is the same as the one on the tab Appearance > Customize > Additional CSS (see previous chapter of this article).

So that's another way. add CSS in Divi.

5.2. - JavaScript in Tab Divi > Theme Options > Integration

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

The fields in this tab allow to add code in the <head> and in <body> Your site.

This is mainly used to add tags <script> Note that you can also use this module within your templates created with the Theme Builder. The code will then be active in all the models that use it. <link>.

Divi Code Module

• You can use a Child theme shows the usefulness of this field for Depending on the changes you need to make, a child theme is essential. This may be the case, for example, if you fully code a page template or add files..
• Add custom code to Divi via a child theme the addition of Google Analytics in Divi content in any child theme will allow you

Finally, we can also use the beacon <head> to add custom fonts in Divi using a tag <link>. The file

 <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet"> 

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

6 - The Code module: CSS, HTML and JavaScript

The Divi Code module allows add CSS, HTML or JavaScript If you need to add scripts, you can add files

In this case, the code added via this module will only be active within the layout that loads 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 models that use it.

child theme Divi See how to add.

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

JavaScript or jQuery in a child theme In case you have to make customizations within your site. This is the most secure way not to lose changes to each parent theme update.

In this case, the child theme is not really indispensable.

does the job very well... It's even more convenient! style.css Add custom code to Divi with Snippet Code extension add your CSS rules. Quant au fichier functions.php, il permet de saisir du PHP.

If you need to add scripts, you can add files .js dans le dossier de votre thème enfant et les charger via le fichier functions.php.

To go further:

• Créer ou obtenir un Divi child theme
• Voir comment ajouter du JavaScript ou du jQuery dans un thème enfant.

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

Dans le cas où vous avez need to add only a few extracts of code to your theme without adding files or foldersIn this case, the child theme is not really indispensable. The Snippets Code extension does the job very well... It's even more convenient!

This extension is free and is available directly from your backoffice, on the tab JavaScript.

To use it, just go to the "Extracts" tab and click on "New" Child theme saisir du PHP.

If you need to enter HTML, JS or CSS, it is also possible. In fact, 3 examples of code extracts are available to understand how to insert these types of language.

To go further, here are some links:

• You do not need to go through the FTP to add or delete code.
• You can turn on and off every snippet of code. It is very useful if you encounter conflicts in the future.
• If the code you enter is not correct, your site will not "crack". A message will appear to explain where the error came from.
• by Captain WP
• A list of

9 - Custom code in Divi: summary table

tutorials to learn PHP add custom code in Divi. You have the embarrassment of choice!

You will then have to choose "strategically": should the code be active throughout the site or should it only work on a page? Is this code recurring? Yeah.

9 Main element

Advanced Code Page Divi

	HTML	CSS	Appearance Customize CSS	Option Theme Divi CSS
Text module	x	x
Option Theme Divi JavaScript		x
Page Settings		x
Divi Code Module		x
Theme Enfant Divi - addition of Code		x	x
See how to add	x	x	x
Snippet Extension Code	x	x	x	x
Add Custom Code in Divi	x	x	x	x

Custom Code Divi Theme

• Divi Tips » Where to add custom code in Divi (CSS, JavaScript and PHP)? Comment flow
• Article "Technical prerequisites to develop under WordPress" de Capitaine WP
• Une liste de tutoriels pour apprendre le PHP .