Lifetime updates on every purchase Support replies within 24 hours Secure checkout via Gumroad 8,500+ sales since 2016
Shop themes

Adding custom CSS and JavaScript

Updated 2 views

Most design tweaks — a color, a font size, a spacing — need just a few lines of CSS. You don’t need to edit theme files for that.

Find the right selector

Browser developer tools show which CSS rules style any element and let you try changes live. Right-click the element and choose Inspect (Chrome, Firefox, Edge), or in Safari enable Settings → Advanced → Show Develop menu first.

  1. Right-click the element and choose Inspect.
  2. The HTML appears on the left, the CSS rules of the selected element on the right.
  3. Change values to preview the result — the page updates as you type.
  4. To add a new rule, click + in the styles panel. If the generated selector isn’t specific enough, prepend classes of the parent elements (. before a class, # before an ID).

Save the CSS

Paste the final code into Appearance → Customize → Additional CSS and click Publish.

Custom JavaScript

Use a plugin such as Header and Footer Scripts:

  1. Go to Settings → Header and Footer Scripts.
  2. Paste the code into the header (inside <head>) or the footer (before </body>).
  3. Click Save settings.

For a larger script, upload it as a .js file to the child theme and connect it in the footer:

<script src="https://example.com/wp-content/themes/your-theme-child/js/custom.js"></script>
Was this article helpful?

Related articles