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 Code Snippets To WordPress PagesOne of the main benefits of using WordPress is that you don’t need to mess with code to manage your site.

There could be instances, however, where you are required to paste code into posts or pages in order to add desired functionalities. Common examples of code snippets you may want to insert into your pages or posts include:

  • Current date and time
  • Adding a search box to your post, page, or sidebar
  • Opt-in forms
  • Display relevant banner ads
  • Analytics code (e.g. Facebook Ads)
  • etc.

Adding code to pages can give your site additional functionality

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

Important

In this step-by-step tutorial, we show you how to easily add scripts to your content. You will also learn different methods that can be used to add code and scripts to your content.

How To Add Code To WordPress Pages Manually

Warning

Note: Before adding any scripts to WordPress we recommend backing up your site files and database first. If you don’t want to back up your files manually, then use the services of a professional, or use a WordPress backup plugin.

You can learn more about a WordPress backup plugin that we recommend using to automate WordPress file and data backups here:

Important Info

In WordPress, you can’t add code snippets and scripts (e.g. HTML, Javascript) directly into the visual editor …

Do not add scripts inside your visual editor

(Do not insert scripts into the WordPress visual editor)

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

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

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

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

Highlight and copy your code to the clipboard …

Select and copy the code to your clipboard

(Copy all of the code to your clipboard)

Next, open your page or post and add placeholder text where you want your script to appear …

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

(Add placeholder symbols where you want your script to appear)

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

Code must be pasted in the Text editor

(Switch to the Text editor to paste code)

Locate your placeholder and select the entire line …

Select and highlight your placeholder text

(Select and highlight your placeholder)

Paste your HTML code over your highlighted text …

Paste the code over your selected text

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

Republish your post or page, then preview …

Preview and test any code added to your content

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

If you need help using basic HTML, see this tutorial:

Important

While the above can be used to add simple HTML code to content, this is not recommended for pasting scripts containing complex code directly into your content (e.g. lead capture 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 JavaScript code)

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

We recommend using plugins that process the code using ’shortcodes’ added to your content.

WordPress Shortcodes

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

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

What a shortcode looks like

(WP shortcode)

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

How Shortcodes Work

How to use shortcodes

(How a WordPress shortcode works)

The above explains how to use shortcodes:

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

[2] After pasting the script into the special field and saving, the plugin generates a unique text shortcut for calling up this script.

[3] Once you have pasted your shortcode into the content, publish or update your post or page.

[4] The plugin will now automatically call up your function.

Shortcodes are great because you don’t have to mess with code to get the functionality you want … just add the shortcode where you would like the functionality to appear and WordPress does the rest!

Adding Snippets Of Code To Your Pages Using Plugins

Let’s now show you how to embed snippets of code into WordPress using various free WordPress plugins.

Insert Html Snippet

Insert HTML Snippet

(Insert HTML Snippet Plugin For WordPress)

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

Essentially, how this plugin works is that it allows you to create 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 everything: calculators, forms, custom javascript codes, etc.

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

How To Embed Code Snippets Into Your Posts And Pages – Step-By-Step Tutorial

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

Install the 'Insert Html Snippet' plugin

(Install ’Insert Html Snippet’)

Next, activate the plugin …

Activate the plugin

(Activate the plugin)

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

XYZ Html menu

(XYZ Html menu)

Tip

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

Select and copy your code to the clipboard

(Have your code ready)

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 …

'Add New HTML Snippet'

(Click on ‘Add New HTML Snippet’ to create a new shortcode)

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

Creating a new Snippet

(Creating a new Snippet)

This saves and publishes a new HTML snippet as a shortcode

Shortcode!

(Add the shortcode to pages and posts!)

You can also create a new snippet without having the script code. This is useful if, for example, you are waiting for approval of the code but would like to go ahead and create the  content where your script will eventually display.

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

You can create a shortcode without having code.

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

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 XYZ Html > HTML Snippets to view all of your shortcodes

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

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

Snippets and shortcodes table

(List of snippets)

Because snippets get stored in an independent location (i.e. a separate database), you can use the same shortcode in different posts or pages and control everything from a single location. If you update your code snippet, your script will automatically be updated wherever the shortcode has been inserted.

You can add shortcodes to content inside the WordPress visual editor.

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

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

( Add shortcodes to your content in the WordPress visual editor.)

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

Script added to content via a shortcode

(Script added to content via a shortcode)

Important

As well as editing snippet codes, you can deactivate and delete the snippets …

Edit, deactivate, or delete code snippets

(Delete, deactivate, or edit snippets)

Notes:

  • If you deactivate or delete a snippet but leave the plugin active, the shortcode will not display in your content. The plugin will automatically fix the content so that no gaps are visible to your visitors.
  • If the plugin is deactivated, the shortcode will appear as a line of text in your content (you will need to manually removed all instances of the shortcode).

