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 WordPress Posts And PagesOne of the best reasons for using WordPress is that you don’t need to have technical skills like editing code to build a successful web presence.

There may be occasions, however, where you may decide to add a script or code snippet to posts or pages in order to extend the capabilities of your site. Common examples where inserting scripts into content could be used to enhance the functionality your site include:

  • Showing the current date and time on a time sensitive offer page
  • Adding a search box
  • Adding an opt-in form
  • Display contextual banner ads
  • Tracking code (e.g. Facebook Ads)
  • etc.

Adding code to content can help expand your site's functionality

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

Important Info

In this step-by-step tutorial, you are going to learn how to add snippets of code to WordPress pages and posts.

Inserting Code Into Your WordPress Content Manually

Note

Note: We recommend backing up your site files and database before adding any scripts to WordPress. If you don’t want to perform your own backups, then consider getting support from a WordPress professional, or use a backup plugin.

You can read about a WordPress backup plugin that we recommend using to completely automate your file and database backups here:

Info

Code cannot be inserted directly into the WordPress visual editor …

Do not add code into your visual editor

(Pasting scripts inside the visual editor will not work)

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

First, source or create your code. You can use a web-based HTML editor (e.g. search online for “Free Online HTML Editor“) or use an HTML cheat sheet

Use a free online HTML editor or HTML templates to create your HTML code

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

Select and copy all of the code to your clipboard …

Copy the code to your clipboard

(Copy your code to the clipboard)

Next, open your page or post and in the Visual Editor, add placeholder characters to mark the location where you want your script to display …

Add placeholder text to mark the spot where you would like your script to display

(Add placeholder symbols to mark the spot where you would like your script to appear in your content)

Switch to the Text editor …

Switch to the Text editor to paste your code

(Switch to the Text editor to paste your code)

Find your placeholder symbols and highlight the entire line …

Select and highlight the line containing your placeholder

(Select and highlight your placeholder symbols)

Paste the code into your content, replacing your selected placeholder …

Use the text editor to embed simple HTML into your content

(Use the text editor to embed simple HTML into your content)

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

Preview and test any code added to your content

(Preview and test any code inserted into your posts or pages)

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

Important

While the above can be used to add simple HTML to content, this is not recommended for pasting complex code directly into your content (e.g. opt-in forms, etc.) …

Don't use the WordPress text editor to add complex code ... use the other methods below instead!

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

Pasting code containing Javascript directly into the text editor can lead to errors.

A better way to add scripts to WordPress posts and pages is to enter the code into a plugin that ”calls” the script using a ‘shortcode’ pasted into your content.

What’s A Shortcode?

’Shortcodes’ are simple bits of code that allow users to perform complex functions without coding or programming skills or knowledge. Shortcodes are typically used in posts, widgets, and pages to trigger complex scripts into action.

Shortcodes normally look like short bits of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …

Shortcode structure

(WP shortcode format)

Shortcodes enable plugin developers to create complex scripts such as image tools, user forms, content generators, etc., which you then add to your content using a short text string.

How To Use WordPress Shortcodes

How to use WordPress shortcodes

(How a shortcode works)

The screenshot above explains how to use a shortcode:

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

[2] After pasting the script into the field and saving, the plugin creates a unique piece of text that lets your website call up the script.

[3] You then copy the shortcode to your clipboard and paste it into a new or existing widget, post, or page where you would like the script to appear and publish.

[4] The plugin will now call up the code snippet every time someone browses your site.

Shortcodes are great because you don’t have to mess with scripts to get the functionality you want … simply add the shortcode to your post, widget, or page and WordPress does the rest!

Embedding Scripts Into Your WordPress Pages Using Plugins

There are several plugins available that let you add code into WordPress.

Insert Html Snippet

Insert HTML Snippet - WordPress Plugin

(Insert Html Snippet – WordPress Plugin)

As the name suggests, Insert HTML Snippet allows you to easily embed snippets of code into a post, page, or a sidebar widget.

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

HTML snippets are objects that can store code for just about everything: calculators, image galleries, video players, javascript codes, etc.

The tutorial below shows you how to use the Insert Html Snippet plugin.

Inserting Scripts Into WordPress Content – Step-By-Step Tutorial

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

Locate and install 'Insert Html Snippet'

(Installing the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

Activate 'Insert Html Snippet'

(Activate the plugin)

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

XYZ Html menu

(XYZ HTML plugin menu)

Useful Information

Important: Make sure you have your code snippet handy (e.g. pasted in a plain text file) …

Copy your code to the clipboard

(Have your code ready to paste into the plugin)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets plugin menu)

Click on Add New HTML Snippet

'Add New HTML Snippet'

(’Add New HTML Snippet’)

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

Add a new HTML Snippet

(Insert Html Snippet – Add a new Snippet)

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

Your new shortcode!

(Your new shortcode!)

You can also create a shortcode without having the script code. This is useful if, for example, you are awaiting approval of the code but want to proceed with getting the content created where your code will eventually display.

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

You can also create a snippet without having your code yet.

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

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

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

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

A table with all your HTML snippets display in the ‘HTML Snippets’ admin screen …

Snippets and shortcodes table

(Snippets list)

Because code snippets get stored in an independent location (i.e. a separate database), you can add a single shortcode to multiple pages and control everything from one location. If you update the code and update the snippet, your code will automatically update wherever the shortcode has been inserted.

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

To place the code into your content using a shortcode, simply go to your page, post, or widget and click where you would like to embed the code …

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

( Add shortcodes to content directly inside the WordPress visual editor.)

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

Script added via a shortcode

(Script added to content via a shortcode)

Important Info

