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 PostsOne of the most powerful aspects of using WordPress is that you don’t need to know how to write code to manage a website successfully.

You could come across situations, however, where you may need to insert a block of code into posts or pages in order to add certain functionalities. Useful examples where inserting code snippets into pages or posts may be used to enhance your site include:

  • Current date and time
  • Adding a Google search box
  • Adding a subscription form
  • Display contextual ads
  • Analytics scripts (e.g. Facebook Ads)
  • etc.

Adding code to your pages can give you additional functionality

(Adding code to pages can give you additional functionality)

Info

Some script features can be added through plugins that make handling code easier. In this step-by-step tutorial, we are going to show you how to add snippets of code to your content with and without plugins.

How To Insert Code Into Your Pages - Manual Method

Useful Information

Note: Remember to back up your files and database before adding any scripts or code to WordPress. If you don’t want to perform manual backups, then consider using the services of a professional WordPress provider, or use WordPress backup plugins.

Learn about a WordPress backup plugin that can fully automate your backup process here:

Useful Info

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

Pasting scripts inside the visual editor does not work

(Pasting scripts inside your visual editor does not work)

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

First, find or create the code you want to add to your content. You can use a web-based HTML editor (e.g. search online for “Easy HTML Editor“) or use HTML cheat sheets

You can use a free 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 code. Image source: HTML-Online.com)

Highlight and copy all of the code to your clipboard …

Select and copy the code to your clipboard

(Select and copy your code to the clipboard)

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

Add a placeholder to mark the spot where you want your code to appear in your content

(Add placeholder characters to mark the location where you want your script to appear)

Switch to the Text editor …

Code must be pasted in the Text editor

(Switch to the Text editor to paste code)

Locate your placeholder text and select the entire line …

Select and highlight your placeholder characters

(Select and highlight the line containing your placeholder)

Paste the code into your content …

Use the text editor to insert simple HTML into your content

(HTML code pasted into text)

Remember to publish your page or post and preview the results …

Preview and test any code you add to posts

(Preview and test any code added to pages)

To learn more about using basic HTML in WordPress, refer to this step-by-step tutorial:

Important

While the above can be used to add simple HTML code to your content, this is not recommended for pasting complex code directly into your content (e.g. lead capture forms, etc.) …

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

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

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

We recommend using a plugin that automatically processes code using ’shortcodes’ placed into your content.

Shortcodes

A ‘shortcode’ is a simple bit of code that allows you to perform complex functions with no coding skills. Shortcodes are typically added to posts, widgets, and pages to trigger a complex script into action.

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

Shortcode

(What a shortcode looks like)

Shortcodes enable 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 Shortcodes Work

How to use shortcodes

(How shortcodes work)

The screenshot above explains how WordPress shortcodes work:

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

[2] After pasting the code into the field and saving, the plugin creates a unique piece of text that will process this script.

[3] After adding the shortcode to your content, publish or update your page.

[4] WordPress will now automatically call up your function when someone comes to your site.

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

How To Add Snippets Of Code To WordPress Content Using Plugins

In the examples below, we explain how to insert code snippets into WordPress using various free WordPress plugins.

Insert HTML Snippet

Insert Html Snippet Plugin For WordPress

(Insert HTML Snippet WordPress Plugin)

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

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

HTML snippets can store code for just about anything: calculators, forms, tracking codes, etc.

The tutorial below shows you how to add code to your pages and posts using Insert HTML Snippet.

How To Add Code Snippets To Your Content – Tutorial

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

Install 'Insert Html Snippet'

(Locate and install ’Insert Html Snippet’)

Next, activate the plugin …

Activate 'Insert Html Snippet'

(Activate the ‘Insert Html Snippet’ plugin)

After the plugin has been installed, a new item called XYZ Html will be added to the dashboard menu …

XYZ HTML plugin menu

(XYZ HTML plugin menu)

Idea

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

Have your code ready to paste into the plugin

(Select and copy your code to the clipboard)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets menu)

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 shortcode

(’Add New HTML Snippet’)

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

Insert Html Snippet - Add a new Snippet

(Create a new Snippet)

This creates, saves, and publishes a new HTML Snippet as a shortcode

HTML Snippets shortcode!

(Shortcode!)

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

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

You can also create a snippet without having code.

(You can also create a snippet without having your code yet.)

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

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

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

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

Snippets table

(Table of snippets and shortcodes)

Because the plugin stores all snippets in a separate database, you can insert one shortcode into multiple pages and control everything from one location. If you update your code snippet, the code will automatically be updated in every instance where the shortcode has been embedded.

You can add shortcodes to your 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 where you would like your code added …

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

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

