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.

Get Thrive Leads for WordPress

Inserting Scripts Into Your Pages And PostsOne of the advantages of using WordPress is that you don’t need to have technical skills like editing code to build a successful online presence.

You could come across times, however, where you may be required to paste a snippet of code into posts or pages in order to add desired features to your site. Some useful snippets of code you may want to insert into your pages include:

  • Current date and time
  • Adding a Google search box
  • Adding newsletter subcription forms
  • Display contextual banner ads
  • Conversion tracking code (e.g. Google Analytics)
  • etc.

Adding code to pages can give your site additional functionality

(Adding scripts to content can give your site additional functionality)

Useful Info

In this tutorial, we show you how to easily insert code and scripts into WordPress content with and without plugins.

Embedding Simple Code Snippets Into WordPress Pages Manually

Warning

Note: Make sure to backup your site before adding any code snippets to WordPress. If you don’t want to perform your own site backups, then consider hiring a professional, or use a backup plugin.

You can read about a WordPress backup plugin that can automate your backup process here:

Important

In WordPress, you cannot add code (e.g. Javascript, HTML) directly into the visual editor …

Do not insert scripts inside your visual editor

(Do not insert scripts into the WordPress visual editor)

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

First, find or create the code you plan to add to your content. You can use a simple HTML editor (e.g. search online for “Online HTML Editor Free“) or use HTML cheat sheets

You can use a free online HTML editor or HTML templates to create your HTML code

(You can use a simple HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)

Copy all of the code to your clipboard …

Select and copy your code to the clipboard

(Copy the code to your clipboard)

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

Add placeholder characters to mark the spot where you want your code to display in your content

(Add placeholder text to mark the location where you want your code to display in your content)

Next, switch to the Text editor …

Switch to the Text editor to paste your code

(Code must be pasted in your Text editor)

Locate and highlight the placeholder …

Select and highlight the line containing your placeholder characters

(Select and highlight the line containing the placeholder)

Paste your HTML code into your content …

Simple HTML code pasted into text

(Use the text editor to add simple HTML code to your content)

Republish your page or post, then preview (and test) the results …

Preview and test any code added to your posts

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

To learn more about using basic HTML in WordPress, refer to this step-by-step tutorial:

Important

While the above method is fine for adding simple HTML to content, this is not recommended for pasting complex scripts directly into your content (e.g. lead capture forms, etc.) …

Avoid using the text editor to add Javascript code ... use the other methods described below instead!

(Don’t use the text editor to add complex code)

Pasting JavaScript code directly into the text editor could cause errors.

We recommend using plugins that automatically process the script from ’shortcodes’ added to your content.

What Is A Shortcode?

’Shortcodes’ are simple bits of code that allow you to perform complex functions without coding or programming knowledge. Shortcodes can typically be used in posts, widgets, and pages to trigger a complex script into action.

A shortcode normally looks like a little string of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …

Shortcode structure

(WordPress shortcode format)

Shortcodes allow WordPress developers to create complex scripts such as image tools, content generators, forms, etc., which you then insert into your content using a simple text string.

How WordPress Shortcodes Work

How to use shortcodes

(How shortcodes work)

The screenshot above explains how to use shortcodes:

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

[2] After adding the code snippet to the code area and saving, the plugin creates a unique shortcode that lets your site process this script.

[3] You then copy this shortcode to your clipboard and paste it into any posts, widgets, or pages where you would like the script to display and publish.

[4] The plugin will now automatically load your script.

Shortcodes are great because you don’t have to mess around with code to get the functionality you want … simply add the shortcode where you would like the functionality to appear and WordPress does the rest!

How To Insert Code Snippets Into WordPress Pages And Posts Using A Plugin

Let’s now show you how to add scripts and code snippets into WordPress using free WordPress plugins.

Insert HTML Snippet

Insert Html Snippet - WordPress Plugin

(Insert HTML Snippet Plugin)

As the plugin name suggests, Insert Html Snippet lets you add HTML code into pages, posts and sidebar widgets.

This plugin lets you create and store HTML snippets and add them to your pages and posts using shortcodes or custom fields.

HTML snippets can store code for just about everything: calculators, image galleries, audio players, javascript codes, etc.

The step-by-step tutorial below shows you how to add code to your content using the Insert Html Snippet plugin.

How To Add Scripts To Your Posts – Step-By-Step Tutorial

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

Locate and install 'Insert Html Snippet'

(Install the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate 'Insert Html Snippet'

(Activate the plugin)

After installing and activating the Insert HTML Snippet plugin, a new menu item called XYZ Html will display in your dashboard menu …

XYZ Html menu

(XYZ Html menu)

Info

Important: Make sure to have your code handy (e.g. copied and saved in a plain text file) …

Select and copy your code to the clipboard

(Have your code ready to use)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets plugin menu)

