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

Adding Scripts In WordPress Pages And PostsOne of the best reasons for using WordPress is that you don’t need to have technical skills like editing code to manage a website successfully.

You could come across times, however, where you may like to insert a code snippet or script into your posts or pages in order to obtain a particular result. Typical examples where adding snippets of code to posts or pages would enhance your site include:

  • Special offer automatic expiry date
  • Adding a search box to your post, page, or sidebar
  • Lead capture forms
  • Display relevant advertising
  • Conversion tracking scripts (e.g. Google Adwords)
  • etc.

Adding scripts to your pages can give your site additional functionality

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

Important Info

Some script features can be added to WordPress using plugins that involve little to no handling of code. In this tutorial, you are going to learn how to easily insert snippets of code into WordPress content. You will also learn different methods that can be used to add code snippets to your content.

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

Important

Note: We recommend backing up your site files and database before adding any scripts or code to WordPress. If you don’t want to back up your files yourself, then consider using the services of a professional, or use WordPress backup plugins.

You can read about a great WordPress backup plugin that we recommend using to automate WordPress site backups here:

Info

You cannot add code directly into your content using the WordPress visual editor …

Pasting code inside the visual editor does not work

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

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

First, locate or create your code. You can use an 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 a simple HTML editor or HTML templates to create your code. Source: HTML-Online.com)

Copy the code to your clipboard …

Copy the code to your clipboard

(Select and copy your code to the clipboard)

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

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

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

Next, switch to the Text editor to paste in the code …

Switch to the Text editor to paste code

(Code must be pasted in the Text editor)

Locate your placeholder symbols and select the entire line …

Select and highlight your placeholder

(Select and highlight your placeholder characters)

Paste the code into your content …

HTML code pasted into text

(HTML code pasted into text)

Publish your post or page, then preview …

Preview and test any code you add to your pages or posts

(Preview and test any code added to pages or posts)

For a detailed step-by-step tutorial about using basic HTML, go here:

Important

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

Avoid using the WordPress text editor to add complex code

(Avoid using the text editor to add JavaScript code)

If you paste scripts directly into the text editor you could find that your script will cause errors.

The method we recommend is to use a plugin that lets you “call” the code snippet using ’shortcodes’ added to your content.

What’s A Shortcode?

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

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

What a WP shortcode looks like

(What a shortcode looks like!)

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

How To Use WordPress Shortcodes

How a WordPress shortcode works

(How to use shortcodes)

The above explains how a WordPress shortcode works:

[1] You 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 pasting the code into the special field and saving, the plugin generates a unique text-based shortcut for calling up this script.

[3] Copy this shortcode and paste it into a new or existing post, page, or widget where you would like the script to display and publish.

[4] WordPress will now automatically process your function every time someone brings up the content on their web browser.

Shortcodes are great because you don’t have to mess around with the actual script … simply add the shortcode to your content and WordPress does the rest!

How To Add Code Snippets And Scripts To WordPress Pages Using Plugins

Let’s now show you how to embed code into your widgets, posts, and pages using free WordPress plugins.

Insert HTML Snippet

Insert Html Snippet Plugin For WordPress

(Insert Html Snippet WP Plugin)

As the name suggests, Insert Html Snippet allows you to add snippets of code into pages, posts and sidebar widgets.

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

HTML snippets can store codes and scripts for just about anything: calculators, image galleries, video players, javascript codes, etc.

The tutorial below shows you how to use Insert HTML Snippet.

Embedding Code Into Your Content – Tutorial

Find and install Insert Html Snippet inside your WordPress dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …

Installing the 'Insert Html Snippet' plugin

(Installing the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the plugin)

Once the plugin has been installed, a new item called XYZ Html will be added to your dashboard menu …

XYZ HTML plugin menu

(XYZ Html plugin menu)

Idea

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

Select and copy your code to the clipboard

(Have your code ready to paste into the plugin)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen loads in your browser. Click on Add New HTML Snippet

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

(’Add New HTML Snippet’)

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

Creating a new HTML Snippet

(Insert Html Snippet – Creating a new Snippet)

A new snippet will be created and published as a shortcode

Paste this shortcode into pages and posts!

(HTML Snippets shortcode!)

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

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

You can create a snippet without having the code.

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

After creating a new HTML Snippet the plugin will store it in a separate list in the plugin’s database. You can view all the snippets you’ve created by selecting XYZ Html > HTML Snippets from your dashboard 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 a list of all your snippets and shortcodes)

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

Snippets and shortcodes list

(List of snippets)

Because snippets get stored in an independent location (i.e. a separate database), you can use one shortcode in different pages and control everything from one location. If you change the code in your snippet, the code will automatically be updated everywhere the shortcode has been inserted.

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

To place the code into your content via a shortcode, simply open your page or post and select where you would like the code embedded …

Shortcodes can be added to content in the WordPress visual editor.

(Shortcodes can be added in the WordPress visual editor.)