If the HTML Snippets plugin gets deactivated, the shortcode will display in your content

(If you deactivate the plugin itself, the shortcode will show up in the content as text)

Visit the plugin site to learn more about this WordPress plugin: Insert Html Snippet – WordPress Plugin

EmbedIt Pro

EmbedIt Pro Plugin For WordPress

(EmbedIt Pro WP 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 display in your dashboard menu …

EmbedIt Pro menu

(EmbedIt Pro menu)

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

Shortcode - EmbedIt Pro

(EmbedIt Pro Shortcode)

You will notice that a couple of new buttons will get added to your Visual Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro adds new menu buttons to the visual editor

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

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 code snippet into the text …

Use the menu buttons to add a shortcode to your pages.

(Use the HTML Snippet button to add shortcodes to your content.)

A small window will pop up on your screen allowing you to insert any of the HTML Snippets you have created. Type in the name of the HTML Snippet you want added into your page or post and click OK to proceed …

Insert HTML Snippet

(Insert name of the HTML Snippet)

The shortcode will be placed in the location you have specified …

Shortcode inserted into content

(Shortcode inserted into content)

Click the ‘Publish’ or ‘Update’ button to save …

Publish to save your settings

(Publish to save your settings)

View your updated post or page and test your script. The script should have been added to your content …

Content with script added

(Content with script added)

While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed next to where your code has been added. This lets you make updates to code “on the fly” (this is useful if you need to change form parameters, video sizes, etc.)

To edit your code, click the Edit Snippet button …

Update scripts on the fly!

(Adjust scripts “on the fly”!)

This takes you to the Edit HTML Snippet screen. Edit the script and save. All content will update globally with the new changes …

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

(Edit republish your code to make global changes)

More information:

Useful WordPress Tip

Tip #1: You can export your snippets (and import these into other WordPress sites) using the Tools > Export function …

Export your Snippets

(Export your Snippets to other sites)

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

If you know how to use custom fields, you can paste code into a custom field and place a shortcode into your content with the “Custom Field” menu 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 with custom fields

(Paste shortcodes into your content via custom fields)

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

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

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

(Some themes come with built-in functionality)

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

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

Some applications (e.g. analytics and banner ad tracking tools), however, require code to be added not only to content but also to areas such as headers, footers, etc.

There are a number of plugins that let you add code to headers and footers 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 and themes will add the code to every page and then let you turn the code off on individual pages).

If you need to add scripts outside of 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 adding or removing scripts from your site, please contact a professional WordPress web developer.

CSS & Javascript Toolbox

CSS & Javascript Toolbox Plugin For WordPress

(CJT Plugin For WordPress)

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

The way this plugin works is that it lets you 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!

Important Info

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

Note: The first time you try to use CJT, 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 …

First-time plugin use requires installing database tables

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

After installing and activating CJT, you will see a new item on the WP admin menu area called CSS & Javascript Toolbox as well as a new dashboard panel with latest news and information about how the plugin is being used on your site …

CSS & JavaScript Toolbox menu

(CJT plugin menu)

Click on CSS & Javascript Toolbox

CJT plugin menu

(CJT menu)

This brings up the CSS & Javascript Toolbox dashboard …

CSS & Javascript Toolbox screen

(CSS & JavaScript Toolbox dashboard)

Click on New Code Block to begin adding new code …

CJT - Add New Code Block Button

(CSS & Javascript Toolbox – New Code Block)

In the ‘Create New Code Block’ window, name 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” (specify where to insert your code block. Options = Header / Footer.), and specify the “Initial Block Position” (this lets you 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 area …

CJT code area

(CJT content area)

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

Select where to insert your code block

(Specify where to add your code)

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

Access CJT functionality via the toolbar menu

(Access plugin features via toolbar icons)

Click the ‘Save All Changes’ button after creating or editing your code block to save your settings …

Click 'Save All Changes' to save your settings

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

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

Useful Information

Tip: How To View Your Code

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

If you have added conversion tracking 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 follow the steps below:

How To View Hidden 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 > Web Developer > Page Source

Viewing source code in Firefox

(Viewing page code in Firefox)

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

Scroll down until you can see the code that you have added (code added to a page header is typically located  between the <head> and </head> tags) …

Page code

(Source code)

If you can see the code in page source view, then the next step 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 you have entered the code 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.

Inserting Scripts And Code Into WordPress Pages

Congratulations! Now you know how to easily insert snippets of code and scripts into WordPress posts.

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site and the services and products offered on this site are not associated, affiliated, sponsored, or endorsed by WordPress, nor have they been certified, reviewed, or tested by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items advertised, reviewed, or linked from this site.

***

Did you enjoy this article? Feel free to share this page with other WordPress users using the links below.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE detailed step-by-step tutorials that will teach you how to use WordPress to grow your business online at minimal cost with no coding skills required!

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