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 WordPress Pages And PostsOne of the main benefits of using WordPress is that you don’t need to mess with code to build a successful web presence.

You may come across a situation, however, where you may be required to embed a snippet of code into posts or pages in order to add certain functions to your site. Useful examples where adding snippets of code to pages or posts would add functionality to your site include:

  • Today’s date and time
  • Adding a Google search box
  • Subscription forms
  • Display contextual ads
  • Analytics code (e.g. Google Adwords)
  • etc.

Adding scripts to pages can expand your site's functionality

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

Important

In this tutorial, you are going to learn how to insert scripts and code snippets into your content with and without plugins.

Adding Code To WordPress Posts - Manual Method

Info

Note: Remember to back up your database and files before adding any code snippets to WordPress. If you don’t want to do site backups, then consider getting professional WordPress help, or use WordPress backup plugins.

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

Info

You cannot add code directly into content using the WordPress visual editor …

Pasting code into your visual editor will not work

(Do not insert scripts inside the WordPress visual editor)

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

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

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

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

Copy all of your code to the clipboard …

Copy your code to the clipboard

(Select and copy the code to your clipboard)

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

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

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

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

Find and select the placeholder …

Select and highlight your placeholder characters

(Select and highlight your placeholder text)

Paste the code over the selected text …

HTML code pasted into text

(Paste the code into your text)

Publish your post or page, then preview …

Preview and test any code added to your content

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

To learn more about using basic HTML in WordPress, go here:

Important

While the above can be used to add simple HTML code to content, we do not recommend 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 other methods instead!

(Don’t use the text editor to add complex code … use other methods instead!)

Pasting code containing Javascript directly into the text editor can lead to errors.

The method we recommend is to use a plugin that processes the code snippet using ’shortcodes’ added to your content.

What Is A Shortcode?

A ‘shortcode’ is a is a code shortcut that allows users to perform complex functions without coding or programming skills. Shortcodes are typically used in pages, widgets, and posts to trigger a complex script into action.

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

Shortcode

(This is what a shortcode looks like!)

Shortcodes enable plugin developers to create complex scripts such as content generators, user forms, image galleries, etc., which you then insert into your content via a short text string.

How To Use Shortcodes

How shortcodes work

(How WordPress shortcodes work)

The screenshot above explains how a WordPress shortcode works:

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

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

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

[4] WordPress will now automatically process your function.

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

Inserting Code Snippets Into Your Pages And Posts Using A Plugin

Let’s now show you how to add scripts and code into your WordPress pages using various free WordPress plugins.

Insert Html Snippet

Insert HTML Snippet Plugin For WordPress

(Insert Html Snippet Plugin)

As the name suggests, this plugin allows you to easily insert HTML snippets into posts, pages and sidebar widgets.

Essentially, how this plugin works is that it allows you to create and store 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, image galleries, video/audio players, custom javascript codes, etc.

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

Embedding Code Snippets And Scripts Into Your WordPress Pages – Tutorial

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

Install 'Insert Html Snippet'

(Locate and install ’Insert Html Snippet’)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the plugin)

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

XYZ Html plugin menu

(XYZ HTML plugin menu)

Info

Important: Make sure to have your code snippet handy (e.g. save it in a plain text file) …

Copy your code to the clipboard

(Select and copy all of the code to your clipboard)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets)

Click on the Add New HTML Snippet button 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’ section, give your code snippet a name (this is for your reference), paste your script into the HTML code section and click on the Create button …

Creating a new HTML Snippet

(Insert HTML Snippet – Creating a new Snippet)

This 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 useful if, for example, you are awaiting approval of the code but need to create and publish the content where your code will eventually display.

In this case, go ahead and create a new code 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 snippet without having code.

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

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

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

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

A table with all the code snippets you create show up in the ‘HTML Snippets’ admin screen …

Snippets and shortcodes table

(List of snippets)

Because the plugin stores all snippets in its own database, you can add one shortcode to a number of pages and posts and control everything from one location. If you alter the code and update the snippet, whatever is controlled by the snippet will automatically be updated wherever the shortcode has been added.

Shortcodes can be inserted into your content in the WordPress visual editor.

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

 Add shortcodes to content directly in the WordPress visual editor.

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

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

Script added to content using a shortcode

(Script added via a shortcode)

Useful Information

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

Deactivate, delete, or edit your code snippets

(Deactivate, edit, and delete code snippets)

Note:

  • If you deactivate or delete a snippet but the plugin is left active, the shortcode will not display in your content. The plugin will fix your pages so that it will not be noticeable to your visitors.
  • If you deactivate the HTML Snippets plugin itself, the shortcode will show up in your content (you will need to manually removed all instances of the shortcode).

If the HTML Snippets plugin is deactivated, the shortcode will display as a line of text in your content

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

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

EmbedIt Pro

EmbedIt Pro

(EmbedIt Pro WP Plugin)

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

Once the plugin has been installed and activated, a new menu item called HTML Snippets will display in your main menu …

EmbedIt Pro menu

(HTML Snippets [EmbedIt Pro] plugin menu)

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

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

A couple of new menu buttons will display on your Visual Editor menu toolbar: HTML Snippet and Custom Field

The plugin adds new menu buttons to the visual editor toolbar

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

You can use the HTML Snippet button to place shortcodes into your content. With the cursor location selected, click on the HTML Snippet button to select and embed the code snippet in the text …

