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.

Adding Code To WordPress ContentOne of the main advantages of using WordPress is that you don’t need to know how to edit code to build a successful online presence.

You may come across an instance, however, where you may need to embed code into content in your posts in order to achieve a particular outcome. Some common scripts you may want to add to your site include:

  • Current date and time
  • Adding a Google search box
  • Adding subscription forms
  • Display contextual advertising banners
  • Tracking code (e.g. Facebook Ads)
  • etc.

Adding scripts to content can give you additional functionality

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

Important Info

In this step-by-step tutorial, we show you how to easily insert code into your pages. You are also going to learn different plugins that can be used to add scripts and codes to your content.

Adding Simple Code To Your Posts - Manual Method

Warning

Note: We recommend backing up your site files and database before adding any scripts to WordPress. If you don’t want to do your own backups, then get professional WordPress support services, or use a WordPress backup plugin.

Learn about a WordPress backup plugin that can fully automate your backup process here: Backup, Clone And Protect Your WordPress Website With Backup Creator Plugin For WP

Info

In WordPress, you cannot add code directly into the visual editor …

Do not paste code into your visual editor

(Do not insert code into your visual editor)

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

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

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

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

Highlight and copy your code to the clipboard …

Select and copy your code to the clipboard

(Highlight and copy your code to the clipboard)

Next, open your post or page and in the Visual Editor, create a blank line and add a placeholder (e.g. @@@@@) to mark the location where you want your script to appear …

Add placeholder symbols where you would like your code to display

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

Switch to the Text editor to paste in the code …

Code must be pasted in the Text editor

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

Locate and select your placeholder …

Select and highlight the line containing the placeholder

(Select and highlight your placeholder)

Paste the code into your content …

Paste your HTML code into your text

(Simple HTML code pasted into text)

Publish your page or post and preview …

Preview and test any code you add to pages

(Preview and test any code added to your content)

If you need help using basic HTML, refer to this tutorial: Using HTML Formatting Tags In WordPress

Important

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

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

(Avoid using the WordPress text editor to add Javascript code)

If you paste JavaScript code directly into the WP text editor you could find the script causes errors.

A better method for inserting code into content is to use a plugin that processes the script from ’shortcodes’ placed in your content.

What Is A Shortcode?

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

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

Shortcode format

(Shortcode format)

Shortcodes allow plugin 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 Shortcodes

How a shortcode works

(How a WordPress shortcode works)

The above explains how to use a WordPress shortcode:

[1] First, install a plugin that allows you to paste code 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 shortcode that will process the script.

[3] After embedding the shortcode into your content, publish or update your page.

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

Shortcodes are great because you don’t have to mess with scripts … simply add the shortcode to your widget, page, or post and WordPress does the rest!

Embedding Code Into WordPress Content Using A Plugin

In the examples below, you will learn how to insert snippets of code and scripts into your pages and posts using various free WordPress plugins.

Insert Html Snippet

Insert HTML Snippet WordPress Plugin

(Insert HTML Snippet WP Plugin)

As the name suggests, this plugin lets you easily embed HTML code into a page, post, or a sidebar widget.

Essentially, this plugin allows you to create and store HTML snippets and add them to your posts and pages using shortcodes or custom fields.

HTML snippets are objects that can store code for just about anything: codes for embedding content tools, custom javascript codes, etc.

The step-by-step tutorial below shows you how to add code to your pages and posts using HTML snippets.

Adding Scripts To Your WordPress Pages And Posts – Tutorial

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

Install 'Insert Html Snippet'

(Install the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the plugin)

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

XYZ Html plugin menu

(XYZ HTML menu)

Info

Important: Make sure you have your code snippet available (e.g. save it into a plain text file) …

Have your code ready to use

(Have your code ready to paste into the plugin)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen will appear. Click on the Add New HTML Snippet button …

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

(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), paste your code snippet into the HTML code section and click on the Create button …

Creating a new Snippet

(Add a new HTML Snippet)

This creates, saves, and publishes your new snippet as a shortcode

Your new shortcode!

(Add the shortcode to your posts and pages!)

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

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

You can create a new shortcode without having the code.

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

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

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

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

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

Snippets and shortcodes list

(List of snippets and shortcodes)

Because the plugin keeps all snippets stored in a separate database, you can add the same snippet to a number of pages and control everything from one location. If you change the snippet code, your code will automatically be updated wherever the shortcode has been embedded.

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

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

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

(You can add shortcodes to content in the WordPress visual editor.)

After publishing, preview and test your script …

Script added using a shortcode

(Script added via a shortcode)

Useful Information

You can deactivate, edit, and delete code snippets …

Delete, edit, and deactivate code snippets

(Deactivate, edit, or delete your code snippets)

