• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • WordPress Hosting
    • WooCommerce Hosting
    • Enterprise Hosting
  • VPS
    • VPS Hosting
    • Flex VPS
  • Reseller
  • Email
  • Gaming
  • Domains
  • Website Builder
  • Account
  • Blog Home
  • Categories
  • Authors

How To Add Javascript To A WordPress Post With Gutenberg

Bhagwad Park

Published on: July 15, 2019

Categories: WordPress 2

WordPress’s origins as a content management system, have often clashed with its recent metamorphosis into a site builder. One of these conflicts was the awkward way of inserting code into the editor. Because it started out as a way of adding pure content via the WYSIWYG editor, it was considered unnecessary for HTML or Javascript code to be added as well.

Later on, they added the “Code” or “Text” tab to allow people to insert arbitrary code, but this had two problems:

  1. The code would often get badly mangled when you
    switched between views
  2. The code would be invisible in WYSIWYG mode
    because of the visual editor

The second problem was particularly pronounced when inserting stuff like JSON structured data, because there was no way of telling that the code was added!

Previously, the solution to add code like Javascript to WordPress took the form of plugins or themes. For example, the Genesis framework allowed users to insert arbitrary body code using something like this:

Inserting JavaScript before Gutenberg

This allowed us to insert header or body scripts into posts on a page by page basis. But of course, this too is flawed because you don’t have control over precisely where in the document the code goes – only some general options. Not to mention that all your customizations and code would vanish if you were to change your plugins and themes. Suffice to say, that none of this was satisfactory.

However, with WordPress 5.0 and Gutenberg, all that has changed. The WordPress developers finally decided to bring the editor in line with what WordPress has become – not just a WYSIWYG editor, but a page builder. And because of that, we now have Gutenberg blocks that allow us to easily do what used to be hard.

Adding Javascript Code with Gutenberg

I initially disliked Gutenberg because I found it too distracting as a pure editor. As a writer, I might still feel that way, but as a site owner, I’ve started to see the value of “blocks”. I realize that my articles are not pure text, but consist of chunks of various types of content.

So with Gutenberg, if I want to insert a chunk of JSON code, or some Javascript, I just need to use the “Custom HTML” block as shown here:

Using the custom HTML block with Gutenberg

Since I found this workflow, I’ve started using this block everywhere. For JSON structured data, for table HTML markup, for Javascript, and for some other more complex HTML code.

Security Issues with JavaScript

One thing to keep in mind, is that only users with the “unfiltered_html” permission will be allowed to insert and save JavaScript code. The reason is that JavaScript can be extremely dangerous, if inserted into a website maliciously. As a result, make sure that you only assign the “unfiltered_html” permission to people you trust.

One way to easily assign the permission to specific people without too much trouble, is to use the Capability Manager Enhanced plugin. With a series of checkboxes, you can easily assign specific permissions to people, to craft the exact policies that you need. It’s a useful plugin, and one that’s invaluable if you have a lot of writers, and need to allow them to save JavaScript code in their posts.

Bottom Line

Gutenberg has made it a lot easier to insert custom HTML code into specific posts and pages – including JavaScript. It now replaces a bunch of earlier, unsatisfactory solutions, in favor of a generalized approach that’s far more scalable and easy to maintain.

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Related Posts

How to Enable WordPress Maintenance Mode (In 3 Steps)

In this post, we'll discuss when it makes sense to put your WordPress site in maintenance mode. Then, we'll show you two ways to do it.

How to Clear the Cache in WordPress (3 Ways)

In this beginner friendly post, we'll take a closer look at caching and discuss when and how to clear your WordPress cache.

What Is A Permalink In WordPress?

In this post, we’ll first discuss why permalinks matter. Then, we’ll show you how to create a custom permalink structure.

What Is The WordPress .htaccess File?

In this post, we'll take a closer look at the .htaccess file. Then, we'll show you how to locate and edit the file.

Reader Interactions

Comments

  1. tomas says

    July 24, 2020 at 11:53 am

    I’ve learned to like Gutenberg.
    But today, I need to insert some script code into the HEAD.
    I haven’t figured out how to do that yet.
    Can you provide some help?

    Reply
    • Bhagwad Park says

      July 27, 2020 at 2:57 am

      You can use this guide we wrote earlier: https://www.namehero.com/knowledgebase/149/How-To-Add-Google-Analytics-To-WordPress.html

      While it’s for Google Analytics scripts, it should be applicable everywhere.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!


Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2024)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • Flex VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Email Hosting
  • Game Hosting
  • Domains
  • Website Builder
Help & Support
  • NameHero Blog
  • NameHero Gaming Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Gaming Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2025 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA