How To Insert Code And Scripts Into WordPress Posts And Pages

Learn how to add code and scripts to content in your WordPress posts and pages …

How To Insert Code And Scripts Into WordPress Posts And Pages

JavaScript SnippetIn this tutorial, you will learn how to easily insert scripts and code into your post and page content using various methods.

Note: The examples in this tutorial use the WordPress Classic Editor, but you can use the same methods described below using the WordPress Block Editor.

Why Do I Need To Know This?

You might be thinking “I don’t want to learn how to code. I’m not interested in coding. My web developer looks after this.”

This tutorial is not about coding websites, editing web site files, or writing software applications. It’s about learning how to add useful scripts and snippets of code that you may want to add to your site or insert into the content in your posts or pages, like:

  • Showing an automatic expiry date, countdown, or scarcity offer (e.g. “This special offer expires in 01h:59m:36s”).
  • Adding a table of contents or displaying an advertising banner below the main heading, or before/after the first/second/third/etc. paragraph.
  • Embedding a lead capture form into a post or page.
  • Displaying contextual ads in your content (e.g. Google AdSense).
  • Adding conversion tracking scripts (e.g. Google Analytics, Facebook Ad pixels)
  • Etc.
Example of code snippet for inserting an Aweber subscription form.
Learn how to add useful scripts to your content like a subscriber form and improve your results.

Knowing how to insert simple scripts and code snippets into your WordPress site is a useful and time-saving skill.

Many applications let you control things from an external dashboard. All you need to do is add the snippet of code they provide to your website where you want this functionality to display. Then, if you need to make any changes, instead of editing one, dozens, or even hundreds of posts or pages where you’ve added that code, you can simply make the changes in your application’s dashboard and every instance of that functionality will automatically update on your site.

Adding code to content in WordPress, however, can be a little bit tricky, especially if you’re a non-techie. This tutorial will show you exactly how to do it.

Let’s get started…

How To Insert Simple Code Snippets Into Your Posts And Pages Using The Text Editor

Important

Note: Always back up your site files and WordPress database before adding any scripts or editing code on your site. 

If you don’t want to perform your own backups, then consider using a backup plugin or professional site maintenance services.

You can’t paste code or scripts (e.g. HTML, Javascript) into your content using the WordPress visual editor.

Do not paste code directly into your content.
Do not paste code directly into your content.

You can, however, add simple code to your content using the WordPress text editor.

To add your code to a post or page, do the following:

1. Find or create the code you would like to add to your content. There are free online HTML editors you can use to generate code (search online using keywords like Free HTML Code Editor, Free HTML code generator, etc.). Most of these online editors have a WYSIWYG (What You See Is What You Get) interface that will let you create your code elements visually.

Here are some sites you can use:

HTML content created with an online HTML code generator.
Use a free online HTML editor to create HTML code for your content. Source: HTML-Online.com

2. After creating your HTML element, switch the editor to code view, then select all the code that you have created or sourced and copy it to your clipboard.

HTML code being copied to the clipboard.
Select and copy the code to your clipboard.

3. Open the post or page where you would like to add the code to your content. In the Visual Editor tab, find the exact location where you would like the code to display and insert a new line into your text. Add a string of placeholder characters (e.g. @@@@@) to mark the spot where you will add your code.

Post with placeholder text inserted into content.
Add placeholder text to mark the spot where you would like to display the code in your code.

4. Next, select the placeholder text (1) and switch from the Visual to the Text tab (2).

Post with placeholder text and Text tab selected.
Highlight your placeholder text and select the Text editor.

5. Your placeholder text should automatically be highlighted in the text area. If not, find the placeholder text you’ve added to mark the spot, then select and highlight the entire line.

Text editor displaying placeholder text.
Text editor displaying placeholder text.

6. Paste the code over the highlighted text, replacing it with the contents of your clipboard.

HTML code pasted from clipboard into Text editor.
Paste your HTML code over the placeholder text.

7. Save, publish or republish your post or page, then preview (and test) your code.

Post preview with HTML code inserted into the content.
Preview your post.

If you need help understanding basic HTML formatting tags, see this tutorial: A Guide To HTML Formatting In WordPress

Important

While the above method can be used to add simple HTML code to your posts and pages, this is not the method we recommend using to paste more complex scripts directly into your content (e.g. scripts containing JavaScript code for newsletter opt-in forms).

Post with subscriber form added.
Don’t use the Text editor to add scripts…use other methods instead!

Pasting scripts with JavaScript code directly into your content via the WordPress text editor doesn’t work. It can also lead to errors.

