help center

Search
Close this search box.
On this page

Add custom code

Last Update: January 14, 2024

The Custom Code feature allows you to add HTML, JavaScript and CSS code snippets to your site. For example, Google Analytics code or Facebook Pixel code. You can add any kind of JavaScript code to tweak the DOM, add events and dynamic features and much more. You can use CSS snippets to add custom styling to any element on the site.

Note
Custom code does not support PHP snippets. You cannot use this feature to add custom hooks or actions. You can use a different approach for PHP, either through functions.php or a third-party plugin.

To add custom code, follow these steps:

  1. Login to WP Admin.
    Add custom code 5
  2. Go to Elementor > Custom Code. The Custom Code page shows.
    Add custom code 2
  3. Click Add New Custom Code. The New Code page shows.
    Add custom code 7
  4. Enter the following:
    • Add title – It helps you identify this code snippet later.
    • Location Determines the section of the webpage where the code will be located. Choose from the following options:
      • <head> –  at the page level
      • <body> – Start –  at beginning of the page’s body
      • <body> – End –  at end of the page’s body
    • Priority – Choose from (1 – 10). If multiple scripts are assigned to the same location, the priority levels determine the order in which they should run.
      Note
      Lower numbers indicate higher priority. So a script with a priority of 1 will have a higher priority than a script with a priority of 5.
    • Enter or paste the code snippet in the code block editor. The built-in code linter checks your code and notifies you of error, if any.
  5. From the Publish block, for Conditions click Edit. The PUBLISH SETTINGS window shows.
    Add custom code 1
  6. Set the desired conditions. For details, see How To Set Display Conditions For Global Templates.
    Add custom code 3
  7. Click Publish. You can also save the custom code as draft or set a later publish date & time.
    Add custom code 6
Note
In addition to scripts, you may also add CSS to your website by wrapping it between the HTML style tag. This allows you to only include the CSS based on the conditions you set. See example below:

Add custom code 4

Code with Elementor AI

You can use Elementor to generate your custom code. See Add Custom Code Using Elementor AI for more details.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!