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 Add Code To WordPress PostsOne of the main advantages of using WordPress is that you don’t need to have technical skills like editing code to build a successful web presence.

You could come across a situation, however, where you may decide to add a snippet of code to content in your posts or pages in order to benefit from desired features or functionality. Some common examples where inserting scripts into pages can be used to extend the functionality of your site include:

  • Showing the current date and time on your special offer page
  • Adding a Google search box
  • A subscription form
  • Display contextual advertising
  • Tracking code (e.g. Google Adwords)
  • etc.

Adding code to pages can expand your site's functionality

(Adding scripts to your content can give you additional functionality)

Important Info

In this step-by-step tutorial, we show you how to add code to your WordPress pages and posts. We will also show you different plugins that can be used to add scripts to your content.

How To Add Simple Code Snippets To WordPress Posts Manually

Important Info

Note: Before adding any code or scripts to WordPress we recommend backing up your files and database first. If you don’t want to back up your site yourself, then consider using a professional, or use a WordPress backup plugin.

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

Info

You cannot embed code directly into the WordPress visual editor …

Do not insert code inside the WordPress visual editor

(Pasting scripts into your visual editor will not work)

You can, however, place simple HTML code into your content through 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 web-based HTML editor (e.g. search online for “Best Free Online HTML WYSIWYG Editor“) or consider using HTML cheat sheets

Use a free online HTML editor or HTML templates to create your HTML code

(You can use a free web-based HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)

Copy all of your code to the clipboard …

Highlight and copy all of the code to your clipboard

(Copy all of the code to your clipboard)

Next, open your post or page and select the exact location where you want your script to appear in your content. Create a new line and add some placeholder text (e.g. @@@@@) …

Add placeholder characters where you would like your script to appear in your content

(Add placeholder text to mark the spot where you would like your code to display in your content)

Click on the Text editor …

Code must be pasted in the Text editor

(Switch to the Text editor to paste your code)

Locate the placeholder and select the entire line …

Select and highlight the line containing the placeholder

(Select and highlight the line containing the placeholder text)

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

Paste your HTML code into your text

(Paste your HTML code over the selected placeholder)

Save and publish the post, then preview …

Preview and test any code you add to your posts

(Preview and test any code added to pages)

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

Important

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

Avoid using the WordPress text editor to add Javascript code ... use the methods below instead!

(Don’t use the text editor to add Javascript code … use other methods instead!)

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

A better way to add scripts to posts and pages is to use a plugin that ”calls” the script using ’shortcodes’ added to your content.

What’s A Shortcode?

A ‘shortcode’ is a simple bit of code that allows users to perform complex functions without coding skills. Shortcodes can typically be added to pages, posts, and widgets to trigger complex scripts into action.

A shortcode normally looks like a little bit of text wrapped in square brackets, e.g. ‘[ezformshortcode]’ …

Shortcode

(WordPress shortcode)

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

How WordPress Shortcodes Work

How a shortcode works

(How a WordPress shortcode works)

The above explains how WordPress shortcodes work:

[1] You install a plugin that lets you paste a snippet of code into a special field (we’ll show you an example of this in the tutorial below)

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

[3] Copy the shortcode to your clipboard and paste it into a new or existing page, post, or widget where you would like the function to appear and publish.

[4] The plugin will now call up your script.

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

Inserting Code Snippets Into Your WordPress Pages And Posts Using A Plugin

There are several plugins that allow you to embed code snippets into your posts and pages.

Insert Html Snippet

Insert Html Snippet - WordPress Plugin

(Insert Html Snippet – WordPress Plugin)

As the name suggests, this plugin lets you add code into posts, pages and sidebar widgets.

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

HTML snippets can store code for just about anything: calculators, forms, javascript codes, etc.

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

Inserting Code Snippets Into Your Pages And Posts – Insert Html Snippet Tutorial

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

Installing the 'Insert Html Snippet' plugin

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

Activate the plugin …

Activate 'Insert Html Snippet'

(Activate the plugin)

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

XYZ Html menu

(XYZ HTML plugin menu)

Important Info

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

Highlight and copy your code to the clipboard

(Have your code ready to use)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen will appear. Click on the Add New HTML Snippet button …

'Add New HTML Snippet'

(’Add New HTML Snippet’)

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

Insert HTML Snippet - Create a new Snippet

(Adding a new HTML Snippet)

Your new HTML Snippet will be created and published as a shortcode

Paste the shortcode into your pages and posts!

(HTML Snippets shortcode!)

You can also create a new snippet without having a script. This is useful if, for example, you are awaiting approval of the code but would like 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 content then publish. After your code has been approved, you can then edit the snippet and replace the content …

You can also create a new snippet without having the code.

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

After creating new snippets the plugin will store it in a separate list in the plugin’s database. You can view your HTML Snippets and shortcodes by selecting XYZ Html > HTML Snippets from the dashboard menu …

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

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

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

Snippets list

