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 …

Inserting Code Snippets And Scripts Into Your WordPress PostsOne of the most powerful aspects of using WordPress is that you don’t need to mess with code to manage a website successfully.

You could come across occasional situations, however, where you may need to paste a block of code into content in order to get a certain outcome. Some useful examples of code snippets you may want to insert into your posts or pages include:

  • Special offer expiry time
  • Adding a Google search box
  • Adding a lead capture form
  • Display contextual ads
  • Tracking scripts (e.g. Google Adwords)
  • etc.

Adding scripts to your pages can give your site additional functionality

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

Useful Info

In this tutorial, you will learn how to easily add snippets of code to your WordPress posts and pages.

Adding Simple Code To Your Content Using The Text Editor

Disclaimer

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

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

Useful Info

Code cannot be inserted directly into the WordPress visual editor …

Pasting scripts into your visual editor does not work

(Do not insert scripts inside your visual editor)

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

First, find or create the HTML code you would like to add to your content. You can use an online HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or consider using HTML templates

Use a free web-based HTML editor or HTML templates to create your code

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

Highlight and copy all of the code to your clipboard …

Select and copy all of the code to your clipboard

(Select and copy your code to the clipboard)

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

Add placeholder text where you want your script to display

(Add a placeholder to mark the location where you want your code to display in your content)

Click on the Text tab …

Switch to the Text editor to paste code

(Switch to the Text editor to paste in code)

Locate and select the placeholder …

Select and highlight your placeholder text

(Select and highlight the line containing the placeholder)

Paste the code over your selected placeholder …

Use the text editor to add simple HTML to your content

(HTML code pasted into text)

Save the post or page, then preview and test the results …

Preview and test any code inserted into posts or pages

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

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

Important

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

Avoid using the text editor to add Javascript code

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

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

A smarter way to add scripts to WordPress pages and posts is to enter the snippet of code into a plugin that lets you “call” the script using a ‘shortcode’ added to your content.

Shortcodes

A ‘shortcode’ is a code shortcut. It allows you to trigger complex files without coding or programming knowledge. Shortcodes are typically used in widgets, posts, and pages to trigger a complex script into action.

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

What a WP shortcode looks like

(What a shortcode looks like!)

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

How A Shortcode Works

How a shortcode works

(How a WordPress shortcode works)

The screenshot above explains how to use a WordPress shortcode:

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

[2] After pasting the code snippets into the field and saving, the plugin generates a unique text-based shortcut that lets your site call up this script.

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

[4] WordPress will now automatically process your code.

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

Adding Snippets Of Code And Scripts To Your WordPress Posts Using Plugins

Let’s now show you how to insert scripts and snippets of code into WordPress using free WordPress plugins.

Insert HTML Snippet

Insert Html Snippet Plugin For WordPress

(Insert HTML Snippet Plugin For WordPress)

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

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 codes and scripts for just about everything: codes for embedding image galleries, javascript codes, etc.

The step-by-step tutorial below shows you how to use the Insert HTML Snippet plugin.

Adding Code Snippets And Scripts To Your WordPress Posts – Step-By-Step Tutorial

Download the plugin here, or locate and install the plugin directly from your dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Installing 'Insert Html Snippet'

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

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate ’Insert Html Snippet’)

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

XYZ Html plugin menu

(XYZ HTML menu)

Important Info

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

Have your code ready to paste into the plugin

(Have your code ready)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets)

Click on Add New HTML Snippet

'Add New HTML Snippet'

(Click on ‘Add New HTML Snippet’ to create a new shortcode)

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

Insert Html Snippet - Creating a new Snippet

(Create a new HTML Snippet)

Your HTML Snippet will be saved and published as a shortcode

Shortcode!

(Shortcode!)

You can also create a new shortcode without having your script yet. This is useful if, for example, you are waiting for approval of the code but would like to go ahead and create the  content where your script will eventually appear.

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

You can create a shortcode without having the code.

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

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

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

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

A list of all your code snippets appear in the ‘HTML Snippets’ admin screen …

List of snippets

(Table of snippets and shortcodes)

Because code snippets are stored in an independent location (i.e. a separate database), you can add the same snippet to various posts or pages and control everything from a single location. If you edit the code in your snippet, your code will automatically update wherever the shortcode has been added.

You can add shortcodes to your 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 place your mouse cursor where you would like your code inserted …

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

(You can embed shortcodes into your content directly in the WordPress visual editor.)

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

Script added to content via a shortcode

(Script added to content via a shortcode)

Important

You can delete, edit, and deactivate snippets …

Deactivate, delete, and edit code snippets

(Deactivate, delete, and edit code snippets)

Note:

  • If you deactivate or delete a snippet but leave the plugin active, the shortcode will not display in your content. The plugin will automatically fix your pages so that no gaps in the content will be detected by visitors.
  • If you deactivate the plugin, your shortcode will show up as a line of text in your content (you will need to manually remove the shortcode wherever it’s been added).

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

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

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

EmbedIt Pro

EmbedIt Pro

(EmbedItPro Plugin For WordPress)

EmbedIt Pro gives you similar functionality to the previously described plugin, with some additional features.

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

EmbedIt Pro menu

(EmbedIt Pro menu)

To create a new shortcode, click on HTML Snippets > Add New, add your script, give your snippet a name and click Publish

Shortcode - EmbedIt Pro

(EmbedIt Pro Shortcode)

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

The plugin adds new menu buttons to the visual editor toolbar

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

Use the HTML Snippet button to place shortcodes into your posts. With the cursor location selected, click on the HTML Snippet button to select and insert your snippet into your text …

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

(You can use the menu buttons to place shortcodes into your content.)

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

Insert your HTML Snippet

(Insert name of the HTML Snippet)

Your shortcode will be inserted where your cursor is located …

Shortcode inserted into content

(Shortcode inserted into content)

Click Publish or Update 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 in the specified location …

Content with script added

(Voila … your code has been added!)

While you are logged into your site, an ‘Edit Snippet’ button should display near where your code snippet has been added. This allows you to make adjustments to code “on the fly” (this is useful if you need to change code elements, resize images, etc.)

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

Adjust scripts on the fly!

(Update scripts “on the fly”!)

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

Update and republish your code to make global 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 your snippets (and import these into other sites) using the Tools > Export function …

Export your HTML Snippets

(Export your HTML Snippets)

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

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

Embed shortcodes into your posts via custom fields

(Add shortcodes to your content via custom fields)

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

Many WordPress themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that let you embed raw code into your pages …

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

(Some WordPress themes offer built-in code adding 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 WordPress 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 headers, footers, etc.

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

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

Useful Info

The information below is for advanced users. If you need help adding scripts to your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CJT - WordPress Plugin

(CJT – WordPress Plugin)

CSS & JavaScript Toolbox (or CJT) is a powerful and flexible plugin that lets you add code elements to your WordPress installation coding structure using an easy-to-use web interface.

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

Important Info

For comprehensive documentation and user manual, go here:

Note: The first time you try to use the plugin, you will need to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …

Database tables must be installed the first time you use CJT

(First-time plugin use requires installing database tables)

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

CJT menu

(CJT plugin menu)

Click on CSS & Javascript Toolbox

CSS & Javascript Toolbox plugin menu

(CJT plugin menu)

The CSS & JavaScript Toolbox dashboard will load …

CSS & JavaScript Toolbox screen

(CSS & Javascript Toolbox screen)

Click on New Code Block to add custom code to your site …

CJT - Add New Code Block Button

(CJT – Add New Code Block Button)

In the ‘Create New Code Block’ window, type a name, 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 specify 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.). 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 area …

CJT code area

(CJT content area)

Next, select where you want to insert the block (e.g. in specific Pages, Categories, etc …)

Specify where to insert your code block

(Specify where to insert your code block)

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

Access more CJT functionality via the toolbar

(Access more plugin functionality via toolbar icons)

Click Save All Changes 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 help and support with this plugin, visit the developer’s site here:

Info

Tip: How To View Your Code

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

If you have added conversion tracking code to an area of your site like the “header” that is not meant to be visible and you would like to check if the code has been added correctly, then do the following:

How To View Hidden Page Code In Firefox

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

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

Viewing hidden page code in Firefox

(Viewing page code in Firefox)

A new window opens up and displays the source code for the page.

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

Verifying if you have added your code correctly

(How to view your code)

If you can see the code, then the next step is to test your script and make sure that everything is working correctly. If you experience any errors, repeat the process to make sure that you have embedded the code correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your files and database before doing anything that involves changing code.

How To Add Scripts & Code In WordPress Content

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

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

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

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

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

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