Secrets of the custom code Script field

Theme > Settings > Custom code > Script

In the theme settings, there is a field for installing your own JS code.
It can be used for various scenarios, for example, to control the launch of modal windows or to connect custom icons.

calling the modal window on the first visit
replace Overlay UIKIT icon

The signature under the field reads: The <script> tag is not needed.
This requirement is not mandatory.
There is one basic rule, you should abandon the script tags or wrap all the code in tags, a mixed version will cause an error. 

all code inside the script tag
all code is installed without the script tag
mixed code


The theme does an analysis of your code, if it starts with the script tag, then your code is placed in the header of the document without changes. If the tag is not found, then your code will be wrapped and executed.

code is placed in the header of the document without changes
the code is placed in the script tags automatically

This simple solution gives you creative freedom and allows you to manipulate any other code you want to put at the Head of the document.

Inject tag to the Head

The life hack is that after the script tag, you can put any other tag or sequence of tags that will get into the document without changes. This gives you even more freedom of action and allows you to quickly and easily connect an FB pixel, a site validation tag, a third-party style, or a script.

important rules

Your code should always start with the script tag, even an empty pair of tags works.
Avoid using comments, they will ruin everything.
Always check the result on the screen and in the browser console.

Isn't it great?

By the way, have you noticed that in some screenshots all the custom code is visible immediately in the window, without the scroll bar?

This is the result of the Page Builder Toolkit plugin. This is a handy tool that makes many things much more convenient when working in the builder.

Want to know more?

Subscribe to my newsletter, if you are interested in what secrets the CSS code field and the theme style customizer keeps, I will send you a link to the announcement of a new publication on this topic.

Subscribe to Our Newsletters

Yootheme Tricks

Newsletter Yootheme tricks

Yootheme news
For developers

Newsletter for developers