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 …

Get Thrive Leads for WordPress

Adding Code Snippets And Scripts To WordPress PostsOne of the most powerful aspects of using WordPress is that you don’t need to mess with code to run your site.

There could be instances, however, where you may be required to add a code snippet or script to content inside your posts in order to add certain additional functionalities. Useful snippets of code you may want to add to your site include:

  • Today’s date
  • Adding a search box
  • Adding subscription forms
  • Display relevant ads
  • Analytics scripts (e.g. Google Analytics)
  • etc.

Adding scripts to pages can help expand your site's functionality

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

Useful Information

In this tutorial, you will learn how to embed code snippets into WordPress pages and posts with and without plugins.

Inserting Simple HTML Code Into Your WordPress Pages And Posts - Manual Method

Important

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 data manually, then consider getting professional WordPress support, or use a backup plugin.

You can read about a great WordPress backup plugin that we recommend using to perform automated WordPress file and database backups here:

Info

Scripts cannot be added directly into the WordPress visual editor …

Do not add scripts inside the visual editor

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

You can, however, add simple HTML code to the text editor. To add HTML 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 HTML editor (e.g. search online for “HTML Editor“) or consider using HTML cheat sheets

You can use a web-based HTML editor or HTML templates to create your HTML code

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

Copy all of the code to your clipboard …

Highlight and copy all of the code to your clipboard

(Highlight and copy the code to your clipboard)

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

Add placeholder symbols to mark the location where you would like your script to appear in your content

(Add placeholder symbols to mark the location where you would like your script to display in your content)

Next, click on the Text editor …

Switch to the Text editor to paste in your code

(Switch to the Text editor to paste in code)

Locate the placeholder and select the line …

Select and highlight the line containing the placeholder symbols

(Select and highlight the line containing the placeholder)

Paste the code into your content …

Use the text editor to embed simple HTML into your content

(Simple HTML code pasted into text)

Publish your page or post and preview the results …

Preview and test any code added to posts

(Preview and test any code you add to your pages)

If you need help using basic HTML in WordPress, go here:

Important

While the above can be used to add simple HTML code to your content, we do not recommend pasting complex scripts directly into your content (e.g. subscriber forms, etc.) …

Don't use the WordPress text editor to add JavaScript code ... use the methods described below instead!

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

Pasting JavaScript code directly into the WP text editor could lead to errors.

A smarter method for embedding scripts into posts and pages is to enter the code snippet into a plugin that will “call” the script from a ‘shortcode’ pasted into your content.

Shortcodes

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

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

What a shortcode looks like

(This is what a WordPress shortcode looks like!)

Shortcodes allow plugin developers to create complex scripts such as user forms, image galleries, content formatting tools, etc., which you then insert into your content using a short text string.

How A WordPress Shortcode Works

How a shortcode works

(How a shortcode works)

The screenshot above explains how to use a WordPress shortcode:

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

[2] After adding the code to the special field and saving, the plugin generates a unique shortcode that will process this script.

[3] Next, copy this shortcode to your clipboard and paste it into any pages, posts, or widgets where you would like the script to display and publish.

[4] WordPress will now automatically call up your function whenever someone loads the post or page on their browser.

Shortcodes are great because you don’t have to mess with the actual script … simply add the shortcode where you would like the code to appear and WordPress does the rest!

How To Add Scripts To WordPress Posts And Pages Using A Plugin

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

Insert Html Snippet

Insert Html Snippet WordPress Plugin

(Insert Html Snippet WordPress Plugin)

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

This plugin lets you create unlimited HTML snippets and add them to your content using shortcodes or custom fields.

HTML snippets are objects that can store code for just about everything: a video embed code, javascript codes, etc.

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

How To Add Code To Your WordPress Pages – Step-By-Step Tutorial

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

Installing 'Insert Html Snippet'

(Installing ’Insert Html Snippet’)

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the plugin)

After installing and activating the plugin, a new menu item called XYZ Html will display in your dashboard menu …

XYZ HTML plugin menu

(XYZ HTML plugin menu)

Tip

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

Have your code ready to paste into the plugin

(Copy the code to your clipboard)

To create a new 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 to create a new snippet …

'Add New HTML Snippet'

(’Add New HTML Snippet’)

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

Creating a new Snippet

(Add a new Snippet)

This saves and publishes your HTML Snippet as a shortcode

Paste this shortcode into your posts and pages!

(Your new HTML Snippets shortcode!)

You can also create a new shortcode without having code. This is useful if, for example, you are awaiting approval of the code but want to go ahead and get pages created where your code will eventually display.

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

You can create a snippet without having code.

