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 Snippets Of Code Into Your Pages And PostsOne of the main advantages of using WordPress is that you don’t need to mess with code to manage a website successfully.

You could come across certain situations, however, where you may like to insert a script or code snippet into content inside your posts in order to extend the functionality of your site. Some common code snippets you may want to insert into your posts or pages include:

  • Showing today’s date on a time sensitive offer page
  • Adding a Google search box
  • Adding a lead capture form
  • Display contextual banner ads
  • Analytics scripts (e.g. Facebook Ads)
  • etc.

Adding code to content can expand your site's functionality

(Adding code to your pages can give your site additional functionality)

Important

In this tutorial, you will learn how to add code and scripts to your pages and posts.

How To Add Simple Code Snippets To WordPress Posts And Pages - Manual Method

Warning

Note: Before adding any scripts to WordPress we recommend backing up your database and files first. If you don’t want to do manual backups, then consider using professional WordPress support services, or use backup plugins.

Learn about a WordPress backup plugin that we recommend using to completely automate your file and data backups here:

Important

WordPress doesn’t let you add code directly into the visual editor …

Pasting scripts into the WordPress visual editor does not work

(Pasting code inside your visual editor will not work)

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

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

Use a simple HTML editor or HTML templates to create your HTML code

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

Select and copy your code to the clipboard …

Copy the code to your clipboard

(Select and copy your code to the clipboard)

Next, open your page or post and in the Visual Editor, Add a placeholder (e.g. @@@@@) in the the exact place where you would like your script to appear in your content (in a blank line) …

Add placeholder text to mark the spot where you want your script to appear

(Add a placeholder to mark the spot where you want your script to display)

Click on the Text tab …

Code must be pasted in your Text editor

(Code must be pasted in your Text editor)

Locate and highlight the placeholder …

Select and highlight your placeholder symbols

(Select and highlight your placeholder text)

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

Simple HTML code pasted into text

(Paste your HTML code over your highlighted text)

Publish your post or page, then preview the results …

Preview and test any code you add to your pages or posts

(Preview and test any code inserted into your posts or pages)

If you need help using basic HTML in WordPress, refer to this step-by-step tutorial:

Important

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

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

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

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

We recommend using plugins that let you “call” snippets of code using a ‘shortcode’ pasted into your content.

WordPress Shortcodes

’Shortcodes’ are short bits of code that allow you to perform complex functions in WordPress with no coding or programming knowledge. Shortcodes are typically used in pages, posts, and widgets to trigger a complex script into action.

Shortcodes look like strings of text enclosed in square brackets, e.g. ‘[ezformshortcode]’ …

What a shortcode looks like

(WordPress shortcode)

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

How To Use WordPress Shortcodes

How to use WordPress shortcodes

(How to use WordPress shortcodes)

The above explains how to use a WordPress shortcode:

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

[2] After adding the code to the code area and saving, the plugin generates a unique shortcut that lets your website call up the script.

[3] Next, copy the shortcode and paste it into any widgets, pages, or posts where you would like the function to appear and publish.

[4] WordPress will now automatically process the code whenever someone loads the post or page with the embedded shortcode on their browser.

Shortcodes are great because 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!

Inserting Scripts Into WordPress Pages And Posts Using A Plugin

There are several plugins that let you embed code snippets into WordPress.

Insert HTML Snippet

Insert HTML Snippet

(Insert HTML Snippet)

As the name suggests, Insert HTML Snippet allows you to easily embed snippets of HTML code into pages, posts or sidebar widgets.

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

HTML snippets can store codes and scripts for just about everything: calculators, javascript codes, etc.

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

How To Add Snippets Of Code To Your WordPress Content – Insert HTML Snippet Plugin Tutorial

Install Insert Html Snippet inside your WordPress dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …

Locate and install the 'Insert Html Snippet' plugin

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

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the ‘Insert Html Snippet’ plugin)

After installing and activating the Insert Html Snippet plugin, a new menu item called XYZ Html will be added to your WordPress menu …

XYZ HTML plugin menu

(XYZ HTML menu)

Important Info

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

Have your code ready

(Copy your code to the clipboard)

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

XYZ Html > HTML Snippets 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 code snippet (for your reference only), paste your code into the HTML code section and click the Create button …

Create a new HTML Snippet

(Insert HTML Snippet – Create a new Snippet)

A new snippet will be created, saved, and published as a shortcode

Your new HTML Snippets shortcode!

(Paste this shortcode into pages and posts!)

You can also create a snippet without having your code yet. This is handy if, for example, you are waiting for approval of the code but want to publish the pages where your code will eventually display.

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

You can create a new snippet without having a script.

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

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

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

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

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

Table of snippets and shortcodes