Note:

  • If you delete or deactivate a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content.
  • If the plugin gets deactivated, the shortcode will show up in your content and will need to be manually removed.

If the plugin itself is deactivated, the shortcode will display in your content

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

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

EmbedIt Pro

EmbedIt Pro Plugin For WordPress

(EmbedItPro WordPress Plugin)

EmbedIt Pro is similar to the HTML Snippets plugin, with some added features.

After installing and activating the EmbedIt Pro plugin, a new menu item called HTML Snippets will be added to the dashboard menu …

HTML Snippets [EmbedIt Pro] plugin 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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

You will notice that a couple of new items have been added to your Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro adds new menu buttons to the visual editor

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

You can 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 in the text …

Use the HTML Snippet button to place shortcodes into your pages.

(Use the HTML Snippet button to place a shortcode into your pages.)

A small window will display on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you would like to embed into your page or post and click OK to continue …

Insert name of the HTML Snippet

(Insert name of the HTML Snippet)

Your shortcode will be inserted where the cursor is located …

Shortcode inserted into content

(Shortcode added to content)

Click Publish/Update to save …

Publish to save your settings

(Update to save your settings)

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

What your visitors will see

(What your visitors will see)

While you are logged into your WordPress administration area, you should see an ‘Edit Snippet’ button displayed next to where your code has been added. This lets you make adjustments to scripts “on the fly” (this is useful if you need to edit code elements, image sizes, etc.)

To edit your code, click the Edit Snippet button …

Adjust code on the fly!

(Change scripts “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Perform your desired changes to the code and resave. All content will be automatically updated with the changes …

Update and republish your code to make sitewide changes

(Edit republish your code to make sitewide changes)

More information: EmbedItPro Plugin

Useful WordPress Tip

Tip #1: With EmbedIt Pro, you can export your HTML 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 add code to your content.

If you know how custom fields work, you can paste code into a custom field and add 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.

Add shortcodes to your posts using custom fields

(Add shortcodes to your content with custom fields)

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

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

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

(Some themes provide built-in features)

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

With a plugin like EmbedIt Pro, you easily add snippets of code to content inside your WordPress pages and posts.

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

You can find a number of plugins that let you add code to the header/footer section of your posts and 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 and themes will add the code to every page and then let you turn the code on/off on individual pages).

If you need 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 Info

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

CSS & Javascript Toolbox

CSS & JavaScript Toolbox

(CSS & Javascript Toolbox WordPress Plugin)

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

The way the plugin works is that it allows you to modify your site’s functionality and appearance with custom code blocks that can be assigned to individual pages, posts, categories, custom posts, URLs, expressions, and more!

Tip

To view the plugin’s comprehensive documentation, go here: CSS & Javascript Toolbox WordPress Plugin.

Note: Before using CJT, you will be asked to go through an installation process to create 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

(First-time plugin use requires installing database tables)

After installing CJT, 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 …

CSS & Javascript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox

CJT menu

(CSS & JavaScript Toolbox plugin menu)

This loads the CSS & Javascript Toolbox screen …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

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

CSS & Javascript Toolbox - Add New Code Block

(CSS & JavaScript Toolbox – Add New Code Block)

In the ‘Create New Code Block’ window, name your code block, select the checkbox to activate it (or leave it unchecked if you don’t want to activate it yet), select a “Location Hook” (this specifies 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 inside 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 content field

(CJT code field)

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

Specify where to insert your code block

(Specify where to add your block of code)

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

Access more plugin functionality via the toolbar

(Access more CJT features via the toolbar menu)

Click Save All Changes when finished to save your code settings …

Click 'Save All Changes' to save your code settings

(CJT – ‘Save All Changes’ button)

More info: CSS & JavaScript Toolbox Plugin

Useful Info

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 added code to an area of your site like the “header” that is not meant to be visible and you want 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 go to the page where you have added your code.

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

Viewing source code in Firefox

(Tools > Web Developer > Page Source)

A new browser window will open up with the page code displayed.

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

Source code

(How to view your code)

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

Adding Code In WordPress Content

Congratulations, now you know how to embed scripts and code into your content.

***

"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)

Disclaimer: This site is not associated with WordPress, Automattic, or any WordPress-related products reviewed on this site. We may derive financial benefits or affiliate commissions from the purchase of any products and services advertised, mentioned or linked to this website. All images remain the copyright of their respective owners and comply with all license terms and agreements of use.

***

Did you enjoy this post? Feel free to share this post with others using the social links below.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and has authored hundreds of FREE WordPress tutorials for non-techies and beginners. WPCompendium.org provides detailed step-by-step tutorials that will teach you how to use WordPress with no coding skills required and grow your business online at minimal cost!

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