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 …

For a whitelabel version of this tutorial visit WPTrainingManual.com.

How To Embed Code Into Your WordPress PagesOne of the most powerful aspects of using WordPress is that you don’t need to have technical skills like editing code to build a successful web presence.

There may be instances, however, where you are required to paste a code snippet or script into content inside your posts or pages in order to benefit from certain additional functionalities. Common examples where adding snippets of code to pages could be used to add functionality to your site include:

  • Today’s date
  • Adding a search box
  • Lead capture forms
  • Display relevant banner ads
  • Conversion tracking scripts (e.g. Google Analytics)
  • etc.

Adding code to pages can give your site additional functionality

(Adding code to pages can help expand your site’s functionality)

Important

Some script features can be added to WordPress through plugins that make handling code easier. In this tutorial, we show you how to easily add code snippets to your WordPress pages.

How To Insert Code Into Your WordPress Posts And Pages - Manual Method

Useful Information

Note: Before adding any code snippets to WordPress make sure to backup your database and files first. If you don’t want to back up your files manually, then consider getting professional WordPress help, or use WordPress backup plugins.

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

Important

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

Do not add code inside your visual editor

(Pasting scripts into the WordPress visual editor does not work)

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

First, find or create your code. You can use a free online HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or consider using HTML cheat sheets

Use an HTML editor or HTML templates to create your code

(Use an online HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)

Select the code that you want to add to your post and copy it 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, select the exact location where you want your script to display, then create a new line and add a placeholder (e.g. @@@@@) …

Add placeholder symbols to mark the location where you want your script to display

(Add a placeholder to mark the spot where you want your script to display in your content)

Next, switch to the Text editor …

Code must be pasted in your Text editor

(Switch to the Text editor to paste in your code)

Locate your placeholder and select the line …

Select and highlight the line containing your placeholder symbols

(Select and highlight your placeholder symbols)

Paste your HTML code over the selected placeholder …

Simple HTML code pasted into text

(Simple HTML code pasted into text)

Save and publish the post, then preview (and test) the results …

Preview and test any code inserted into pages or posts

(Preview and test any code inserted into content)

If you need help using basic HTML, refer to this step-by-step tutorial:

Important

While the above is fine for adding simple HTML code to content, we do not recommend pasting complex scripts directly into your content (e.g. opt-in forms, etc.) …

Avoid using the text editor to add Javascript code

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

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

We recommend using plugins that let you “call” code snippets from a ‘shortcode’ added to your content.

What Is A Shortcode?

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

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

Shortcode

(WP shortcode format)

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

How A WordPress Shortcode Works

How a WordPress shortcode works

(How shortcodes work)

The above explains how a shortcode works:

[1] First, install a plugin that allows you to paste code into a special field (see the tutorial below for an example)

[2] After adding the code to the special field and saving, the plugin creates a unique text shortcut that lets your website process the script.

[3] After pasting the shortcode into your content, publish or update your post or page.

[4] The plugin will now process your code snippet.

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

Inserting Code Snippets Into WordPress Posts Using A Plugin

There are a number of plugins that let you add scripts and code snippets 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 embed snippets of code into pages, posts or sidebar widgets.

Essentially, this plugin allows you to create and create and store unlimited HTML snippets and add them to your content using shortcodes or custom fields.

HTML snippets can store codes and scripts for just about anything: audio players, tracking codes, etc.

The tutorial below shows you how to add code to your content using the Insert HTML Snippet plugin.

How To Add Code Snippets And Scripts To Your WordPress Posts And Pages – Insert Html Snippet Plugin Tutorial

Install the Insert Html Snippet plugin inside your WordPress dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …

Locate and install 'Insert Html Snippet'

(Installing ’Insert Html Snippet’)

Next, activate the plugin …

Activate 'Insert Html Snippet'

(Activate the plugin)

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

XYZ HTML plugin menu

(XYZ Html plugin menu)

Idea

Important: Make sure you have your code snippet available (e.g. copied and saved into a plain text file) …

Have your code ready

(Have your code ready to paste into the plugin)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets plugin menu)

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

'Add New HTML Snippet'

(Click on ‘Add New HTML Snippet’ to create a new shortcode)

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

Insert HTML Snippet - Creating a new Snippet

(Add a new HTML Snippet)

Your new HTML snippet will be created, saved, and published as a shortcode

Your new HTML Snippets shortcode!

(Add the shortcode to content!)

You can also create a shortcode without having your code snippet yet. This is handy if, for example, you are awaiting approval of the code but need to proceed with getting the pages published where your code will eventually display.

In this case, go ahead and create a 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, replace the content, and republish …

You can create a shortcode without having a script.

(You can also create a shortcode without having the code.)

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

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

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

A list of all the HTML snippets you have created appear in the ‘HTML Snippets’ admin screen …

Snippets table

(Table of snippets and shortcodes)

Because the plugin keeps all snippets stored in its own database, you can insert one shortcode into multiple pages and control everything from a single location. If you modify the code snippet, whatever is controlled by the snippet will automatically update wherever the shortcode has been embedded.