You can use the menu buttons to insert a shortcode into your pages.

(You can use the HTML Snippet button to add shortcodes to your posts.)

A small popup window will appear on your screen allowing you to insert any of the HTML Snippets you have saved. Type in the name of the HTML Snippet you would like added into your content and click OK to proceed …

Insert HTML Snippet

(Insert your HTML Snippet)

Your shortcode will be added where the cursor is located …

Shortcode inserted into content

(Shortcode added to content)

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

Publish to save your settings

(Update to save your settings)

View your post or page and test your script. The code should display in your content …

Voila ... your code has been added!

(What your visitors will see)

While you are logged into your site, you should see an ‘Edit Snippet’ button displayed below the section where your script has been added. This allows you to update code “on the fly” (this is useful if you need to change code elements, image sizes, etc.)

To edit your script, click on the Edit Snippet button …

Edit code on the fly!

(Change scripts “on the fly”!)

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

Update and republish your code to make global changes

(Update and republish your code to make sitewide changes)

For more details, go here}:

Useful WordPress Tip

Tip #1: EmbedIt Pro lets you export your snippets (and import these into other 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 posts.

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

Add shortcodes to your content via custom fields

(Paste shortcodes into your posts with custom fields)

Tip #3 – Use 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 code processing functionality …

(Some themes offer built-in functionality)

(Some WordPress themes come with built-in functionality)

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

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

Some applications, however, require that code be inserted into content but also to sections such as page headers, footers, etc.

There are a number of plugins that let you add code to the header or footer section of pages and posts. Many of these plugins, however, will add code to all pages and posts, not just the ones you want (some plugins will add the code to every single page and then let you turn the code off for individual pages or posts).

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

Info

The information below is for advanced users. If you need any help modifying code on your site, please contact a professional WordPress web developer.

CSS & JavaScript Toolbox

CJT WP Plugin

(CSS & JavaScript Toolbox WP Plugin)

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

The way CJT works is that it lets you modify your site’s functionality by adding custom code via code blocks that can be assigned to individual posts, pages, custom posts, categories, expressions, URLs, and more!

Idea

For comprehensive documentation, go here:

Note: The first time you try to use CJT, you will be asked 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 CJT is used

(First-time plugin use requires database tables installation)

After installation, a new menu item called CSS & JavaScript Toolbox will be added to your dashboard menu as well as a dashboard panel with news and information about how CJT is being used on your site …

CJT menu

(CSS & Javascript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox

CSS & JavaScript Toolbox menu

(CJT menu)

The main CJT dashboard will come up …

CSS & JavaScript Toolbox dashboard

(CSS & Javascript Toolbox dashboard)

Click on the New Code Block button to begin adding new code …

CJT - Add New Code Block

(CSS & JavaScript Toolbox – Add New Code Block)

In the ‘Create New Code Block’ window, type a name, 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 specify the “Initial Block Position” (this allows you to specify if the script should be added before or after all other code in the header or footer. Options = First Block / Last Block.). Click Create

'Create New Code Block' window

(‘Create New Code Block’ window)

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

CJT code area

(CJT content field)

Next, select where you want to insert the block (e.g. Pages, Categories, etc …)

Specify where to insert your block of code

(Specify where to insert your code block)

The CJT screen also various icons you can click to access different functions, help, etc. (hover your mouse over the icons for tooltip descriptions) …

Access CJT features via the toolbar

(Access more CJT features via the toolbar)

Click the ‘Save All Changes’ button when you you are done creating or editing a 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:

Useful Information

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 conversion tracking code to a section of your site 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 the following:

How To View Source Code In Firefox

First, open up your internet browser (e.g. Firefox) and go to the page where you have added the code.

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

Tools > Developer > Page Source

(How to view hidden code in Firefox)

A new browser opens up with the page code displayed.

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

Page code

(Page code)

If you can see the code in your page, then the next step is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the process and make sure that you have embedded your code correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your site before adding, changing or deleting code.

Inserting Code Snippets In WordPress

Congratulations, now you know how to embed snippets of code into your WordPress content.

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com

Recommended Video Courses For WordPress Users

Build An e-Commerce Store With WordPressBuild An e-Commerce Store With WordPress

Learn how to set up an e-commerce store on your WordPress site using e-commerce platforms like WooCommerce and Easy Digital Downloads.

More info: Build An e-Commerce Store With WordPress

Recommended Video Courses For WordPress Users

How To Set Up A Forum On WordPressHow To Set Up A Forum On WordPress

Learn how to set up a forum for your visitors, prospects, customers, members, or affiliates using WordPress.

More info: How To Set Up A Forum On WordPress

Recommended Video Courses For WordPress Users

How To Back Up & Restore WordPress SitesHow To Back Up & Restore WordPress Sites

Learn how to safely and automatically backup your WordPress files and database and how to easily restore your WordPress site if something were to happen.

More info: How To Back Up & Restore WordPress Sites

Recommended Video Courses For WordPress Users

How To Optimize WordPressHow To Optimize WordPress

Learn how to optimize your WordPress site and improve your page loading speed.

More info: How To Optimize WordPress

Recommended Video Courses For WordPress Users

Using S2 MemberUsing S2 Member

Learn how to set up and configure a WordPress membership site using the S2 Member free WordPress membership plugin.

More info: Using S2 Member

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

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