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 Embed Snippets Of Code Into Your WordPress Posts And PagesOne of the benefits of using WordPress is that you don’t need to mess with code to run a successful website.

There may be situations, however, where you are required to paste a block of code into content in order to extend the functionality of your site. Some common scripts you may want to add to your site include:

  • Current date and time
  • Adding a search box to your page, post, or sidebar
  • Adding newsletter subcription forms
  • Display relevant advertising banners
  • Tracking scripts (e.g. Facebook Ads)
  • etc.

Adding scripts to content can expand your site's functionality

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

Info

Some script functions can be added using plugins that make handling code easier. In this step-by-step tutorial, we will show you how to easily insert snippets of code into your pages and posts.

Embedding Simple HTML Code Into Your WordPress Content - Manual Method

Note

Note: Before adding any code snippets to WordPress remember to backup your site files and database first. If you don’t want to back up your files yourself, then get professional support services, or use backup plugins.

You can read about a great WordPress backup plugin that can fully automate your site backups here:

Useful Info

WordPress does not allow you to add code (e.g. JavaScript, HTML) directly into the visual editor …

Do not paste scripts into the visual editor

(Do not insert scripts into your visual editor)

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

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

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

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

Select and copy all of the code to your clipboard …

Highlight and copy your code to the clipboard

(Highlight and copy your code to the clipboard)

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

Add placeholder characters to mark the spot where you want your script to appear in your content

(Add a placeholder to mark the location where you would like your script to display)

Next, switch to the Text editor to paste in your code …

Code must be pasted in your Text editor

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

Locate your placeholder symbols and highlight the line …

Select and highlight the line containing the placeholder characters

(Select and highlight the line containing your placeholder)

Paste the code into your content …

Use the text editor to embed simple HTML code into your content

(Simple HTML code pasted into text)

Publish your page or post and preview the results …

Preview and test any code you add to pages or posts

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

We have written a detailed tutorial about using basic HTML in WordPress here:

Important

While the above is fine for adding simple HTML code to your content, we do not recommend pasting complex scripts directly into your content (e.g. lead capture forms, etc.) …

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

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

If you paste code like Javascript directly into the text editor you may experience errors.

The method we recommend is to use plugins that process the script from ’shortcodes’ added to your content.

WordPress Shortcodes

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

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

WP shortcode

(What a WordPress shortcode looks like!)

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

How Shortcodes Work

How to use WordPress shortcodes

(How WordPress shortcodes work)

The screenshot above explains how WordPress shortcodes work:

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

[2] After pasting the code into the special field and saving, the plugin generates a unique text-based shortcut that will process this script.

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

[4] The plugin will now automatically process your code snippet wherever the shortcode has been added.

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

How To Add Code Snippets To Your Posts And Pages Using Plugins

There are a number of plugins that allow you to add code snippets and scripts into your WordPress posts, widgets, and pages.

Insert HTML Snippet

Insert HTML Snippet Plugin For WordPress

(Insert HTML Snippet)

As the plugin name suggests, Insert HTML Snippet allows you to easily add HTML snippets into a post, page, or a sidebar widget.

How this plugin works is that it lets you create separate HTML snippets and add them to your posts and pages using shortcodes or custom fields.

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

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

Inserting Code Into Your WordPress Posts And Pages – Insert HTML Snippet Plugin Tutorial

Download the plugin here, or use the “Search method” to install the plugin inside your plugin dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Installing the 'Insert Html Snippet' plugin

(Find and install ’Insert Html Snippet’)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the ‘Insert Html Snippet’ plugin)

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

XYZ Html menu

(XYZ Html menu)

Info

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

Have your code ready to use

(Have your code ready to use)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen appears. Click on Add New HTML Snippet to create a new snippet …

Click on the 'Add New HTML Snippet' button to create a new shortcode

(’Add New HTML Snippet’)

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

Insert Html Snippet - Creating a new Snippet

(Create a new Snippet)

This saves and publishes your snippet as a shortcode

Shortcode!

(Your new HTML Snippets shortcode!)

You can also create a shortcode without having code. This is useful if, for example, you are waiting for approval of the code but need to publish the pages where your script will eventually show up.

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

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

(You can create a new snippet without having the code.)

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

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

(Click on XYZ Html > HTML Snippets to view all of your snippets and shortcodes)

A list of all the snippets and shortcodes you have created will appear in the ‘HTML Snippets’ admin screen …

Snippets and shortcodes table

(Snippets table)

Because code snippets are stored in an independent location (i.e. the plugin’s database), you can insert the same snippet into different posts and pages and control everything from a single location. If you change the snippet code, the code will automatically update wherever the shortcode has been embedded.

Shortcodes can be added inside the WordPress visual editor.

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

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

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

After publishing, preview and test the script to ensure that your code is working ok …

