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 …

How To Insert Scripts Into WordPress PagesOne of the benefits of using WordPress is that you don’t need to mess with code to build a successful online presence.

There could be occasions, however, where you are required to add a snippet of code to posts or pages in order to get a desired outcome. Some common code snippets you may want to add to your website include:

  • Current date and time
  • Adding a search box
  • Adding newsletter subcription forms
  • Display contextual advertising
  • Conversion tracking code (e.g. Facebook Ads)
  • etc.

Adding code to your pages can give your site additional functionality

(Adding code to pages can give you additional functionality)

Info

In this step-by-step tutorial, we will show you how to embed code into WordPress pages.

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

Note

Note: Before adding any scripts or code to WordPress remember to back up your files and database first. If you don’t want to back up your data manually, then get help from a WordPress professional, or use a WordPress backup plugin.

Learn about a WordPress backup plugin that we recommend using to perform automated site backups here:

Useful Information

Scripts cannot be embedded directly into the WordPress visual editor …

Pasting code inside the WordPress visual editor does not work

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

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

First, locate or create your HTML 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 HTML code

(Use a free web-based HTML editor or HTML templates to create your HTML code. Source: HTML-Online.com)

Highlight and copy all of your code to the clipboard …

Copy your code to the clipboard

(Select and copy your code to the clipboard)

Next, open your post or page and in the Visual Editor, create a blank line and add placeholder characters (e.g. @@@@@) in the location where you would like your script to display …

Add a placeholder where you would like your code to appear in your content

(Add placeholder characters to mark the spot where you want your script to display)

Switch to the Text editor …

Code must be pasted in the Text editor

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

Locate the placeholder and highlight the line …

Select and highlight the line containing the placeholder

(Select and highlight your placeholder)

Paste the code over your selected placeholder …

Simple HTML code pasted into text

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

Save the post or page, then preview …

Preview and test any code you add to posts

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

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

Important

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

Don't use the text editor to add complex code

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

If you paste complex code directly into the text editor you may find the script causes errors.

We recommend using a plugin that lets you “call” the code snippet using ’shortcodes’ added to your content.

WordPress Shortcodes

’Shortcodes’ are short bits of code that allow users to perform complex functions with no coding or programming knowledge. Shortcodes are typically added to widgets, posts, and pages to trigger a complex script into action.

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

Shortcode

(WP shortcode structure)

Shortcodes enable WordPress developers to create complex scripts such as content formatting tools, image tools, forms, etc., which you then add to your content using a simple text code.

How Shortcodes Work

How a WordPress shortcode works

(How to use WordPress shortcodes)

The above explains how to use a shortcode:

[1] First, 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 adding the code to the code area and saving, the plugin generates a unique shortcode for processing this script.

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

[4] WordPress will now automatically call up the code snippet.

The great thing about using shortcodes is that you don’t have to mess with the actual code … just add the shortcode to your content and WordPress does the rest!

How To Insert Scripts And Code Into Your Posts Using Plugins

There are various plugins that allow you to embed snippets of code into WordPress.

Insert HTML Snippet

Insert Html Snippet - WordPress Plugin

(Insert HTML Snippet – WordPress Plugin)

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

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

HTML snippets are objects that can store codes and scripts for just about everything: video galleries, custom javascript codes, etc.

The step-by-step tutorial below shows you how to use Insert Html Snippet.

How To Insert Snippets Of Code Into Your Pages – Insert HTML Snippet Tutorial

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

Installing the 'Insert Html Snippet' plugin

(Locate and install ’Insert Html Snippet’)

Next, activate the plugin …

Activate the plugin

(Activate ’Insert Html Snippet’)

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

XYZ Html menu

(XYZ Html plugin menu)

Important Info

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

Highlight and copy your code to the clipboard

(Copy all of the code to your clipboard)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets)

Click on the Add New HTML Snippet button …

'Add New HTML Snippet'

(’Add New HTML Snippet’)

In ‘The Add New HTML Snippet’ screen, give your code snippet a descriptive name (this is for your own reference so you can identify what the snippet is about!), paste the code snippet into the HTML code section and click the Create button …

Insert HTML Snippet - Adding a new HTML Snippet

(Add a new HTML Snippet)

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

Your new HTML Snippets shortcode!

(Add the shortcode to your pages and posts!)

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

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

You can create a new shortcode without having the code.

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

The plugin stores all snippets in a separate list in the plugin’s database. You can view all of your HTML Snippets by selecting XYZ Html > HTML Snippets from your 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 menu to view a list of all your shortcodes)

