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.

Inserting Code Into WordPressOne of the main advantages of using WordPress is that you don’t need to mess with code to run a successful website.

You could come across occasional situations, however, where you may like to add code to content in order to add a new feature to your site. Typical snippets of code you may want to add to your site include:

  • Showing the current date and time on a time sensitive offer page
  • Adding a search box
  • An opt-in form
  • Display relevant advertising banners
  • Tracking scripts (e.g. Facebook Ads)
  • etc.

Adding scripts to pages can expand your site's functionality

(Adding code to pages can give you additional functionality)

Useful Information

In this tutorial, you are going to learn how to easily add scripts to your WordPress content.

How To Add Simple HTML Code To Your Posts And Pages Using The Text Editor

Disclaimer

Note: Remember to backup your site before adding any code or scripts to WordPress. If you don’t want to back up your site manually, then consider getting assistance from a WordPress professional, or use a backup plugin.

Learn about a great WordPress backup plugin that can fully automate your site backups here:

Useful Info

With WordPress, you can’t add code snippets and scripts directly into the visual editor …

Do not insert scripts inside your visual editor

(Do not add code inside the WordPress visual editor)

You can, however, add simple code to WordPress via the text editor. To insert code into a post or page, do the following:

First, locate or create the HTML code you plan to add to your content. You can use a free online HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or use HTML code templates

You can use an HTML editor or HTML templates to create your code

(You can use an online HTML editor or HTML templates to create your code. Source: HTML-Online.com)

Select all of the code that you want added to your page or post and copy it to your clipboard …

Copy all of the code to your clipboard

(Copy your code to the clipboard)

Next, open your post or page and in the Visual Editor, add placeholder text to mark the spot where you would like your code to appear …

Add placeholder text to mark the location where you want your script to appear in your content

(Add placeholder symbols to mark the location where you want your code to appear in your content)

Switch to the Text editor …

Switch to the Text editor to paste code

(Switch to the Text editor to paste code)

Locate the placeholder and highlight the line …

Select and highlight the line containing your placeholder

(Select and highlight your placeholder)

Paste the code into your content …

Paste your HTML code over the selected text

(Paste the code over the highlighted text)

Remember to publish your page or post and preview …

Preview and test any code you add to content

(Preview and test any code you add to your pages)

We have created a detailed tutorial on using basic HTML here:

Important

While the above can be used to add simple HTML code to content, we do not recommend pasting scripts containing Javascript code directly into your content (e.g. newsletter forms, etc.) …

Avoid using the WordPress text editor to add Javascript code

(Avoid using the WordPress text editor to add complex code … use other methods instead!)

If you paste code containing Javascript directly into the text editor you could experience errors.

A smarter way to add scripts to posts and pages is to enter the script into a plugin that ”calls” the script from ’shortcodes’ placed in your content.

Shortcodes

A ‘shortcode’ is a code shortcut. It allows you to trigger complex scripts without coding or programming knowledge. Shortcodes can typically be used in posts, pages, and widgets to trigger complex scripts into action.

Shortcodes look like strings of text enclosed in square brackets, e.g. ‘[ezformshortcode]’ …

What a WordPress shortcode looks like

(WP shortcode)

Shortcodes allow plugin developers to create complex scripts such as content formatting tools, image galleries, user forms, etc., which you then add to your content via a simple text string.

How Shortcodes Work

How a WordPress shortcode works

(How shortcodes work)

The screenshot above explains how to use a shortcode:

[1] You install a plugin that lets you paste snippets of code into a special field (we’ll show you an example of this in the tutorial below)

[2] After pasting the code into the code area and saving, the plugin creates a unique shortcut that will process the script.

[3] After adding your shortcode to the content, publish or update your page or post.

[4] The plugin will now automatically process the function wherever the shortcode has been added.

The great thing about using shortcodes is that you don’t have to mess around with the actual code to get the functionality you want … simply add the shortcode where you would like the code to appear and WordPress does the rest!

Inserting Snippets Of Code Into Your Content Using Plugins

In the tutorials below, you will learn how to insert code into your posts, widgets, and pages using free WordPress plugins.

Insert HTML Snippet

Insert HTML Snippet Plugin For WordPress

(Insert Html Snippet WordPress Plugin)

As the name suggests, this plugin lets you easily add HTML code snippets into posts, pages or sidebar widgets.

Essentially, how this plugin works is that it allows you to create separate HTML snippets and add them to your posts and pages using shortcodes or custom fields.

HTML snippets can store codes and scripts for just about anything: a video embed code from YouTube, custom tracking codes, etc.

The step-by-step tutorial below shows you how to add code to your pages and posts using Insert HTML Snippet.

Adding Snippets Of Code To Your Content – Insert Html Snippet Plugin Tutorial

Download the plugin here, or install the plugin directly from your dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Find and install the 'Insert Html Snippet' plugin

(Install ’Insert Html Snippet’)

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the ‘Insert Html Snippet’ plugin)