Script added to content using a shortcode

(Script added via a shortcode)

Useful Info

You can delete, deactivate, or edit snippets …

Delete, deactivate, or edit code snippets

(Deactivate, edit, or delete your code snippets)

Notes:

  • If you delete or deactivate a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content. The plugin will fix your pages so that no content gaps will be detected by visitors.
  • If you deactivate the HTML Snippets plugin, the shortcode will appear as a line of text in your content and will need to be manually deleted.

If you deactivate the HTML Snippets plugin itself, your shortcode will show up in your content

(If the plugin gets deactivated, the shortcode will display in the content as text)

For more details, go here}: Insert HTML Snippet

EmbedIt Pro

EmbedIt Pro

(EmbedIt Pro WordPress Plugin)

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

After installing and activating EmbedIt Pro, a new menu item called HTML Snippets will display in the menu …

EmbedIt Pro menu

(HTML Snippets [EmbedIt Pro] menu)

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

Shortcode - EmbedIt Pro

(EmbedIt Pro Shortcode)

Two new menu items will appear in your Visual Editor menu toolbar: HTML Snippet and Custom Field

The plugin adds new menu buttons to the visual editor

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

Use the HTML Snippet button to insert a shortcode into your content. With the cursor location selected, click on the HTML Snippet button to select and insert your snippet into the text …

Use the HTML Snippet button to add shortcodes to your pages.

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

A small popup window will appear on your screen allowing you to insert any HTML Snippets you have saved. Type in the name of the HTML Snippet you want to embed into your post/page and click OK to proceed …

Insert name of the HTML Snippet

(Insert HTML Snippet)

Your shortcode will be added where your cursor is located …

Shortcode inserted into content

(Shortcode added to content)

Click the ‘Publish’ or ‘Update’ button 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 where you have specified …

Voila ... your script has been added!

(Content with script added)

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

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

Change scripts on the fly!

(Update code “on the fly”!)

The Edit HTML Snippet screen will open in your browser. Make your changes and save. All content will update throughout your site with the changes …

Update and 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: EmbedIt Pro allows you to export your HTML snippets (and import these into other WordPress sites) using the Tools > Export function …

Export your Snippets

(Export your Snippets)

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

If you are familiar with using custom fields, you can add code to a custom field and place a shortcode into your content with the “Custom Field” toolbar button. This is useful when you want to insert HTML into a single post without leaving the post editing window.

Add shortcodes to your posts using custom fields

(Embed shortcodes into your posts using custom fields)

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

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

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

(Some themes are built with built-in functionality)

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

With a plugin like EmbedIt Pro, you easily insert snippets of code into content inside your posts and pages.

Some applications (e.g. analytics and ad conversion tracking tools), however, require that code be inserted into content but also to sections like page headers, footers, etc.

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

If you want 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 described below.

Useful Info

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

CSS & JavaScript Toolbox

CJT Plugin

(CSS & JavaScript Toolbox Plugin For WordPress)

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

The way the plugin works is that it lets you 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, URLs, expressions, and more!

Important

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 need to be installed the first time the plugin is used

(First-time plugin use requires database tables installation)

After installing CJT, you will see a new menu item on the main menu called CSS & Javascript Toolbox as well as a new dashboard panel with news and plugin usage information …

CSS & Javascript Toolbox plugin menu

(CSS & Javascript Toolbox menu)

Click on CSS & JavaScript Toolbox

CSS & JavaScript Toolbox plugin menu

(CJT plugin menu)

This loads the CSS & JavaScript Toolbox dashboard …

CSS & Javascript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

Click on New Code Block to begin adding new code to your site …

CSS & Javascript Toolbox - New Code Block

(CSS & JavaScript Toolbox – 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 whether the script should be added before or after all other code inside the header or footer. Options = First Block / Last Block.). Click Create

'Create New Code Block' options

(‘Create New Code Block’ options)

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

CJT code field

(CJT content field)

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

Select 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 features, help, etc. (hover your mouse over the icons for descriptions) …

Access CJT functionality via the toolbar menu

(Access plugin features via the toolbar)

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

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

More info:

Idea

Tip: Checking If You Have Added Code Correctly

Some scripts will ask you to verify if your code has been added 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” section) and you want to check if the code has been added correctly, then here’s how to do it:

Viewing Source Code In Firefox

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

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

Tools > Web Developer > Page Source

(How to view hidden page code in Firefox)

A new window opens displaying the source code for your page.

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

Page code

(Page code)

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 as it should. If you experience any errors, repeat the process to make sure that your code has been pasted in correctly, or get help from a professional. As stated earlier in this tutorial, always back up your files and database before adding, changing or deleting code.

How To Add Code To WordPress Content

Congratulations! Now you know how to easily snippets of code to your pages and posts.

Get Thrive Leads for WordPress

***

"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)

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