You can deactivate, edit, and delete code snippets …

Edit, deactivate, or delete snippets

(Delete, edit, and deactivate code snippets)

Notes:

  • If you delete or deactivate a snippet but leave the plugin active, your shortcode will not display in your content. The plugin will remove the line that includes the shortcode so that it will not be visible to visitors.
  • If you deactivate the plugin itself, the shortcode will appear in your content (you will need to manually delete all instances of the shortcode).

If you deactivate the HTML Snippets plugin, the shortcode will appear as a line of text in your content

(If you deactivate the plugin, the shortcode string will appear in the content)

For more details, go here}: Insert Html Snippet Plugin For WordPress

EmbedIt Pro

EmbedIt Pro Plugin

(EmbedIt Pro – WordPress Plugin)

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

After installing and activating EmbedIt Pro, a new menu item called HTML Snippets will appear in your WordPress admin menu section …

HTML Snippets [EmbedIt Pro] menu

(EmbedIt Pro plugin menu)

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

Shortcode - EmbedIt Pro

(EmbedIt Pro Shortcode)

A couple of new items will appear on your Visual Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro adds new menu items to the visual editor

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

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

Use the menu buttons to add a shortcode to your pages.

(Use the menu buttons to add shortcodes to your content.)

A window will pop up on your screen allowing you to insert any HTML Snippets you have saved. Type in the name of the HTML Snippet you would like embedded into your page or post and click the ‘OK’ button to continue …

Insert your HTML Snippet

(Insert your HTML Snippet)

The shortcode will be inserted where the cursor is located …

Shortcode added to content

(Shortcode inserted into content)

Click Publish or Update to save …

Update to save your settings

(Update to save your settings)

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

Content with script added

(Voila … your code has been added!)

While you are logged into your WordPress admin area, you should see an ‘Edit Snippet’ button displayed next to the section where your script has been inserted. This lets you make updates to your code “on the fly” (this is useful if you need to change code parameters, video sizes, etc.)

To update your code, click the Edit Snippet button …

Modify scripts on the fly!

(Adjust code “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Make your changes and save. All content will update automatically …

Edit republish your code to make sitewide changes

(Edit republish your code to make sitewide changes)

For more details, go here}:

Useful WordPress Tip

Tip #1: The plugin lets you export HTML snippets (and import these into other sites) using the Tools > Export function …

Export your Snippets

(Export your Snippets)

Tip #2 (Advanced Users): The plugin also uses WordPress Custom Fields to add code to your posts.

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

Add shortcodes to your posts using custom fields

(Embed shortcodes into your posts via custom fields)

Tip #3 – Use Themes With Drag And Drop Code Adding Page Builders

Most themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that let you embed raw HTML and JavaScript code into your content …

(Some themes offer built-in code insertion features)

(Some WordPress themes offer built-in code insertion functionality)

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

A plugin like EmbedIt Pro lets you easily insert code and scripts into content inside your pages and posts.

Some applications, however, require that code be added not only to content but also to sections like page headers, footers, etc. (for example, completed order pages, confirmation pages, and so.)

There are a number of WordPress plugins that will allow you to add code to headers and footers of your posts and pages. Many of these plugins, however, will add code every page on your site, not just the ones you want (check the plugin’s settings – some plugins will add code to every single page and then let you turn the code on/off on individual pages or posts).

If you need to add scripts 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 users. If you need any help modifying anything on your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CJT - WordPress Plugin

(CSS & JavaScript Toolbox)

CSS & JavaScript Toolbox (or CJT) is a flexible and powerful plugin that lets you add code elements to your site’s own code using an easy-to-use web interface.

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

Tip

For comprehensive documentation and user manual, go here:

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

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

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

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

CJT menu

(CJT menu)

Click on CSS & JavaScript Toolbox on the menu …

CSS & JavaScript Toolbox plugin menu

(CSS & JavaScript Toolbox plugin menu)

The CSS & JavaScript Toolbox screen will display …

CSS & JavaScript Toolbox screen

(CSS & JavaScript Toolbox dashboard)

Click on the New Code Block button to add new code to your site …

CSS & Javascript Toolbox - Add 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 checkbox to activate it (or leave it unchecked if you don’t want it activated yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (this allows you to specify if 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 field will appear. Paste your code or script into this area …

CJT content field

(CJT content area)

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

Select where to add your code

(Select where to add your code block)

The main screen also various icons you can click to access different functions, help, etc. (hover your mouse over the icons for tooltips) …

Access plugin features via the toolbar menu

(Access more CJT features via the toolbar)

Click the ‘Save All Changes’ button after creating or editing your code block to save your code settings …

Click 'Save All Changes' to save your code settings

(CJT – ‘Save All Changes’ button)

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

Idea

Tip: How To View Your Code

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

If you have added code to an area of your site like the “header” that is not meant to be visible and you would like to check if the code has been added correctly, then do the following:

Viewing Hidden Page Code In Firefox

First, open up your internet browser (e.g. Firefox) and visit the page where you have added your code.

Select Tools > Developer Tools > Page Source from the browser menu …

How to view hidden page code in Firefox

(How to view hidden page code in Firefox)

A new browser opens up with the source code of the page displayed.

Use the search function (Ctrl+F) or scroll down until you can find the code that you have added (code added to the header section is normally found  between the <head> and </head> tags) …

Source code

(Checking if you have added your code correctly)

If you can see the code in page source view, then all that’s left is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the above process to make sure that you have inserted the code correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your files and database before adding, changing or deleting code.

Adding Code And Scripts To WordPress

Congratulations! Now you know how to insert code snippets into WordPress pages.

***

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

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