Click on the Add New HTML Snippet button …

'Add New HTML Snippet'

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

In ‘The Add New HTML Snippet’ screen, name your snippet (this is for your own reference only), paste your script into the HTML code section and click on the Create button …

Insert HTML Snippet - Adding a new HTML Snippet

(Add a new Snippet)

This creates, saves, and publishes a new HTML Snippet as a shortcode

Add the shortcode to content!

(Your new shortcode!)

You can also create a snippet without having a script. This is handy if, for example, you are waiting for approval of the code but would like to publish the content where your code will eventually appear.

In this case, go ahead and create a code snippet with placeholder content and insert the shortcode into your pages then publish. After your script has been approved, you can then edit the snippet, replace the content, and republish …

You can create a new snippet without having the script code.

(You can create a new snippet without having a script.)

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

Click on the XYZ Html > HTML Snippets plugin menu to view a list of all your snippets

(Click on the XYZ Html > HTML Snippets menu to view all of your snippets)

A table of all your HTML snippets will appear in the ‘HTML Snippets’ admin screen …

Table of snippets

(Table of snippets)

Because the plugin keeps all code snippets stored in its own database, you can use a single shortcode in multiple posts and pages and control everything from one location. If you edit your code inside the snippet, whatever code is in the snippet will automatically update wherever the shortcode has been embedded.

Shortcodes can be inserted into content in the WordPress visual editor.

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

You can add shortcodes to content directly in the WordPress visual editor.

(Shortcodes can be pasted into content in the WordPress visual editor.)

After publishing, preview your content and test your script to ensure that everything has been added correctly …

Script added to content using a shortcode

(Script added to content using a shortcode)

Useful Information

As well as editing the code in your snippet, you can deactivate and delete the snippets …

Delete, deactivate, and edit snippets

(Deactivate, edit, or delete snippets)

Note:

  • If you deactivate or delete a snippet but the HTML Snippets plugin is left active, your shortcode will not display in your content. The plugin will remove the line that includes the shortcode from your content so that no gaps will be detected by visitors.
  • If you deactivate the plugin itself, the shortcode will display as a line of text in your content (it will need to be manually removed).

If the plugin is deactivated, your shortcode will display in your content

(If the HTML Snippets plugin is deactivated, the shortcode string will display in the content)

For more details, go here}: Insert HTML Snippet

EmbedIt Pro

EmbedItPro

(EmbedItPro Plugin For WordPress)

EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some added features.

After installing and activating EmbedIt Pro, a new menu item called HTML Snippets will display in your WP menu section …

EmbedIt Pro plugin menu

(HTML Snippets [EmbedIt Pro] plugin menu)

To create a shortcode, click on HTML Snippets > Add New, paste your code, give your snippet a name and click the Publish (or Update) …

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

Two new menu items will display on your Editor toolbar: HTML Snippet and Custom Field

The plugin adds new menu buttons to the visual editor

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

Use the HTML Snippet button to insert shortcodes into your content. With the cursor location selected, click on the HTML Snippet button to select and place the snippet shortcode in the text …

You can use the HTML Snippet button to add a shortcode to your pages.

(You can use the HTML Snippet button to insert shortcodes into your pages.)

A small popup window will display on your screen allowing you to insert any of the HTML Snippets you have saved. Type in the name of the HTML Snippet you want added into your page/post and click OK to proceed …

Insert HTML Snippet

(Insert HTML Snippet)

The shortcode will be inserted where the cursor is located …

Shortcode added to content

(Shortcode added to content)

Click Publish/Update to save …

Publish to save your settings

(Update to save your settings)

View your post or page and test your script. The code should display in your content where you have specified …

What your visitors will see

(Content with script added)

While you are logged into your site, you should see an ‘Edit Snippet’ button displayed near where your code has been inserted. This allows you to change code “on the fly” (this is useful if you need to edit code elements, image sizes, etc.)

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

Update code on the fly!

(Make changes to scripts “on the fly”!)

This will take you to the Edit HTML Snippet screen. Make the changes to the script and update. All pages and posts will automatically update …

Edit republish your code to make global changes