(Snippets list)

Because the plugin keeps all snippets stored in its own database, you can use the same snippet in various posts and pages and control everything from a single location. If you alter the code and update the snippet, the code will automatically update wherever the shortcode has been inserted.

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

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

You can insert shortcodes into your content directly inside the WordPress visual editor.

( Add shortcodes to content inside the WordPress visual editor.)

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

Script added to content using a shortcode

(Script added via a shortcode)

Useful Info

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

Edit, deactivate, or delete snippets

(Deactivate, delete, or edit code snippets)

Note:

  • If you delete or deactivate a snippet but leave the HTML Snippets plugin active, your shortcode will not display in your content.
  • If the HTML Snippets plugin itself gets deactivated, the shortcode will show up in your content (the shortcode will need to be manually deleted).

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

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

For more details, go here}: Insert Html Snippet Plugin

EmbedIt Pro

EmbedIt Pro - WordPress Plugin

(EmbedItPro – WordPress Plugin)

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

Once the plugin has been installed and activated, a new menu item called HTML Snippets will be added to the menu …

EmbedIt Pro plugin menu

(EmbedIt Pro menu)

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

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

Two new buttons will display on your Editor toolbar: HTML Snippet and Custom Field

EmbedIt Pro adds new menu buttons to the visual editor toolbar

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

Use the HTML Snippet button to add a shortcode to your posts. With the cursor location selected, click on the HTML Snippet button to select and place the snippet in your text …

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

(Use the menu buttons to place shortcodes into your pages.)

A small popup window will appear on your screen allowing you to insert any HTML Snippets you have created. Select the HTML Snippet you want added into your post/page and click OK to proceed …

Insert HTML Snippet

(Insert your HTML Snippet)

Your shortcode will be inserted where the cursor is located …

Shortcode added to content

(Shortcode added to content)

Click Publish/Update to save …

Update to save your settings

(Update to save your settings)

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

Voila ... your code has been added!

(Voila … your script has been added!)

While you are logged into your site, you should see an ‘Edit Snippet’ button displayed next to where your code has been inserted. This allows you to change code “on the fly” (this is useful if you need to edit code elements, resize images, etc.)

To edit your code, click the Edit Snippet button …

Update scripts on the fly!

(Edit code “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Make your changes and save. Wherever your snippet has been added will automatically update with your 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 HTML snippets (and import these into other WordPress sites) using the Tools > Export function …

Export your Snippets to other WordPress sites

(Export your HTML Snippets)

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

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

Paste shortcodes into your posts with custom fields

(Add shortcodes to your content with 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 let you add raw HTML and JavaScript code to your content …

(Some WordPress themes come with built-in functionality)

(Some WordPress themes come with built-in code insertion features)

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

A plugin like EmbeditPro lets you easily insert code and scripts into content inside your WordPress pages and posts.

Some applications, however, require that code be inserted into content but also to sections like headers, footers, etc. (for example, product download pages, opt-in confirmation pages, and so.)

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

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

Warning

The section below is for advanced WordPress users. If you need any help adding or removing code from your site, please contact a professional WordPress web developer.

CSS & Javascript Toolbox

CSS & Javascript Toolbox WordPress Plugin

(CSS & Javascript Toolbox WP Plugin)

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

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

Important Info

To view the plugin’s comprehensive documentation and user manual, go here:

Note: Before 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 need to be installed the first time CJT is used

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

After installing the plugin, a new item called CSS & Javascript Toolbox will appear in the WordPress 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 menu)

Click on CSS & Javascript Toolbox on the menu …

CJT plugin menu

(CJT plugin menu)

This brings up the CSS & JavaScript Toolbox dashboard …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

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

CSS & Javascript Toolbox - New Code Block Button

(CJT – New Code Block)

In the ‘Create New Code Block’ window, add a name to 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 choose 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.). After selecting your options, 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 section …

CJT code field

(CJT code field)

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

Select where to insert your code block

(Specify where to add your code block)

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

Access more plugin functionality via toolbar icons

(Access more CJT functionality via the toolbar)

Click Save All Changes to save your settings …

Click 'Save All Changes' to save your settings

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

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

Important Info

Tip: How To Verify If Scripts Have Been Added 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 an area that is not meant to be visible (like the “header”) and you need to check if the code has been added correctly, then do this:

Viewing Hidden Page Code In Firefox

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

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

How to view hidden code in Firefox

(How to view source code in Firefox)

A new browser will open up with the source code displayed.

Scroll down the screen until you find the code that you have added (code added to a page header is normally placed  between the <head> and </head> tags) …

How to view your code

(Verify if your scripts have been added correctly)

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

Adding Code Snippets In WordPress Pages And Posts

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

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

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