After publishing, preview and test the script to ensure that the code is working ok …

Script added to content using a shortcode

(Script added to content via a shortcode)

Info

You can edit, deactivate, and delete your snippets …

Delete, edit, and deactivate code snippets

(Edit, deactivate, and delete your code snippets)

Notes:

  • If you delete or deactivate a snippet but the plugin is left active, your shortcode will not display in your content. The plugin will automatically fix the content so that no gaps will be detected by visitors.
  • If the HTML Snippets plugin is deactivated, your 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 you deactivate the HTML Snippets plugin, your shortcode will display in your content

(If you deactivate the HTML Snippets plugin, the shortcode will show up as text in your content)

For more details, go here}: Insert HTML Snippet WP Plugin

EmbedIt Pro

EmbedItPro WP Plugin

(EmbedIt Pro)

EmbedIt Pro is similar to the HTML Snippets plugin, with some added features.

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

EmbedIt Pro plugin menu

(EmbedIt Pro plugin menu)

To create a new snippet, click on HTML Snippets > Add New, paste your code, give your snippet a name and click the Publish button …

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

You will see that a couple of new items will be added to your Editor toolbar: HTML Snippet and Custom Field

EmbedIt Pro adds new menu items to the visual editor

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

You can use the HTML Snippet button to add a shortcode to your pages. With the cursor location selected, click on the HTML Snippet button to select and insert your snippet in your text …

You can use the menu buttons to add shortcodes to your posts.

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

A small window will pop up on your screen allowing you to insert any of the HTML Snippets you have created. Type in the name of the HTML Snippet you want to add into your page/post and click the ‘OK’ button to proceed …

Insert HTML Snippet

(Insert HTML Snippet)

Your shortcode will be inserted in the location of your cursor …

Shortcode inserted into 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 in the location you have specified …

Voila ... your code has been added!

(Content with script added)

While you are logged into your WordPress backend, you should see an ‘Edit Snippet’ button displayed below the area where your code snippet has been added. This allows you to make adjustments to scripts “on the fly” (this is useful if you need to edit code parameters, video sizes, etc.)

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

Edit code on the fly!

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

The Edit HTML Snippet screen will open in your web browser. Make your necessary changes to the code and save. All posts and pages will be automatically updated with the new changes …

Edit, update, and republish your code to make sitewide changes

(Edit, update, and republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

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

Export your Snippets

(Export your HTML Snippets)

Tip #2 (Advanced Users): The plugin 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” menu button. This is useful when you want to insert code into a single post without leaving the post editing window.

Add shortcodes to your posts via custom fields

(Embed shortcodes into your posts using custom fields)

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

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

(Some WordPress themes offer built-in functionality)

(Some WordPress themes come with built-in code adding functionality)

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

A plugin like EmbeditPro allows you to easily add code and scripts to content inside your pages and posts.

Some applications (e.g. analytics and banner ad tracking tools), however, require code to be added not only to content but also to areas like headers, footers, etc. (for example, purchase pages, opt-in confirmation pages, and so.)

There are a number of plugins that will allow you to add code to the header or footer section of pages. Many of these plugins, however, add code to all pages, 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 off on individual pages or posts).

If you need 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 described below.

Warning

The section 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

CSS & JavaScript Toolbox WordPress Plugin

(CJT – WordPress Plugin)

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

The way the plugin works is that it lets you modify your site’s functionality with custom code blocks that you can assign to individual posts, pages, custom posts, categories, expressions, URLs, and much more!

Idea

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

Note: When you first try using the plugin, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …

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

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

After installation, a new menu item called CSS & JavaScript Toolbox will be added to your menu as well as a dashboard panel with latest news and plugin usage information …

CJT menu

(CSS & JavaScript Toolbox menu)

Click on CSS & JavaScript Toolbox on the menu …

CSS & Javascript Toolbox plugin menu

(CJT plugin menu)

This brings up the CSS & Javascript Toolbox dashboard …

CSS & Javascript Toolbox screen

(CSS & Javascript Toolbox dashboard)

Click on New Code Block to begin adding new code …

CJT - New Code Block Button

(CSS & JavaScript Toolbox – 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” (specify if 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 box will appear. Paste your code or script into this section …

CJT code area

(CJT code field)

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

Select where to insert your block of code

(Specify where to add your code block)

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

Access more plugin functionality via toolbar icons

(Access plugin functionality via toolbar icons)

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 settings

(CJT – ‘Save All Changes’ button)

For more information, go here:

Tip

Tip: Checking If You Have Added Your Code Correctly

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”) and you would like to check if the code has been added correctly, then do the following:

How To View Page Code In Firefox

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

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

Tools > Developer > Page Source

(Viewing hidden page code in Firefox)

A new window will open with the source code of the page displayed.

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

Page code

(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 errors, repeat the above process and make sure that you have embedded your code correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your site before doing anything that involves changing code.

How To Add Scripts To WordPress Content

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

***

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