In WordPress, you can add many useful scripts and snippets of code to your posts and pages using plugins that let you “call” (i.e. automatically process) the script by typing or pasting a ‘shortcode’ into your content.

What Is A Shortcode?

A ‘shortcode’ is a code shortcut — a short and simple bit of code that you add to your posts, pages, widgets, etc. Whenever WordPress comes across a shortcode, it processes or runs the script via the plugin.

A shortcode typically looks like little strings of text wrapped in square brackets, e.g. [ezformshortcode].

Shortcode format
Shortcode format

How Shortcodes Work

Shortcodes allow you to add complex scripts like forms, image galleries, content formatting tools, etc. into your content without coding or programming skills.

Composite image showing how shortcodes work.
How shortcodes work in WordPress.

The images above show how shortcodes work in WordPress:

[1] First, install a plugin that lets you paste code snippets into a special field or area (see the tutorial below for an example).

[2] The plugin generates a unique piece of text (the shortcode) that will trigger and process the script.

[3]  Next, copy the shortcode to your clipboard and paste it into any post, page, or widget where you would like the script to run.

[4] WordPress will automatically load and process the function called by the shortcode every time someone visits the page containing the embedded shortcode.

The great thing about using shortcodes is that you don’t have to mess with the actual code to get the functionality you want…just add the shortcode to your content and WordPress does the rest!

Embed Code Snippets And Scripts Into Your Content Using Plugins

Let’s show you how to use a plugin to add code to your content. There are several free WordPress plugins you can use to do this. We’ll walk you through the process using one of these plugins, then look at different plugins you can use.

Insert HTML Snippet

Insert HTML Snippet
Insert HTML Snippet

As the name of this plugin suggests, Insert HTML Snippet lets you embed HTML (and other types of code, e.g. CSS, JavaScript, etc.) into posts, pages, sidebar widgets, etc. You can create and store unlimited HTML snippets and then add these to your site using shortcodes or custom fields.

HTML snippets can store scripts for just about everything: video and audio player embed codes, forms, calculators, custom tracking codes, etc.

Tip

Important: Make sure you have your code or script available and saved somewhere (e.g. a plain text file).

Code selected and copied to clipboard.
Select and copy the code to your clipboard.
How To Install The Plugin

Let’s install the plugin and then use it to add a newsletter signup form to a page.

First, log into your WordPress site, then go to Plugins > Add New and search for keywords like Insert HTML, Insert HTML Code, Insert HTML Snippets, etc.

Add Plugins - Installing the Insert Html Snippet plugin
Install the Insert Html Snippet plugin in the Add Plugins screen.

Next, activate the plugin.

Activate the Insert Html Snippet plugin
Activate the Insert Html Snippet plugin

After installing and activating the plugin, you will see a new menu item on your menu, called XYZ Html.

XYZ Html plugin menu.
New menu for XYZ Html plugin.
How To Use The Plugin

To create a new code snippet, click on XYZ Html > HTML Snippets.

XYZ Html - HTML Snippets menu
Click HTML Snippets menu item to create a new snippet or view all saved code snippets.

The ‘HTML Snippets’ screen loads in your browser.

Click on Add New HTML Snippet.

HTML Snippets screen.
Click on ‘Add New HTML Snippet’ button to create a new snippet

Give your snippet a title (this is for your own reference only) in the Add HTML Snippet > Tracking Name field, then paste your code into the HTML code area, and click on the Create button.

Creating a new snippet.
How to create a new snippet.

This creates, saves, and publishes your new snippet as a shortcode. Copy, paste and use this shortcode to insert your script into your posts and pages.

HTML Snippets shortcode.
Use the snippet shortcode to insert scripts into your content.

Tip

You can create a shortcode without a script. This is useful if you are planning to publish content that will include a script but you are still waiting for a third-party service (e.g. an affiliate program) to approve your account before giving you access to the script’s code.

If this happens, just go ahead and create your snippet with some placeholder content, create your post or page content, and insert the shortcode into the content where your script will appear. You can edit your snippet and add the script code later without having to edit your post or page.

Creating a code snippet using temporary placeholder text instead of the script code.
You can create a shortcode using temporary placeholder text before obtaining the script code and add the code later.

To view all of your snippets and shortcodes, select XYZ Html > HTML Snippets from the main admin menu.

XYZ Html - HTML Snippets menu.
Select XYZ Html – HTML Snippets to view a list of all your snippets and shortcodes.

A table of all the snippets and shortcodes you have created will display in the ‘HTML Snippets’ screen.

