Adding JavaScript to WordPress pages and posts

JavaScript improves WordPress pages and posts’ functionality. If you need to show third-party services on WordPress pages and posts, you will need to embed JavaScript (hereafter “JS”) for the said purpose.

By default, WordPress doesn’t allow entering JS code in pages and posts. For the purpose, you can make use of the WordPress plugins and widgets.

As WordPress plugins help you increase your site’s functionality, you can confidently install a plugin for entering JS into pages and posts.

Why add JavaScript into WordPress pages and posts?

  1. As JavaScript is a client-side scripting language, the WordPress pages can serve features with ease, speed, and accuracy. By client-scripting language, we mean the execution of JS code in the browser. On the other hand, the code or script that runs on the server costs time and resources.
  2. Implementing JS on WordPress is easy. To get started, all you need is the code and a WordPress plugin.
  3. JS provides extended functionality. With third-party scripts like Game Monkey, you can write and use JS codes to improve a page’s functionality and security.
  4. Using JS extends your WordPress theme’s features. As WordPress templates contain source code files, such as HTML, CSS, and JavaScript, the use of JS provides a competitive advantage.

The process of adding JS to WordPress pages and posts consists of installing a WordPress plugin. Once completed, the process leads to creating JS code snippets in the plugin, and add them to WordPress pages and posts. Each code snippet is referred by its shortcode, that you can insert into WordPress content.

How to add JavaScript to WordPress pages and posts?

Let’s proceed to the WordPress Plugins Directory and install the Code Embed plugin for adding JS to WordPress content.

You can download the WordPress plugin file and upload to your site. Alternatively, use the Add New Plugin feature in the WordPress dashboard. You can see the said option in the Plugins menu. For more information on installing a WordPress plugin, head over to this tutorial.

STEP 1: Install the required plugin

To add JS to WordPress pages and posts, you need to install the Code Embed plugin. Click on the Add New option in the Plugins menu. Don’t forget to activate the plugin after installation.

STEP 2: Turn the option ON in the Dashboard

Upon activation, you’re good to go for editing the page or post. Once you land on the edit page, click on the Screen Options and check the Custom Fields option.

STEP 3: Create new JavaScript code entry

After you check the Custom Fields, you can see the respective section under the post editor window. Proceed and click on the ‘Enter new’ link to show new entry fields for the JavaScript. Enter a name for the JS code snippet, with prefix CODE, CODEmyJavaScript for example. Similarly, paste in the JS code into the value field. Click on the Add Custom Field button at the end.

STEP 4: Edit the page or post, insert the shortcode

After you create a new field, you can add the field name (CODEmyJavaScript) anywhere in the content. Don’t forget to save content with the changes.

You created a JavaScript code value successfully and added its shortcode in the content. To see whether you’ve inserted the JS successfully, use the Inspect Tool for checking JS code on the page. Similarly, you can create more fields, include their shortcodes into pages, and make a difference with the JS code snippets.

Wrapping up

The process of adding JavaScript is daunting without using a plugin. Fortunately, the Code Embed plugin for the said purpose plays well.

The plugin helps you create new JS fields which you can use later in the pages and posts. You’ll need to enter a name for the JS field, along with the value field containing the JS code. After you fill in the fields, you can use the field’s name in the content. When giving a name to the new JS field, don’t forget to enter the prefix CODE. An example of the name field is CODEJavaScript.

For more information on adding JS code to WordPress pages and posts, this tutorial helps you learn advanced routines. Also, don’t forget to join the discussion in the comments.

Also, read more about JavaScript relation with WordPress.

More on wpcrib

1 comment

  1. Screen Options and check the Custom Fields

    This crap is missing.

Add comment

Join discussion and make an impact. Your email address will not be published.

GDPR is going into effect on May 25, 2018. Learn more in our new GDPR section. You can also view changes to our Privacy Policy.
We use cookies to provide a personalised experience for our users.