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 Code And Scripts Into WordPress Posts And PagesOne of the benefits of using WordPress is that you don’t need to mess with code to build a successful web presence.

There may be situations, however, where you may decide to insert code into your posts or pages in order to add a particular functionality to your site. Some useful examples where adding scripts to pages could be used to enhance your site include:

  • Current date
  • Adding a search box to your sidebar, post, or page
  • An opt-in form
  • Display relevant ads
  • Tracking code (e.g. Google Adwords)
  • etc.

Adding scripts to pages can expand your site's functionality

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

Info

Some script functions can be added to WordPress using plugins that make handling code easier. In this step-by-step tutorial, you will learn how to easily embed snippets of code into WordPress posts and pages. We’ll also show you different methods that can be used to add code snippets to your content.

Inserting Simple HTML Code Into Your WordPress Pages And Posts Using The Text Editor

Disclaimer

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

Learn about a great WordPress backup plugin that can fully automate your backup process here:

Useful Info

You cannot insert code directly into the WordPress visual editor …

Do not add scripts inside your visual editor

(Do not paste code into the visual editor)

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

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

Use an online HTML editor or HTML templates to create your HTML code

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

Select and copy all of your code to the clipboard …

Copy the code to your clipboard

(Copy your code to the clipboard)

Next, open your page or post and create a new line and add a placeholder (e.g. @@@@@) to mark the location where you want your script to appear …

Add placeholder text to mark the spot where you want your script to appear

(Add placeholder text to mark the location where you want your script to appear in your content)

Next, click on the Text editor …

Switch to the Text editor to paste in code

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

Locate your placeholder text and select the line …

Select and highlight your placeholder

(Select and highlight your placeholder characters)

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

Use the text editor to add simple HTML to your content

(HTML code pasted into text)

Remember to publish your page or post and preview …

Preview and test any code added to posts