HTML Snippets screen - Snippets and shortcodes list.
HTML Snippets displays a list of all your snippets and shortcodes.

Notes:

  • You can use the shortcodes from this table to insert scripts into multiple posts and pages and control everything from the HTML Snippets plugin screen.
  • If you edit the code inside a snippet then update the snippet, the script will automatically update in your content wherever the shortcode has been used throughout your site.
  • You can insert shortcodes into posts (including custom post types like eCommerce product pages), pages, widgets, etc.
How To Add A Shortcode To Your Content

You can add a shortcode to your posts and pages with the HTML Snippets plugin either by:

  1. Copying and pasting the shortcode directly into your content (note: if using the WordPress Block Editor, paste the shortcode using the shortcode block)
  2. Selecting the shortcode from the HTML Snippets menu toolbar button  (Classic Editor)
  3. Additionally, you can insert your scripts via shortcodes into your site’s header, footer, or sidebar areas using the HTML Snippets widget.

Let’s go through these methods…

Copying and pasting the shortcode directly into your content

To paste the shortcode directly into your content:

  1. Copy the shortcode from the HTML Snippets table to your clipboard,
  2. Create or edit a post or page,
  3. Create a new blank line in the text where you would like to insert your code,
  4. Place your cursor inside this line, and
  5. Paste in the shortcode from your clipboard.
Shortcode pasted into content.
You can paste shortcodes directly into your content.
Selecting the shortcode from the HTML Snippets menu toolbar

Alternatively, if you are in the middle of writing or editing your post or page, do the following:

  1. Create a new blank line in the text where you would like to insert your code,
  2. Place your cursor inside this line, and
  3. Select the shortcode from a dropdown list by clicking the HTML Snippets menu toolbar button.
HTML Snippets menu toolbar button
Add a shortcode to your content using the HTML Snippets button.

After adding the shortcode, publish your post or page, preview your content, and test your script to make sure that everything is working correctly.

Script added to content via a shortcode.
A script added to content via a shortcode.
Add a shortcode using the HTML Snippets widget

In addition to adding shortcodes to content in your posts and pages, you can insert shortcodes into different sections of your site (e.g. your sidebar, header, or footer) using the HTML Snippets widget.

HTML Snippets widget
Add shortcodes to different sections of your site using the HTML Snippets widget.

To learn more about using widgets, see this tutorial: WordPress Widgets Explained

Additional Plugin Information

As noted earlier, if you change the script in the original application or in the plugin’s snippet, your shortcode will automatically update the script code wherever it has been inserted throughout your site.

Updated script code shown in content.
Your script should automatically update in your content when changes are made to the script code – no need to edit your post or page.

Information

As well as creating and adding new snippets using the HTML Snippets plugin, you can also deactivate, edit, or delete snippets.

Additional HTML Snippets plugin functions.
Additional HTML Snippets plugin functions.

Notes:

If you decide that you no longer want the script to display in your content, you have a few options.

  1. You can delete the shortcode from your content (note: finding and deleting all instances of the shortcode can be a cumbersome task, especially if you have added the shortcode to many posts or pages on your site).
  2. You can deactivate or delete the snippet.
  3. You can deactivate or delete the plugin.
Inactive snippet
Make snippets inactive if you no longer want to display their code on your site.

If you deactivate or delete a snippet but leave the HTML Snippets plugin installed and active on your site, the shortcode will not display in your content.

The plugin will automatically remove the line from your content containing the shortcode so that visitors will not detect or notice any gaps in your content.

Snippet deactivated with shortcode automatically hidden in the content.
If you deactivate the snippet, the plugin automatically hides the shortcode in your content.

If you deactivate or uninstall the HTML Snippets plugin, however, the shortcode will display in your content and will need to be manually removed.

Plugin deactivated with shortcode displaying in the content.
If you deactivate the HTML Snippets plugin, the shortcode will display in your content.

For more details about this plugin, go here: Insert HTML Snippet

Additional Ways To Insert Code Into WordPress Content

Use WordPress Themes With Drag And Drop Code Page Builders

Some WordPress themes use drag and drop page-building plugins like Visual Composer or Thrive Architect that let you add raw HTML and JavaScript code to your pages.

Page builders with add code buttons.
Some WordPress themes offer built-in code insertion features.

Add Code To The Header Section Of WordPress

A plugin like HTML Snippets lets you easily add scripts to content in your posts and pages.

Some applications (e.g. analytics and ad conversion tracking tools), however, require adding code to sections like page headers or footers in product download pages, opt-in pages, landing pages, etc.

