DocsThe builder

Custom code in pages and elements

Add CSS, JavaScript and head or footer code to one page, template or element — it runs only where that page or element appears.

Most sites never need code: layouts, styles, interactions and loops are all built visually. When you do, code can live with the page or element it belongs to — or, for code that runs across the site, in Code Snippets.

Code for one page or template#

Deselect everything (Esc) so the right panel shows Page settings (or Template settings), then open Custom code. It has four boxes:

CSS — styles for this page only.
JavaScript — runs on this page.
Head — HTML added to the page’s <head>.
Footer — HTML added before </body>.

Code for one element#

Select the element and open Advanced → Custom code (or right-click → Custom CSS…).

CSS is scoped to the element: write selector for the element itself, e.g. selector:hover { … }. It shows live on the canvas.
JavaScript runs on the site once for each copy of the element, with el as the element.

selector {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}
selector:hover .nai-button {
  transform: translateY(-2px);
}

Permissions#

Page and element code needs the Add custom code permission (administrators by default).
JavaScript and head or footer code also need WordPress’s unfiltered HTML capability.