(List of snippets and shortcodes)

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

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

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

 Add shortcodes to your content in the WordPress visual editor.

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

After publishing, preview your content and test your script …

Script added to content using a shortcode

(Script added using a shortcode)

Useful Info

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

Edit, deactivate, and delete your snippets

(Deactivate, delete, and edit snippets)

Notes:

  • 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 your posts so that it will not be noticeable to your visitors.
  • If the plugin itself gets deactivated, your shortcode will appear as a line of text in your content and will need to be manually removed.

If the plugin is deactivated, the shortcode will show up in your content

(If the HTML Snippets plugin gets deactivated, 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

(EmbedItPro Plugin For WordPress)

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

After the plugin has been installed, a new menu item called HTML Snippets will appear in the dashboard menu …

EmbedIt Pro plugin menu

(HTML Snippets [EmbedIt Pro] plugin menu)

To create a shortcode, click on HTML Snippets > Add New, paste your script, give your snippet a title and click the Publish (or Update) …

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

You will notice that a couple of new menu buttons have been added to your Visual Editor toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro 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 add a shortcode to your pages. With the cursor location selected, click on the HTML Snippet button to select and place the snippet into the text …

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

(You can use the menu buttons to insert shortcodes into your pages.)

A window will pop up on your screen allowing you to insert any of the HTML Snippets you have stored. Select the HTML Snippet you want inserted into your page/post and click the ‘OK’ button to continue …

Insert HTML Snippet

(Insert HTML Snippet)

The shortcode will be inserted where your cursor is located …

Shortcode inserted into content

(Shortcode added to content)

Click Publish/Update to save …

Update to save your settings

(Publish to save your settings)

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

What your visitors will see

(Content with script 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 update scripts “on the fly” (this is useful if you need to change form parameters, image sizes, etc.)

To edit your code, click the Edit Snippet button …

Modify code on the fly!

(Edit scripts “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Edit the script and update. Everywhere your shortcut has been added will be automatically updated with your new changes …

Update and republish your code to make sitewide changes

(Update and republish your code to make sitewide changes)

For more details, go here}:

Useful WordPress Tip

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

Export your Snippets to other WordPress sites

(Export your Snippets to other sites)

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

If you know how custom fields work, you can paste your HTML code into 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 content with custom fields)

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

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

(Some WordPress themes are built with built-in code adding features)

(Some themes provide built-in features)

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

With a plugin like EmbedIt Pro, you easily add code to content inside your posts and pages.

Some applications, however, require that code be inserted into content but also to areas such as page headers, footers, etc. (for example, completed order pages, confirmation pages, and so.)

You can find a number of WordPress plugins that allow you to add code to headers and footers of your pages and posts. Many of these plugins, however, add code every page on your site, not just the ones you want (check the plugin’s settings – some plugins and themes will add the code to all pages and then let you turn the code on/off for selected pages and posts).

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

Info

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

CSS & Javascript Toolbox

CSS & JavaScript Toolbox Plugin For WordPress

(CJT Plugin For WordPress)

CSS & JavaScript Toolbox (or CJT) lets you add code to your WordPress installation code using a reasonably easy-to-use web interface.

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

Useful Info

For comprehensive documentation, go here:

Note: Before using CJT, 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’ and the plugin will take care of the rest …

Database tables must be installed the first time CJT is used

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

After installation, a new item called CSS & Javascript Toolbox will appear in the menu as well as a dashboard panel with news and plugin usage information …

CSS & JavaScript Toolbox plugin menu

(CJT menu)

Click on CSS & JavaScript Toolbox on the menu …

CSS & Javascript Toolbox plugin menu

(CJT plugin menu)

This loads the CSS & JavaScript Toolbox dashboard …

CSS & Javascript Toolbox screen

(CSS & JavaScript Toolbox screen)

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

CSS & Javascript Toolbox - New Code Block

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

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 specify the “Initial Block Position” (this allows you to specify if 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' window

(‘Create New Code Block’ options)

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

CJT code field

(CJT code field)

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

Specify where to add your code block

(Select where to insert your code block)

The plugin screen 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 more plugin functionality via the toolbar

(Access more plugin functionality via the toolbar menu)

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

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

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

Useful Information

Tip: Checking That You Have Added Scripts Correctly

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

If you have added conversion tracking code to areas of your site that are 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:

Viewing Hidden Code In Firefox

First, open up your internet browser (we’ll use Firefox in this example) and visit the page where you have added the code.

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

Tools > Developer Tools > Page Source

(Viewing source code in Firefox)

A new window will open up with the page code displayed.

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

Source code

(Source code)

If you can see the code, then all that’s left is to test your script and make sure that everything is working as it should. If you experience any errors, repeat the above process to make sure that you have pasted in the code correctly, or get a professional to help you. As stated earlier in this tutorial, always back up your files and database before adding, changing or deleting code.

Inserting Snippets Of Code Into WordPress

Congratulations, now you know how to easily embed scripts into your posts.

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

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

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

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

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

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. 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.