(You can create a 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 main menu …

Click on XYZ Html > HTML Snippets to view a list of all your snippets

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

A table of all the snippets you have created will be displayed in the ‘HTML Snippets’ admin screen …

Table of snippets

(Table of snippets and shortcodes)

Because code snippets are stored in an independent location (i.e. the plugin’s database), you can use a single snippet in various pages and posts and control everything from one location. If you edit your code and update the snippet, whatever code is in the snippet will automatically update in every instance where you have added the shortcode.

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

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

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

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

After publishing, preview and test your script …

Script added to content via a shortcode

(Script added using a shortcode)

Important

As well as editing the code in your snippets, you can deactivate or delete your snippets …

Edit, deactivate, or delete your code snippets

(Deactivate, delete, or edit code snippets)

Notes:

  • If you deactivate or delete a snippet but the HTML Snippets 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 HTML Snippets plugin itself, your shortcode will appear as a line of text in your content (the shortcode will need to be manually deleted).

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

(If the HTML Snippets plugin gets deactivated, the shortcode itself will show up in your content)

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

EmbedIt Pro

EmbedItPro Plugin For WordPress

(EmbedIt Pro – WordPress Plugin)

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

After the plugin has been installed, a new menu item called HTML Snippets will display in your main menu …

EmbedIt Pro plugin menu

(HTML Snippets [EmbedIt Pro] plugin menu)

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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

You will notice that two new buttons will be added to your Editor toolbar: HTML Snippet and Custom Field

EmbedIt Pro adds new menu items to the visual editor toolbar

(The plugin adds new menu buttons to the visual editor toolbar)

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 embed your snippet shortcode in the text …

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

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

A small popup window will appear on your screen allowing you to insert any of the HTML Snippets you have stored. Select the HTML Snippet you would like embedded into your page or post and click OK to proceed …

Insert your HTML Snippet

(Insert name of the HTML Snippet)

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

Shortcode added to content

(Shortcode inserted into content)

Click Publish/Update to save …

Update to save your settings

(Update to save your settings)

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

Content with script added

(Content with script added)

While you are logged into your site, you should see an ‘Edit Snippet’ button displayed near the area where your code snippet has been added. This allows you to update code “on the fly” (this is useful if you need to edit form parameters, resize videos, etc.)

To update your code, click the Edit Snippet button …

Adjust code on the fly!

(Modify scripts “on the fly”!)

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

Edit republish your code to make sitewide changes

(Update and republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

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

Export your HTML Snippets

(Export your Snippets to other WordPress sites)

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

If you know how to use custom fields in WordPress, 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 code into a single post without leaving the post editing window.

Add shortcodes to your content using custom fields

(Paste shortcodes into your posts using custom fields)

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

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

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

(Some WordPress themes provide built-in code adding functionality)

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

A plugin like EmbeditPro lets you easily add code to content inside your WordPress 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, purchase pages, confirmation pages, and so.)

There are a number of WordPress plugins that will allow you to add code to headers and footers of posts and pages. Many of these plugins, however, add code to all posts or pages, 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 for selected pages).

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

Note

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

CJT Plugin For WordPress

(CSS & Javascript Toolbox)

CSS & JavaScript Toolbox (or CJT) lets you add code that contribute to your site’s own software code using a reasonably easy-to-use web interface.

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

Tip

For comprehensive documentation and user manual, go here:

Note: When you first try using the plugin, you will need to go through a custom installation process to create 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 the plugin

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

After installation, you will see a new menu item on the dashboard menu called CSS & JavaScript Toolbox as well as a dashboard panel with news and information about how the plugin is being used on your site …

CJT plugin menu

(CSS & JavaScript Toolbox menu)

Click on CSS & Javascript Toolbox

CSS & JavaScript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

This brings up the CSS & Javascript Toolbox dashboard …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

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

CSS & JavaScript Toolbox - Add New Code Block

(CJT – Add New Code Block Button)

In the ‘Create New Code Block’ window, add a name to your 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” (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' window

(‘Create New Code Block’ window)

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

CJT content area

(CJT code area)

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

Select where to insert your code block

(Specify where to add your block of code)

The main plugin dashboard also various icons you can click to access different features, links to help documentation, etc. (hover your mouse over the icons for tooltips) …

Access plugin functionality via toolbar icons

(Access more plugin features via the toolbar)

Click the ‘Save All Changes’ button 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)

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

Tip

Tip: How To Verify That You Have Added Code Correctly

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

If you have added code to areas of your site that are not meant to be visible (like the “header”) and you want to check if the code has been added correctly, then do this:

How To View Hidden Page Code In Firefox

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

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

Tools > Developer > Page Source

(Tools > Web Developer > Page Source)

A new browser window opens with the source code of the page displayed.

Use the search function (Ctrl+F) or scroll down the screen until you find the code that you have added (code added to a page header is typically found  between the <head> and </head> tags) …

Page code

(Verifying that you have added scripts correctly)

If you can see the code in page source view, 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 to make sure that you have pasted in the code correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your site before adding, changing or deleting code.

How To Embed Code Snippets Into WordPress Posts

Congratulations, now you know how to easily insert code snippets and scripts into your WordPress 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