(Edit republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

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

Export your Snippets to other 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, you can add your code to a custom field and place a shortcode into your content with the “Custom Field” toolbar button. This is useful when you want to embed code into a single post without leaving the post editing window.

Embed shortcodes into your content using custom fields

(Add shortcodes to your content using 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 provide script processing functionality …

(Some WordPress themes come with built-in functionality)

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

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

With a plugin like EmbedIt Pro, you easily add snippets of code to content inside your WordPress pages and posts.

Some applications (e.g. analytics and conversion tracking tools), however, require code to be added not only to content but also to areas such as headers, footers, etc. (for example, product download 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 every page on your site, not just the ones you want (some plugins will add the code to every 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.

Important

The next section is for advanced WordPress users. If you need any help editing scripts on your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CJT Plugin For WordPress

(CSS & Javascript Toolbox Plugin)

CSS & JavaScript Toolbox (or CJT) lets you add code elements that contribute to your WordPress installation software code using a reasonably easy-to-use web interface.

The way CJT works is that it allows you to modify or extend your site’s functionality by adding custom code using code blocks that can be assigned to individual posts, pages, categories, custom posts, URLs, expressions, and much more!

Useful Info

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

Note: After activating the plugin, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ and the plugin will take care of the rest …

First-time plugin use requires database installation

(Database tables will need to be installed the first time CJT is used)

After installation, you will see a new menu item on your main menu called CSS & Javascript Toolbox as well as a dashboard panel with latest news and plugin usage information …

CSS & Javascript Toolbox menu

(CJT plugin menu)

Click on CSS & JavaScript Toolbox

CSS & Javascript Toolbox plugin menu

(CSS & Javascript Toolbox menu)

This brings up the CSS & JavaScript Toolbox screen …

CSS & Javascript Toolbox screen

(CSS & Javascript Toolbox dashboard)

Click on New Code Block to add new code …

CSS & JavaScript Toolbox - New Code Block Button

(CJT – Add New Code Block Button)

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

'Create New Code Block' window

(‘Create New Code Block’ window)

A blank text box will appear. Paste your code or script into this section …

CJT content field

(CJT content field)

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

Specify where to add your code

(Select where to insert your code)

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

Access plugin functionality via toolbar icons

(Access CJT functionality via the toolbar)

Click the ‘Save All Changes’ button when done to save your settings …

Click 'Save All Changes' to save your settings

(Click ‘Save All Changes’ to save your settings)

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

Important Info

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

Some scripts will ask you to verify that your code has been added correctly and some will not.

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

How To View Hidden Page Code In Firefox

First, open up your internet browser (we’ll use Firefox in this example) and visit the page that contains your code.

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

How to view hidden code in Firefox

(How to view source code in Firefox)

A new browser opens displaying the source code for the page.

Use the search function (Ctrl+F) or scroll down until you can see the code that you have added (code added to a page header is typically located  between the <head> and </head> tags) …

How to check that you have added your scripts correctly

(Source code)

If you can see the code in page source view, then the next step is to test your script and make sure that everything is working as it should. If you experience any errors, repeat the process to 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 files and database before adding, changing or deleting code.

Inserting Snippets Of Code Into Your WordPress Content

Congratulations, now you know how to easily embed scripts into WordPress posts.

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

***

Recommended Video Courses For WordPress Users

WordPress SecurityWordPress Security

Learn how to keep your WordPress site or blog secure and protected from malware, hackers and brute-force attacks.

More info: WordPress Security

Recommended Video Courses For WordPress Users

How To Set Up WordPress On LocalhostHow To Set Up WordPress On Localhost

Learn how to install, set up, and locally host a fully functioning WordPress site on your computer.

More info: How To Set Up WordPress On Localhost

Recommended Video Courses For WordPress Users

Using Password ManagersUsing Password Managers

Password Managers provide an easy and secure way to keep track of all your passwords. This video course shows you how to use two FREE powerful password management tools.

More info: Using Password Managers

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

How To Use Amazon S3How To Use Amazon S3

Learn how to set up and use Amazon S3 to upload, store, manage, and protect your site’s images, large media files, downloadable files, stream videos and more.

More info: How To Use Amazon S3

Recommended Video Courses For WordPress Users

How To Install, Set Up & Use WordPress MultisiteHow To Install, Set Up & Use WordPress Multisite

Learn how to quickly and securely set up an online community of websites or blogs using the powerful WordPress Multisite feature.

More info: WordPress Multisite

Recommended Video Courses For WordPress Users

How To Back Up & Restore WordPress SitesHow To Back Up & Restore WordPress Sites

Learn how to safely and automatically backup your WordPress files and database and how to easily restore your WordPress site if something were to happen.

More info: How To Back Up & Restore WordPress Sites

Recommended Video Courses For WordPress Users

How To Use FTPHow To Use FTP

This video course shows you how to use FTP (File Transfer Protocol) to transfer and upload files between your hard drive and your server using a free FTP program called Filezilla.

More info: How To Use FTP

Recommended Video Courses For WordPress Users

How To Optimize WordPressHow To Optimize WordPress

Learn how to optimize your WordPress site and improve your page loading speed.

More info: How To Optimize WordPress

Recommended Video Courses For WordPress Users

How To Use cPanelHow To Use cPanel

cPanel is a powerful and simple-to-use web hosting management software application that gives website owners the ability to quickly and easily manage their servers and websites using a simple and intuitive dashboard.

This video course will teach you how to use the main features of cPanel to manage your web hosting.

More info: How To Use cPanel

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as How To Insert Code And Scripts Into WordPress Posts And Pages.