After publishing, preview and test your script …

Script added to content via a shortcode

(Script added to content via a shortcode)

Useful Info

You can deactivate, edit, and delete your snippets …

Deactivate, delete, and edit code snippets

(Edit, delete, and deactivate your snippets)

Note:

  • If you delete or deactivate a snippet but leave the plugin active, the shortcode will not display in your content. The plugin will fix your pages so that no content gaps will be noticed by visitors.
  • If you deactivate the plugin, your shortcode will show up in your content.

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

(If you deactivate the plugin itself, your shortcode will display as a line of text in the content)

Visit the plugin site for more information about this WordPress plugin: Insert Html Snippet Plugin

EmbedIt Pro

EmbedItPro - WordPress Plugin

(EmbedItPro Plugin)

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

After installing and activating the plugin, a new menu item called HTML Snippets will appear in the main menu …

EmbedIt Pro menu

(HTML Snippets [EmbedIt Pro] menu)

To create a new snippet, click on HTML Snippets > Add New, add your code, give your snippet a title and click the Publish (or Update) …

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

You will see that two new menu items will get added to your Editor toolbar: HTML Snippet and Custom Field

EmbedIt Pro adds new menu buttons to the visual editor

(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 insert your shortcode into your text …

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

(You can use the menu buttons to place a shortcode into your posts.)

A small 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 embedded into your post or page and click OK to continue …

Insert name of the HTML Snippet

(Insert your HTML Snippet)

The shortcode will be inserted where the cursor is located …

Shortcode inserted into content

(Shortcode added to content)

Click Publish/Update to save …

Update to save your settings

(Publish to save your settings)

View your updated post or page. The script should display in your content …

What your visitors will see

(What your visitors will see)

While you are logged into your site, an ‘Edit Snippet’ button should display next to the section where your code snippet has been inserted. This lets you modify scripts “on the fly” (this is useful if you need to edit code parameters, video sizes, etc.)

To update your script, click the Edit Snippet button …

Adjust code on the fly!

(Adjust scripts “on the fly”!)

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

Edit republish your code to make global changes

(Edit, update, and republish your code to make sitewide changes)

More info:

Useful WordPress Tip

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

Export your HTML Snippets

(Export your Snippets)

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

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

(Add shortcodes to your content via custom fields)

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

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

(Some themes come with built-in code adding features)

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

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

With a plugin like EmbeditPro, you easily insert scripts and code into content inside your pages and posts.

Some applications (e.g. analytics and ad conversion tracking tools), however, require code to be added not only to content but also to areas like page headers, footers, etc. (for example, landing pages, opt-in confirmation pages, and so.)

There are a number of WordPress plugins that allow you to add code to the header or footer section of pages. Many of these plugins, however, will add code to all pages, 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 off on selected pages and posts).

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.

Disclaimer

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

CSS & JavaScript Toolbox

CJT Plugin For WordPress

(CSS & Javascript Toolbox Plugin)

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

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

Important Info

For comprehensive documentation, go here:

Note: Before using the plugin, you will be asked 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 database installation

(First-time plugin use requires database installation)

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

CJT plugin menu

(CSS & JavaScript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox

CJT plugin menu

(CJT plugin menu)

This brings up the CSS & Javascript Toolbox screen …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

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

CJT - Add New Code Block

(CSS & JavaScript Toolbox – Add New Code Block)

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” (specify where to insert your code block. Options = Header / Footer.), and select the “Initial Block Position” (this lets you specify if 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' window

(‘Create New Code Block’ window)

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

CJT code field

(CJT code area)

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

Specify where to add your block of code

(Select where to insert your block of code)

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

Access CJT functionality via toolbar icons

(Access more plugin features via the toolbar menu)

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

(CJT – ‘Save All Changes’ button)

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

Idea

Tip: Checking If You Have Added Scripts Correctly

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

If you have pasted code into an area like the “header” that is not meant to be visible and you would like to check if the code has been added correctly, then do this:

Viewing Hidden Code In Firefox

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

Select Tools > Developer > Page Source from the browser menu …

How to view hidden page code in Firefox

(Tools > Developer > Page Source)

A new window opens with the page code displayed.

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

How to view your code

(Page code)

If you can see the code in your page, 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 process to make sure that you have inserted the code correctly, or get help from a professional. As stated earlier in this tutorial, always back up your files and database before doing anything that involves changing code.

How To Add Code Snippets To Your Content

Congratulations! Now you know how to add scripts to WordPress content.

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

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

***

Did you find this post useful? If so, please take a moment to share this information with anyone thinking of starting their own business online using the social buttons 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.