After the plugin has been installed, a new item called XYZ Html will display in the navigation menu …

XYZ Html menu

(XYZ HTML menu)

Info

Important: Make sure you have your script handy (e.g. save it in a plain text file) …

Copy your code to the clipboard

(Highlight and copy your code to the clipboard)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets menu)

Click on Add New HTML Snippet to create a new shortcode …

'Add New HTML Snippet'

(Click on the ‘Add New HTML Snippet’ button to create a new snippet)

In ‘The Add New HTML Snippet’ section, enter a name in the Tracking Name field (this is for your reference), paste your code snippet into the HTML code section and click the Create button …

Creating a new HTML Snippet

(Insert HTML Snippet – Add a new Snippet)

A new snippet will be created and published as a shortcode

Shortcode!

(Shortcode!)

You can also create a shortcode without having your code yet. This is handy if, for example, you are waiting for approval of the code but need to publish the pages where your script will eventually show up.

In this case, go ahead and create your snippet with some placeholder content and insert the shortcode into your pages then publish. After receiving your live code, you can then edit the snippet, replace the content, and republish …

You can also create a new snippet without having code.

(You can create a new shortcode without having your code snippet yet.)

The plugin stores all snippets in a separate list within the plugin’s database. You can view all of your stored snippets by selecting XYZ Html > HTML Snippets from the dashboard menu …

Click on XYZ Html > HTML Snippets to view all of your shortcodes

(Click on XYZ Html > HTML Snippets to view all of your shortcodes)

A table of all your snippets and shortcodes show up in the ‘HTML Snippets’ admin screen …

List of snippets

(Table of snippets and shortcodes)

Because code snippets get stored in an independent location (i.e. the plugin’s database), you can use one shortcode in multiple pages and control everything from one location. If you update the code snippet, whatever code is in the snippet will automatically be updated wherever the shortcode has been added.

You can insert shortcodes into content directly in the WordPress visual editor.

To place the code into your content via a shortcode, simply go to your widget, page, or post and select the location where you would like the code added …

Shortcodes can be inserted into your content inside the WordPress visual editor.

(You can add shortcodes to content directly inside the WordPress visual editor.)

After publishing, preview and test your script …

Script added to content using a shortcode

(Script added to content via a shortcode)

Info

As well as modifying the code in your snippets, you can deactivate or delete the snippets …

Delete, deactivate, and edit your code snippets

(Delete, edit, or deactivate code snippets)

Note:

  • If you deactivate or delete a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content. The plugin will automatically remove any lines containing the shortcode from your content so that it will not be visible to your visitors.
  • If you deactivate the HTML Snippets plugin, your shortcode will show up in your content (you will need to manually remove the shortcode wherever you have added it).

If the HTML Snippets plugin itself gets deactivated, your shortcode will appear as a line of text in your content

(If the HTML Snippets plugin is deactivated, the shortcode will appear as text in your content)

Go here for more information about this plugin: Insert Html Snippet – WordPress Plugin

EmbedIt Pro

EmbedItPro Plugin

(EmbedItPro)

EmbedIt Pro is similar to the previously described plugin, with some added features.

After installing and activating the EmbedIt Pro plugin, a new menu item called HTML Snippets will be added to the main menu …

EmbedIt Pro menu

(HTML Snippets [EmbedIt Pro] menu)

To create a shortcode, click on HTML Snippets > Add New, add your script, give your snippet a descriptive title and click the Publish (or Update) …

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

Two new buttons will appear on your Editor menu toolbar: HTML Snippet and Custom Field

The plugin adds new menu buttons to the visual editor

(EmbedIt Pro adds new menu items to the visual editor toolbar)

You can use the HTML Snippet button to place a shortcode into your posts. With the cursor location selected, click on the HTML Snippet button to select and place the shortcode into your text …

Use the HTML Snippet button to place shortcodes into your pages.

(Use the menu buttons to insert shortcodes into your posts.)

A a new window will pop up on your screen allowing you to insert any of the HTML Snippets you have stored. Type in the name of the HTML Snippet you would like inserted into your page/post and click the ‘OK’ button to proceed …

Insert HTML Snippet

(Insert name of the HTML Snippet)

Your shortcode will be added in the location you have specified …

Shortcode inserted into content

(Shortcode inserted into content)

Click Publish or Update to save …

Publish to save your settings

(Update to save your settings)

View your post or page and test your script. The script should have been added to your content in the specified location …

Content with script added

(Voila … your script has been added!)

While you are logged into your WordPress backend, an ‘Edit Snippet’ button should display below where your code snippet has been inserted. This lets you update scripts “on the fly” (this is useful if you need to edit code parameters, video sizes, etc.)

To edit your script, click on the Edit Snippet button …

Update scripts on the fly!