You can add shortcodes to your content inside the WordPress visual editor.

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

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

(Shortcodes can be inserted into your content directly in the WordPress visual editor.)

After publishing, preview and test your script …

Script added using a shortcode

(Script added using a shortcode)

Info

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

Delete, edit, or deactivate your code snippets

(Edit, deactivate, or delete 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 remove any lines that contain the shortcode so that no gaps in the content will be noticed by visitors.
  • If the HTML Snippets plugin is deactivated, the shortcode will appear as a line of text in your content (you will need to manually delete the shortcode wherever it’s been placed).

If the plugin itself is deactivated, the shortcode will show up as a line of text in your content

(If the plugin gets deactivated, the shortcode string will appear in your content)

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

EmbedIt Pro

EmbedIt Pro

(EmbedIt Pro – WordPress Plugin)

EmbedIt Pro gives you similar functionality to the previously described plugin, with some additional features.

Once the plugin has been installed, a new menu item called HTML Snippets will display in your dashboard menu …

HTML Snippets [EmbedIt Pro] menu

(HTML Snippets [EmbedIt Pro] plugin menu)

To create a new shortcode, click on HTML Snippets > Add New, add your script, give your snippet a title and click the Publish button …

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

A couple of new items will be added to your Visual Editor toolbar: HTML Snippet and Custom Field

The plugin adds new menu items to the visual editor

(The plugin adds new menu items to the visual editor toolbar)

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 insert your code snippet in the text …

You can use the menu buttons to place shortcodes into your pages.

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

A 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 to add into your content and click OK to proceed …

Insert name of the HTML Snippet

(Insert your HTML Snippet)

Your shortcode will be inserted into your content …

Shortcode inserted into 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 code should display in your content where you have specified …

What your visitors will see

(What your visitors will see)

While you are logged into your site, an ‘Edit Snippet’ button should display below where your code snippet has been added. This allows you to change your script “on the fly” (this is useful if you need to change form elements, resize videos, etc.)

To edit your script, click the Edit Snippet button …

Edit code on the fly!

(Modify code “on the fly”!)

The Edit HTML Snippet screen will open in your browser. Make your changes and save. All pages and posts will update through your entire site with the changes …

Update and republish your code to make global changes

(Edit republish your code to make sitewide changes)

For more details, go here}:

Useful WordPress Tip

Tip #1: The plugin allows you to export your 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 insert code into your content.

If you are familiar with using custom fields, you can paste your HTML code into a custom field and add a shortcode in your content with the “Custom Field” toolbar button. This is useful if you want to embed code into a single post without leaving the post editing window.

Add shortcodes to your posts with custom fields

(Paste shortcodes into your content using custom fields)

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

Most WP themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that let you add raw code to your pages …

(Some themes offer built-in functionality)

(Some themes are built with built-in functionality)

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

A plugin like EmbedIt Pro lets you easily add scripts to content inside your pages and posts.

Some applications (e.g. analytics and ad tracking tools), however, require code to be added not only to content but also to sections like page headers, footers, etc.

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

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

Important

The section below is for advanced users. If you need any help customizing your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CJT Plugin For WordPress

(CJT – WordPress Plugin)

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

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

Info

For comprehensive documentation, go here:

Note: When you first try using the plugin, 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 database installation

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

After installing the plugin, you will see a new item on your main menu called CSS & JavaScript Toolbox as well as a new dashboard panel with news and information about how the plugin is being used on your site …

CJT menu

(CSS & JavaScript Toolbox plugin menu)

Click on CSS & Javascript Toolbox on the menu …

CSS & Javascript Toolbox plugin menu

(CSS & JavaScript Toolbox plugin menu)

This loads the CSS & Javascript Toolbox dashboard …

CSS & Javascript Toolbox dashboard

(CSS & Javascript Toolbox dashboard)

Click on New Code Block to begin adding custom code …

CSS & JavaScript Toolbox - New Code Block

(CSS & Javascript Toolbox – Add New Code Block Button)

In the ‘Create New Code Block’ window, give your 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” (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 in the header or footer. Options = First Block / Last Block.). Click Create

'Create New Code Block' options

(‘Create New Code Block’ options)

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

CJT content area

(CJT code field)

Next, select where you want your code to be inserted (e.g. Pages, Posts, etc …)

Specify where to insert your block of code

(Select where to add your code block)

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

Access more CJT functionality via toolbar icons

(Access more CJT functionality via the toolbar)

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

CJT - 'Save All Changes' button

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

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

Tip

Tip: How To View Your Code

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

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

Viewing Hidden Page Code In Firefox

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

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

Tools > Developer > Page Source

(Tools > Developer Tools > Page Source)

A new browser opens with the page code displayed.

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

How to view your code

(Verify that you have added your scripts correctly)

If you can see the code in your page, 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 process to make sure that you have inserted your code 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 Code And Scripts In WordPress

Congratulations! Now you know how to easily insert code snippets into your WordPress posts and pages.

***

"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

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