A table with all the code snippets and shortcodes you have created appear in the ‘HTML Snippets’ admin screen …

Table of snippets

(Table of snippets and shortcodes)

Because code snippets get stored in an independent location (i.e. a separate database), you can add a single snippet to different posts and pages and control everything from one location. If you change the code in your snippet, your code will automatically be updated throughout your content.

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

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

Shortcodes can be embedded into your content in the WordPress visual editor.

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

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

Script added to content via a shortcode

(Script added to content via a shortcode)

Info

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

Edit, deactivate, and delete code snippets

(Deactivate, edit, or delete code snippets)

Notes:

  • If you delete or deactivate a snippet but leave the plugin active, the shortcode will not display in your content. The plugin will automatically fix your posts so that no gaps are visible to your visitors.
  • If the HTML Snippets plugin gets deactivated, your shortcode will display in your content (you will need to manually remove the shortcode wherever it’s been placed).

If you deactivate the plugin itself, the shortcode will display as a line of text in your content

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

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

EmbedIt Pro

EmbedItPro

(EmbedItPro)

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

After installing and activating EmbedIt Pro, a new menu item called HTML Snippets will display in the main menu …

EmbedIt Pro menu

(EmbedIt Pro menu)

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

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

You will see that two new menu items will get added to your Editor menu toolbar: HTML Snippet and Custom Field

The plugin adds new menu buttons to the visual editor toolbar

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

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

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

(Use the HTML Snippet button 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. Select the HTML Snippet you would like inserted into your content and click OK to proceed …

Insert HTML Snippet

(Insert name of the HTML Snippet)

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

Shortcode inserted into content

(Shortcode added to content)

Click the ‘Publish’ or ‘Update’ button to save …

Publish to save your settings

(Publish to save your settings)

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

Voila ... your script has been added!

(Voila … your script has been added!)

While you are logged into your WordPress backend, you should see an ‘Edit Snippet’ button displayed near the section where your code has been inserted. This lets you adjust code “on the fly” (this is useful if you need to change form parameters, resize graphics, etc.)

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

Update code on the fly!

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

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

Edit, update, and 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 your HTML snippets (and import these into other sites) using the Tools > Export function …

Export your Snippets

(Export your Snippets)

Tip #2 (Advanced Users): EmbedIt Pro also uses WordPress Custom Fields to add code to your content.

If you are familiar with how custom fields work, you can paste HTML code into a custom field and place a shortcode into 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

(Add shortcodes to your content with custom fields)

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

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

(Some themes are built with built-in features)

(Some WordPress themes come with built-in functionality)

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

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

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

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

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

Info

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

CSS & Javascript Toolbox

CSS & JavaScript Toolbox Plugin

(CJT Plugin)

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

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

Important Info

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

Note: The first time you try to use CJT, you will be asked to go through an installation process to create the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …

First-time plugin use requires database tables installation

(Database tables must be installed the first time you use the plugin)

After installation, a new menu item called CSS & Javascript Toolbox will display in your WordPress admin menu section as well as a dashboard panel with news and plugin usage information …

CSS & JavaScript Toolbox menu

(CSS & JavaScript Toolbox plugin menu)

Click on CSS & Javascript Toolbox on the menu …

CJT plugin menu

(CSS & JavaScript Toolbox menu)

The CSS & Javascript Toolbox screen will display …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox screen)

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

CJT - Add New Code Block

(CJT – New Code Block)

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 it activated yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and specify 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.). Click Create

'Create New Code Block' window

(‘Create New Code Block’ options)

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

CJT code area

(CJT content area)

Next, select where you would like your code to be inserted (e.g. Pages, Categories, etc …)

Specify where to add your block of code

(Specify where to add your block of code)

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 descriptions of all features) …

Access more plugin features via toolbar icons

(Access more CJT features via toolbar icons)

Click Save All Changes when done to save your code settings …

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

More information:

Idea

Tip: Checking That Your Code Has Been Added Correctly

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

If you have pasted conversion tracking code into areas of your site that are not meant to be visible (like the ”header” section) and you want 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 go to the page where you have added your code.

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

Tools > Developer > Page Source

(Tools > Developer Tools > Page Source)

A new browser opens and displays the source code for the page.

Scroll down the screen until you can see the code that you have added (if adding code to a page header, it will typically be contained  between the <head> and </head> tags) …

Page code

(Page code)

If you can see your code, then the next step is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the 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 adding, changing or deleting code.

Adding Code To Your Posts And Pages

Congratulations, now you know how to easily embed snippets of code into your posts and pages.

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum