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 Scripts And Snippets Of Code To Your WordPress Pages And PostsOne of the best reasons for using WordPress is that you don’t need to have technical skills like editing code to run a successful website.

You could come across times, however, where you may decide to embed code into your posts or pages in order to benefit from specific features. Typical snippets of code you may want to add to your website include:

  • Today’s date
  • Adding a Google search box
  • Subscription forms
  • Display contextual advertising banners
  • Analytics scripts (e.g. Google Analytics)
  • etc.

Adding code to pages can give your site additional functionality

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

Info

In this tutorial, you will learn how to easily add scripts to your WordPress pages and posts with and without plugins.

Adding Simple Code To Your WordPress Posts And Pages Using The Text Editor

Important Info

Note: Before adding any code snippets to WordPress we recommend backing up your site first. If you don’t want to back up your files manually, then get professional WordPress assistance, or use a WordPress backup plugin.

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

Info

Code cannot be inserted directly into the WordPress visual editor …

Pasting code inside your visual editor will not work

(Pasting code inside the WordPress visual editor will not work)

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

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

You can use a simple HTML editor or HTML templates to create your code

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

Copy all of your code to the clipboard …

Copy all of the code to your clipboard

(Copy your code to the clipboard)

Next, open your page or post and add placeholder text to mark the spot where you want your code to display in your content …

Add placeholder symbols to mark the spot where you want your script to display in your content

(Add placeholder symbols to mark the location where you would like your code to appear)

Click on the Text tab to switch to the Text editor …

Switch to the Text editor to paste your code

(Switch to the Text editor to paste your code)

Locate your placeholder and select the line …

Select and highlight your placeholder

(Select and highlight your placeholder)

Paste the code into your content …

Paste the code into your text

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

Save your post, then preview …

Preview and test any code added to your posts or pages

(Preview and test any code you add to content)

If you need help using basic HTML, go here:

Important

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

Don't use the WordPress text editor to add Javascript code ... use other methods instead!

(Don’t use the text editor to add Javascript code)

Pasting complex directly into the text editor can lead to errors.

A better solution for embedding scripts into WordPress posts and pages is to enter the code into a plugin that automatically processes the script from a ‘shortcode’ pasted into your content.

What Is A Shortcode?

’Shortcodes’ are code shortcuts that allow users to perform complex functions with no coding skills or knowledge. Shortcodes are typically used in posts, widgets, and pages to trigger complex scripts into action.

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

What a shortcode looks like

(Shortcode)

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

How A Shortcode Works

How to use WordPress shortcodes

(How a WordPress shortcode works)

The above explains how to use WordPress shortcodes:

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

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

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

[4] The plugin will now call up the code snippet every time someone visits your site.

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

Adding Snippets Of Code To Your WordPress Posts And Pages Using A Plugin

In this section, you will learn how to embed code and scripts into WordPress using various free WordPress plugins.

Insert Html Snippet

Insert Html Snippet Plugin For WordPress

(Insert HTML Snippet WordPress Plugin)

As the plugin name suggests, Insert HTML Snippet lets you easily insert HTML code into a post, page, or a sidebar widget.

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 are objects that can store codes and scripts for just about anything: video embed codes from YouTube, custom javascript codes, etc.

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

Adding Scripts And Code To Your WordPress Pages And Posts – Insert Html Snippet Plugin Tutorial

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

Installing the 'Insert Html Snippet' plugin

(Install the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate the plugin

(Activate the ‘Insert Html Snippet’ plugin)

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

XYZ Html plugin menu

(XYZ HTML menu)

Useful Info

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

Have your code ready to paste into the plugin

(Copy your code to the clipboard)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets menu)

The ‘HTML Snippets’ screen loads in your web browser. Click on the Add New HTML Snippet button to create a new shortcode …

'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 code snippet (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 …

Add a new Snippet

(Insert Html Snippet – Creating a new Snippet)

This creates and publishes a new HTML snippet as a shortcode

Paste the shortcode into your pages and posts!

(HTML Snippets shortcode!)

You can also create a snippet without having code. 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 show up.

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

You can create a snippet without having the code.

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

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

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

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

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

Snippets table

(Snippets and shortcodes list)

Because snippets are stored in an independent location (i.e. a separate database), you can embed one shortcode into a number of pages and posts and control everything from a single location. If you edit the snippet code, whatever is controlled by the snippet will automatically update wherever the shortcode has been added.

You can embed shortcodes into content in the WordPress visual editor.

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

You can paste shortcodes into content in the WordPress visual editor.

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

After publishing, preview your content and test your script …

