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 …

Adding Code Snippets In WordPressOne of the most powerful aspects of using WordPress is that you don’t need to mess with code to build a successful online presence.

There may be situations, however, where you may be required to add a script or code snippet to content in order to add desired functions to your site. Common snippets of code you may want to insert into your content include:

  • Showing today’s date on a special offer page
  • Adding a search box
  • Adding a subscription form
  • Display relevant ads
  • Conversion tracking scripts (e.g. Facebook Ads)
  • etc.

Adding scripts to your content can expand your site's functionality

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

Useful Info

Some script functions can be added through plugins that involve little to no messing with code. In this step-by-step tutorial, you will learn how to add code to your WordPress content. You are also going to learn different plugins that can be used to insert scripts and codes into your content.

Adding Code To WordPress Posts Using The Text Editor

Important Info

Note: We recommend backing up your site before adding any scripts to WordPress. If you don’t want to back up your site manually, then get support from a WordPress professional, or use backup plugins.

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

Important Info

WordPress doesn’t let you add code snippets and scripts (e.g. JavaScript, HTML) directly into the visual editor …

Do not add scripts into the visual editor

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

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

First, locate or create the HTML code you plan to add to your content. You can use a web-based HTML editor (e.g. search online for “HTML Code WYSIWYG Editor“) or use HTML templates

Use an HTML editor or HTML templates to create your code

(Use a free 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 post or page and in the Visual Editor, add a placeholder (e.g. @@@@@) in the the spot where you would like your script to appear in your content (insert a new line) …

Add a placeholder where you want your code to appear in your content

(Add a placeholder to mark the spot where you would like your script to display)

Next, click on the Text editor to paste your code …

Switch to the Text editor to paste your code

(Code must be pasted in the Text editor)

Find your placeholder text and select the entire line …

Select and highlight your placeholder

(Select and highlight your placeholder text)

Paste your HTML code into your content …

Simple HTML code pasted into text

(Simple HTML code pasted into text)

Remember to save the post or page, then preview …

Preview and test any code you add to pages or posts

(Preview and test any code inserted into pages)

To learn more about using basic HTML in WordPress, see this tutorial:

Important

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

Don't use the WordPress text editor to add JavaScript code

(Avoid using the text editor to add Javascript code)

If you paste Javascript code directly into the WP text editor you may find the script doesn’t work correctly.

A better method for adding code to pages and posts is to enter the snippet of code into a plugin that then processes the script from ’shortcodes’ placed in your content.

What Is A Shortcode?

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

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

Shortcode structure

(What a shortcode looks like!)

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

How To Use Shortcodes

How to use WordPress shortcodes

(How a WordPress shortcode works)

The screenshot above explains how to use WordPress shortcodes:

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

[2] After adding the script to the special field and saving, the plugin creates a unique piece of text that will process the script.

[3] Once you have added your shortcode to the content, publish or update your page.

[4] The plugin will now load the code whenever someone comes to your site.

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

How To Insert Code Into Your Pages Using A Plugin

There are several plugins available that allow you to add snippets of code and scripts into WordPress.

Insert Html Snippet

Insert HTML Snippet

(Insert Html Snippet)

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

How this plugin works is that it allows you to create separate 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 anything: calculators, javascript codes, etc.

The tutorial below shows you how to add code to your pages and posts using the Insert Html Snippet plugin.

Inserting Snippets Of Code Into Your WordPress Posts And Pages – Tutorial

Download the plugin here, or use the “Search method” to install the plugin directly from your dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …

Install 'Insert Html Snippet'

(Locate and install the ‘Insert Html Snippet’ plugin)

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 your menu …

XYZ Html menu

(XYZ HTML plugin menu)

Idea

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

Have your code ready

(Select and copy all of the code to your clipboard)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets)

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

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

(’Add New HTML Snippet’)

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

Create a new Snippet

(Creating a new Snippet)

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

HTML Snippets shortcode!

(HTML Snippets shortcode!)

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

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

You can also create a snippet without having code.

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

The plugin stores your snippets in a separate list in the plugin’s database. You can view all of your stored snippets and shortcodes 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 plugin menu to view a list of all your snippets)

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

Table of snippets

(List of snippets)

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

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

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

Shortcodes can be added in the WordPress visual editor.

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

After publishing, preview your content and test the script …

Script added to content using a shortcode

(Script added via a shortcode)

Useful Information

You can edit, deactivate, and delete snippets …

Delete, deactivate, or edit snippets

(Edit, deactivate, or delete your snippets)