(Edit code “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Make your changes and resave. All posts and pages will update automatically …

Edit republish your code to make sitewide changes

(Update and republish your code to make sitewide changes)

More info:

Useful WordPress Tip

Tip #1: You can export your HTML snippets (and import these into other WordPress sites) using the Tools > Export function …

Export your Snippets to other WordPress sites

(Export your Snippets)

Tip #2 (For Advanced Users): EmbedIt Pro also uses WordPress Custom Fields to insert code into your posts.

If you know how to use custom fields in WordPress, you can paste code into a custom field and place a shortcode into your content with the “Custom Field” toolbar button. This is useful when you want to insert HTML into a single post without leaving the post editing window.

Add shortcodes to your content with custom fields

(Paste shortcodes into your posts with custom fields)

Tip #3 – Use WordPress Themes With Drag And Drop Page Building Plugins

Most WordPress themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that come with built-in code processing features …

(Some WordPress themes are built with built-in code insertion features)

(Some themes provide built-in code adding functionality)

Tip #4 – Adding code to the header section of WordPress

With a plugin like EmbedIt Pro, you easily insert scripts and code into content inside your WordPress posts and pages.

Some applications (e.g. analytics and ad conversion tracking tools), however, require code to be inserted into content but also to sections such as headers, footers, etc. (e.g. completed order pages, opt-in confirmation pages, and so.)

There are a number of WordPress plugins that will allow you to add code to headers and footers of pages and posts. Many of these plugins, however, add code to all pages or posts, not just the ones you want (some plugins and themes will add the code to every single page and then let you turn the code off on individual pages).

If you need to add code outside of content areas, then you will need to either customize your site or use a plugin like the one below.

Warning

The information below is for advanced WordPress users. If you need help modifying anything on your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CJT Plugin

(CSS & JavaScript Toolbox Plugin For WordPress)

CSS & JavaScript Toolbox (or CJT) lets you add code and contribute to your site’s own code using a reasonably easy-to-use web interface.

The way this plugin works is that it lets you extend your site’s functionality and appearance by adding custom code via code blocks that can be assigned to individual pages, posts, custom posts, categories, URLs, expressions, and more!

Tip

To view the plugin’s comprehensive documentation and user manual, go here:

Note: Before using CJT, you will need to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button …

First-time plugin use requires installing database tables

(First-time plugin use requires installing database tables)

After installing and activating CJT, a new menu item called CSS & JavaScript Toolbox will appear in your navigation menu as well as a new dashboard panel with latest news and information about how CJT is being used on your site …

CJT plugin menu

(CJT plugin menu)

Click on CSS & Javascript Toolbox on the menu …

CSS & JavaScript Toolbox menu

(CSS & Javascript Toolbox menu)

This loads the CSS & Javascript Toolbox dashboard …

CSS & JavaScript Toolbox screen

(CSS & Javascript Toolbox dashboard)

Click on the New Code Block button to begin adding custom code …

CJT - New Code Block

(CSS & Javascript Toolbox – New Code Block Button)

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

'Create New Code Block' window

(‘Create New Code Block’ window)

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

CJT content field

(CJT code area)

Next, select where you want to insert the block (e.g. in specific Pages, Custom Posts, etc …)

Specify where to add your code block

(Select where to add your code block)

The plugin dashboard also has a number of icons you can click to access different features, help documentation, etc. (hover your mouse over the icons for item descriptions) …

Access plugin features via toolbar icons

(Access more CJT features via toolbar icons)

Click Save All Changes to save your settings …

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

For help and support with this plugin, visit the developer’s site here:

Important

Tip: Checking That You Have Added Code Correctly

Some scripts will ask you to verify if you have added the code correctly and some will not.

If you have pasted code into an area like the “header” that is not meant to be visible and you need to check if the code has been added correctly, then do this:

How To View Source Code In Firefox

First, open up your internet browser (e.g. Firefox) and go to the page that contains your code.

From the browser menu, select Tools > Web Developer > Page Source

How to view hidden code in Firefox

(How to view page code in Firefox)

A new browser will open with the page code displayed.

Use the search function (Ctrl+F) or scroll down until you spot the code that you have added (if adding code to a page header, it will typically be located  between the <head> and </head> tags) …

Verifying if you have added code correctly

(How to view your code)

If you can see your code, then the next step is to test your script and make sure that everything is working as it should. If you experience any problems, repeat the above process and make sure that your code has been added correctly, or get help from a professional. As stated earlier in this tutorial, always back up your site before doing anything that involves changing code.

Adding Scripts And Code In WordPress Pages And Posts

Congratulations, now you know how to easily scripts and snippets of code to WordPress posts and pages.

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

Disclaimer: This site is not directly associated with WordPress or any of the WordPress products mentioned or reviewed on this site. We may receive affiliate commissions or financial benefits from sales of third-party products or services advertised on our website. All images are the copyright of their respective owners and are being used only for training or illustrative purposes.

***

Did you enjoy this post? If so, please take a moment and share this post with anyone thinking of starting a business online using the social buttons below.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and has authored hundreds of FREE WordPress tutorials for non-techies and beginners. WPCompendium.org provides detailed step-by-step tutorials that will teach you how to use WordPress with no coding skills required and grow your business online at minimal cost!