Script added to content via a shortcode

(Script added to content using a shortcode)

Info

As well as modifying snippet codes, you can deactivate and delete your snippets …

Deactivate, delete, or edit your snippets

(Deactivate, edit, or delete your snippets)

Note:

  • If you delete or deactivate a snippet but the plugin is left active, the shortcode will not display in your content. The plugin will automatically fix the content so that it will not be noticeable to visitors.
  • If you deactivate the plugin itself, your shortcode will show up as a line of text in your content (you will need to manually delete the shortcode wherever it’s been placed).

If you deactivate the HTML Snippets plugin, your shortcode will show up as a line of text in your content

(If the HTML Snippets plugin is deactivated, the shortcode text will display in your content)

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

EmbedIt Pro

EmbedIt Pro Plugin

(EmbedItPro WP Plugin)

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

Once the plugin has been installed and activated, a new menu item called HTML Snippets will display in your navigation menu …

EmbedIt Pro menu

(EmbedIt Pro plugin menu)

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

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

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

The plugin adds new menu items to the visual editor

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

You can use the HTML Snippet button to add shortcodes to your content. With the cursor location selected, click on the HTML Snippet button to select and place your code snippet in the text …

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

(Use the menu buttons to place a shortcode into your posts.)

A 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 want embedded into your page or post and click OK to proceed …

Insert your HTML Snippet

(Insert your HTML Snippet)

The shortcode will be placed in the location of your cursor …

Shortcode inserted into content

(Shortcode added to content)

Click Publish/Update to save …

Publish to save your settings

(Publish to save your settings)

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

Content with script added

(What your visitors will see)

While you are logged into your site, an ‘Edit Snippet’ button should display near the section where your code snippet has been inserted. This lets you adjust your script “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 …

Edit code on the fly!

(Change code “on the fly”!)

This takes you to the Edit HTML Snippet screen. Make your changes and save. All content will update automatically with the changes …

Edit, update, and republish your code to make global changes

(Edit republish your code to make sitewide changes)

For more details, go here}:

Useful WordPress Tip

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

Export your HTML Snippets

(Export your Snippets to other sites)

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

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

Add shortcodes to your posts via custom fields

(Embed shortcodes into your content with custom fields)

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

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

(Some themes provide built-in code adding functionality)

(Some WordPress themes come with 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 WordPress pages and posts.

Some applications, however, require that code be inserted into 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 plugins that let you add code to headers and footers of your 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 will add the code to all pages and then let you turn the code off on selected pages or 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.

Important

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

CSS & JavaScript Toolbox

CSS & JavaScript Toolbox Plugin For WordPress

(CJT)

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

The way CJT works is that it allows you to modify your site’s functionality by adding custom code via code blocks that can be assigned to individual posts, pages, custom posts, categories, URLs, expressions, and much more!

Important

For comprehensive documentation and user manual, go here:

Note: When you first try using the plugin, you will need to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ and the plugin will take care of the rest …

Database tables will need to be installed the first time you use CJT

(Database tables need to be installed the first time CJT is used)

After installation, a new item called CSS & JavaScript Toolbox will be added to the dashboard menu as well as a dashboard panel with latest news and plugin usage information …

CJT plugin menu

(CSS & JavaScript Toolbox menu)

Click on CSS & Javascript Toolbox

CSS & JavaScript Toolbox plugin menu

(CSS & JavaScript Toolbox 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 custom code to your site …

CJT - Add New Code Block Button

(CSS & Javascript Toolbox – 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 select the “Initial Block Position” (this allows you to specify whether 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' options

(‘Create New Code Block’ window)

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

CJT content area

(CJT code field)

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

Select where to add your code

(Specify where to insert your block of code)

The plugin dashboard also has a number of icons you can click to access different features, help, etc. (hover your mouse over the icons for feature descriptions) …

Access CJT features via toolbar icons

(Access more plugin features via the toolbar)

Click the ‘Save All Changes’ button when done to save your settings …

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

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

Important

Tip: How To View Your Code

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

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

How To View Source Code In Firefox

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

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

Tools > Developer > Page Source

(Tools > Developer Tools > Page Source)

A new browser window opens up displaying the source code for the page.

Use the search function (Ctrl+F) or 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) …

Source code

(Verifying if you have added your code correctly)

If you can see your 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 problems, repeat the process and make sure that you have inserted your code correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your site before doing anything that involves changing code.

How To Insert Snippets Of Code Into WordPress Posts And Pages

Congratulations! Now you know how to add scripts to your content.

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

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

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

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

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.