(Preview and test any code inserted into your 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 to content, this is not recommended for pasting scripts containing JavaScript code directly into your content (e.g. lead capture forms, etc.) …

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

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

If you paste Javascript code directly into the WordPress text editor you could find the script causes errors.

A better method for adding scripts to WordPress content is to enter the script into a plugin that processes the script using a ‘shortcode’ pasted into your content.

What Is A Shortcode?

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

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

Shortcode format

(What a shortcode looks like!)

Shortcodes allow plugin developers to create complex scripts such as content generators, forms, image tools, etc., which you then add to your content via a simple text code.

How WordPress Shortcodes Work

How WordPress shortcodes work

(How WordPress shortcodes work)

The above explains how to use a shortcode:

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

[2] After pasting the code snippets into the special field and saving, the plugin generates a unique shortcut for calling up this script.

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

[4] WordPress will now load the function.

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

How To Insert Scripts Into Your WordPress Posts Using Plugins

There are a number of plugins that let you add scripts and code into WordPress.

Insert Html Snippet

Insert HTML Snippet Plugin

(Insert HTML Snippet WordPress Plugin)

As the name suggests, Insert Html Snippet lets you easily insert HTML code snippets into a post, page, 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 can store scripts for just about everything: forms and calculators, tracking codes, etc.

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

Embedding Scripts And Code Into WordPress Posts – Step-By-Step Tutorial

Download the plugin here, or install the plugin inside your WP dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Installing 'Insert Html Snippet'

(Install the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

Activate 'Insert Html Snippet'

(Activate ’Insert Html Snippet’)

Once the plugin has been installed, a new menu item called XYZ Html will appear in the main dashboard menu …

XYZ Html plugin menu

(XYZ HTML menu)

Useful Info

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

Have your code ready

(Highlight and copy your code to the clipboard)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets menu)

Click on the Add New HTML Snippet button …

'Add New HTML Snippet'

(Click on the ‘Add New HTML Snippet’ button to create a new snippet)

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

Insert Html Snippet - Creating a new Snippet

(Insert HTML Snippet – Creating a new HTML Snippet)

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

Use the shortcode to add your script to posts and pages!

(Shortcode!)

You can also create a new snippet without having your code yet. This is handy if, for example, you are awaiting approval of the code but would like to publish the pages where your script will eventually display.

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

You can create a new snippet without having a script.

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

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

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

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

A table with all the snippets you have created display in the ‘HTML Snippets’ admin screen …

Snippets list

(Snippets table)

Because code snippets get stored in an independent location (i.e. a separate database), you can embed a single shortcode into multiple pages and posts and control everything from a single location. If you alter the code and update the snippet, the script will automatically be updated wherever the shortcode has been added.

Shortcodes can be pasted into content inside the WordPress visual editor.

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

Shortcodes can be pasted in the WordPress visual editor.

( Paste shortcodes into your content directly inside the WordPress visual editor.)

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

Script added to content via a shortcode

(Script added via a shortcode)

Important

You can delete, deactivate, and edit your code snippets …

Deactivate, delete, or edit code snippets

(Deactivate, delete, and edit your code snippets)

Note:

  • If you deactivate or delete a snippet but leave the HTML Snippets plugin active, your shortcode will not display in your content. The plugin will fix the content so that it will not be noticeable to your visitors.
  • If you deactivate the HTML Snippets plugin, your shortcode will appear in your content and will need to be manually deleted.

If the HTML Snippets plugin gets deactivated, the shortcode will appear in your content

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

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

EmbedIt Pro

EmbedItPro - WordPress Plugin

(EmbedItPro Plugin For WordPress)

EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some additional features.

After installing and activating the plugin, a new menu item called HTML Snippets will appear in the main dashboard menu …

EmbedIt Pro plugin menu

(HTML Snippets [EmbedIt Pro] plugin menu)

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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

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

The plugin adds new menu items to the visual editor toolbar

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

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

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

(You can use the HTML Snippet button to insert a shortcode into your pages.)

A pop-up window will display on your screen allowing you to insert any of the HTML Snippets you have created. Type in the name of the HTML Snippet you would like to embed into your page or post and click OK to proceed …

Insert HTML Snippet

(Insert name of the HTML Snippet)

The shortcode will be inserted in the location you have specified …

Shortcode inserted into content

(Shortcode inserted into content)

Click Publish/Update to save …

Publish to save your settings

(Publish to save your settings)

View your post or page. The script should display in your content …

Content with script added

(Voila … your code has been added!)

While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed near the area where your code has been inserted. This lets you modify code “on the fly” (this is useful if you need to edit form elements, video sizes, etc.)

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

Change scripts on the fly!

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

This will take you to the Edit HTML Snippet screen. Make your changes and resave. All pages and posts will automatically update with the new changes …

Edit republish your code to make global changes

(Edit republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

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

Export your Snippets

(Export your HTML Snippets)

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

If you are familiar with custom fields, you can add your code to a custom field and use a shortcode in your content with the “Custom Field” menu 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 using custom fields

(Add shortcodes to your posts with custom fields)

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

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

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

(Some WordPress themes come with built-in functionality)

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

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

Some applications, however, require that code be added not only to content but also to areas such as page headers, footers, etc. (for example, landing pages, opt-in confirmation pages, and so.)

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, will add code to all posts or pages, not just the ones you want (some plugins will add the code to every page and then let you turn the code on/off on selected pages).

If you need to add code or 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.

Important Info

The information 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 Plugin For WordPress

(CJT Plugin)

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

The way this plugin works is that it allows you to modify or extend your site’s functionality and appearance with custom code blocks that you can assign to individual posts, pages, custom posts, categories, URLs, expressions, and more!

Info

For comprehensive documentation and user manual, go here:

Note: Before using the plugin, you will need to go through an 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 you use the plugin

(Database tables will need to be installed the first time you use the plugin)

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

CSS & Javascript Toolbox plugin menu

(CSS & Javascript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox on the menu …

CJT plugin menu

(CJT menu)

This brings up the CSS & JavaScript Toolbox screen …

CSS & Javascript Toolbox screen

(CSS & Javascript Toolbox screen)

Click on New Code Block to begin adding new code …

CJT - Add New Code Block Button

(CJT – Add New Code Block Button)

In the ‘Create New Code Block’ window, enter a name, select the checkbox to activate it (or leave it unchecked if you don’t want to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (this lets you specify whether 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 area will appear. Paste your code or script into this section …

CJT code field

(CJT content area)

Next, select where you would like to insert your code (e.g. in specific Pages, Custom Posts, etc …)

Select where to insert your block of code

(Specify where to add your code)

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

Access plugin features via the toolbar menu

(Access more plugin features via toolbar icons)

Click Save All Changes when you have finished creating or editing a code block to save your settings …

Click 'Save All Changes' to save your settings

(CJT – ‘Save All Changes’ button)

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

Useful Info

Tip: Verifying That Your Scripts Have Been Added Correctly

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

If you have pasted conversion tracking code into an area like the “header” that is not meant to be visible and you need to check if the code has been added correctly, then here’s how to do it:

How To View Hidden Code In Firefox

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

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

Tools > Developer Tools > Page Source

(Tools > Developer Tools > Page Source)

A new browser opens with the source code displayed.

Scroll down until you can see the code that you have added (code added to the header section is normally placed  between the <head> and </head> tags) …

Source code

(How to check if you have added your scripts 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 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 Snippets Of Code In WordPress Pages And Posts

Congratulations, now you know how to add code snippets to your pages.

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

How To Create Engaging PresentationsHow To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

WordPress SEOWordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

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