Notes:

  • If you delete or deactivate a snippet but leave the HTML Snippets plugin active, the shortcode will not display in your content.
  • If the HTML Snippets plugin itself gets deactivated, your shortcode will display in your content (it will need to be manually deleted).

If you deactivate the HTML Snippets plugin itself, the shortcode will display in your content

(If the HTML Snippets plugin gets deactivated, the shortcode will appear as text in your content)

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

EmbedIt Pro

EmbedIt Pro Plugin For WordPress

(EmbedIt Pro WordPress Plugin)

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

After installing and activating the plugin, a new menu item called HTML Snippets will be added to your menu …

HTML Snippets [EmbedIt Pro] plugin menu

(HTML Snippets [EmbedIt Pro] plugin menu)

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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

Two new buttons will be added to your Editor menu toolbar: HTML Snippet and Custom Field

The plugin adds new menu buttons to the visual editor toolbar

(The plugin adds new menu items to the WordPress 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 place your shortcode in the text …

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

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

A small window will pop up on your screen allowing you to insert any HTML Snippets you have stored. Select the HTML Snippet you would like to add into your content and click the ‘OK’ button to proceed …

Insert HTML Snippet

(Insert HTML Snippet)

The shortcode will be added where the cursor is located …

Shortcode inserted into content

(Shortcode inserted into content)

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

Update to save your settings

(Publish to save your settings)

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

Voila ... your code has been added!

(What your visitors will see)

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

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

Edit scripts on the fly!

(Adjust code “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Make your changes and update. All content will be automatically updated with the new changes …

Update and republish your code to make sitewide changes

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

For more details, go here}:

Useful WordPress Tip

Tip #1: With EmbedIt Pro, you can export HTML snippets (and import these into other sites) using the Tools > Export function …

Export your HTML Snippets

(Export your Snippets to other sites)

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

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

Add shortcodes to your content via custom fields

(Add shortcodes to your posts using custom fields)

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

Many WP themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that have code processing functionality …

(Some themes are built with built-in code insertion functionality)

(Some themes provide built-in features)

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 posts and pages.

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

You can find a number of WordPress plugins that let you add code to the header section of pages. Many of these plugins, however, will add code to all pages or posts, not just the ones you want (some plugins and themes will add the code to every single page and then let you turn the code off for selected pages or posts).

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

Info

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

CSS & JavaScript Toolbox

CJT

(CSS & Javascript Toolbox)

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

The way this plugin works is that it lets you modify your site’s functionality with custom 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: The first time you try to use the plugin, you will be asked to go through a custom installation process to create 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

(First-time plugin use requires installing database tables)

After installation, a new item called CSS & JavaScript Toolbox will be added to the main navigation menu as well as a new dashboard panel with news and information about how CJT is being used on your site …

CSS & Javascript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox

CJT menu

(CSS & Javascript Toolbox plugin menu)

This brings up the CSS & Javascript Toolbox screen …

CSS & JavaScript Toolbox screen

(CSS & JavaScript Toolbox dashboard)

Click on the New Code Block button to begin adding new code …

CJT - Add New Code Block Button

(CJT – New Code Block)

In the ‘Create New Code Block’ window, name 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” (this specifies where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (specify if the script should be added before or after all other code in the header or footer. Options = First Block / Last Block.). After selecting your options, click Create

'Create New Code Block' options

(‘Create New Code Block’ options)

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 the block to be inserted (e.g. Pages, Custom Posts, etc …)

Specify where to insert your block of code

(Specify where to insert your code)

The main plugin dashboard also various icons you can click to access different functions, help, etc. (hover your mouse over the icons for descriptions of all features) …

Access CJT features via the toolbar

(Access more plugin features via toolbar icons)

Click Save All Changes after creating or editing your code block to save your code settings …

CJT - 'Save All Changes' button

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

More info:

Tip

Tip: How To Verify That 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 code into a section of your site like the “header” that is not meant to be visible and you want 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 (we’ll use Firefox in this example) and visit the page containing the code.

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

Viewing page code in Firefox

(Tools > Developer > Page Source)

A new browser window will open up displaying the source code for that page.

Scroll down the screen until you can spot the code that you have added (code added to the header section is typically located  between the <head> and </head> tags) …

How to verify if your scripts have been added correctly

(Verify if your scripts have been added correctly)

If you can see the code, then all that’s left is to test your script and make sure that everything is working correctly. If you experience any errors, repeat the above process and make sure that you have pasted in 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 doing anything that involves changing code.

Embedding Snippets Of Code Into WordPress Content

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

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)