Example of code that needs to be inserted into a page header.
Some scripts require adding code to page headers or footers in order to work.

If you need to add code or scripts outside of content areas, then you will need to either customize your theme files or use a plugin that allows you to add code to the header or footer section of your posts and pages.

Important

The information below is for advanced WordPress users.

CSS & JavaScript Toolbox

CSS & JavaScript Toolbox (CJT)
CSS & JavaScript Toolbox (CJT)

CSS & JavaScript Toolbox (CJT) is a powerful and flexible plugin that lets you add code elements to your WordPress installation using a reasonably easy-to-use web interface.

This plugin allows you to extend your site’s functionality and its appearance by adding custom code blocks that you can assign to individual posts, pages, custom posts, categories, URLs, expressions, and more.

To view the plugin’s comprehensive documentation and user manual, go here: CSS & JavaScript Toolbox

Note: After activating the plugin, you will be asked to go through a custom installation process to create the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button and the plugin will take care of the rest.

CSS JavaScript Toolbox installation procedure.
First-time plugin use requires installing database tables.

After installing and activating the plugin, a new menu item will appear on the main menu.

CSS & JavaScript Toolbox plugin menu.
CSS & JavaScript Toolbox plugin menu.

Click on CSS & JavaScript Toolbox on the menu.

CSS & JavaScript Toolbox menu
CSS & JavaScript Toolbox menu

This brings up the CSS & JavaScript Toolbox screen.

Click on New Code Block to add new code to your site.

CSS & JavaScript Toolbox - New Code Block button
CSS & JavaScript Toolbox – New Code Block button

In the ‘Create New Code Block’ window, give your new code block a name, select the activate checkbox (or leave it unchecked if you don’t want to activate the code block yet, select a Location Hook (this specifies where to insert your code block. Options=Header/Footer), and choose the Initial Block Position (i.e. whether the script should be added before or after all other code in the header or footer. Options=First Block/Last Block).

After selecting your options, click Create.

Create New Code Block
Create New Code Block

A blank text area will appear. Paste your code or script into this area.

CJT content area.
Paste your code into the CJT content area.

Next, select where you would like to insert your code block. You can add the code to your entire website or into specific areas of your website (e.g. pages, posts, archive pages, categories, etc.)

CJT code block locations
Select where you would like your code block to appear.

The plugin’s dashboard has a number of buttons you can click to access different functions and links to online help documentation for tutorials on how to use the plugin. Hovering over these buttons brings up tooltips with descriptions of all their functions.

CJT toolbar menu.
Access plugin functions and documentation via the CJT toolbar menu.

When you are done creating or editing a code block click Save All Changes to update your settings.

CJT - Save All Changes buttons.
Remember to save your settings.

Click on the CJT Block Info button to view and copy the shortcode to your clipboard.

CJT Block Info.
View and copy your shortcode.

To learn more about this plugin, visit the plugin’s documentation section here: CSS & JavaScript Toolbox

Tip

Tip: How To Check If Your Code Has Been Added Correctly

Some scripts are meant to be visible on your site and some are not.  Analytics or conversion tracking code, for example, is usually placed in sections like the header or footer of your site and is not meant to be visible.

You can verify that you have added scripts or code correctly by checking the source code of your page using your web browser.

If you use Google Chrome as your web browser, for example, you can view the source code of web pages by right-clicking on the page and selecting View page source from the menu or using a keyboard shortcut (e.g. Ctrl + U if using Windows, or Command + Option + U if using Mac).

If you use another web browser (e.g. Firefox), you can do the same thing by right-clicking on the page, or select Tools > Web Developer > Page Source from the browser’s menu.

Composite image of view page source function in Google Chrome and Firefox browsers.
View page source using your web browser.

A new window will open in your browser and display the source code for that page.

Scroll or use the search function (e.g. Ctrl+F in Windows) to locate the code. If you have added a script to your site’s header section, it will typically be found between the <head> and </head> tags.

View page source.
Check your code or scripts by viewing the source code on your web pages.

If you can see the code in page source view, then all that’s left to do is test your script and make sure that everything is working correctly. If you experience any errors, make sure that you have entered the correct code in the right location.

Congratulations! Now you know how to insert code and scripts into your content.

Important

Remember to always back up your files before adding, changing, or deleting code on your site.

JavaScript Snippet
Learn how to insert code snippets into your posts and pages in WordPress.

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as How To Insert Code And Scripts Into WordPress Posts And Pages.