How To Embed Code Snippets And Scripts Into Your Pages And PostsOne of the best reasons for using WordPress is that you don’t need to mess with code to successfully manage your site.

There may be situations, however, where you may want to add a block of code to your content in order to add particular features or functionality to your site. Some common examples where adding scripts to posts or pages may enhance your site include:

  • Current date
  • Adding a search box
  • Adding opt-in forms
  • Display relevant advertising banners
  • Conversion tracking code (e.g. Google Analytics)
  • etc.

Adding code to content can help expand your site's functionality

(Adding code to your content can help expand your site’s functionality)

Important Info

In this tutorial, you will learn how to easily insert snippets of code and scripts into your posts and pages.

Adding Code To WordPress Pages And Posts – Manual Method

Useful Information

Note: Make sure to back up your database and files before adding any scripts or code to WordPress. If you don’t want to back up your data manually, then hire a professional service, or use backup plugins.

You can learn more about a great WordPress backup plugin that we recommend using to automate WordPress site backups here: Backup, Clone And Keep Your WP Site Protected With Backup Creator Plugin For WP

 

Important Info

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

Pasting code inside your visual editor will not work

(Do not insert scripts inside the WordPress visual editor)

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

First, find or create your code. You can use a simple HTML editor (e.g. search online for “Online HTML Editor Free“) or use an HTML cheat sheet

Use an online HTML editor or HTML templates to create your HTML code

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

Copy all of your code to the clipboard …

Copy your code to the clipboard

(Select and copy your code to the clipboard)

Next, open your post or page and select the spot where you want your script to appear in your content. Insert a new line and add placeholder text (e.g. @@@@@) …

Add placeholder symbols to mark the location where you want your script to display in your content

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

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 the placeholder symbols and select the line …

Select and highlight the line containing the placeholder characters

(Select and highlight the line containing the placeholder symbols)

Paste your HTML code over the highlighted placeholder …

HTML code pasted into text

(Use the text editor to insert simple HTML into your content)

Remember to publish your page or post and preview …

Preview and test any code added to posts

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

If you need help using basic HTML, go here: A Beginner’s Guide To Using HTML In WordPress

Important

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

Avoid using the WordPress text editor to add Javascript code

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

If you paste JavaScript code directly into the text editor you may experience errors.

A better way to embed scripts into WordPress posts and pages is to use a plugin that lets you “call” the script from ‘shortcodes’ added to your content.

WordPress Shortcodes

‘Shortcodes’ are simple bits of code that allow users to perform complex functions in WordPress without coding or programming skills or knowledge. Shortcodes can typically be added to posts, pages, and widgets to trigger complex scripts into action.

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

WordPress shortcode

(What a shortcode looks like)

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

How Shortcodes Work

How to use shortcodes

(How WordPress shortcodes work)

The screenshot above explains how to use a WordPress shortcode:

[1] First, install a plugin that allows you to paste a snippet 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 generates a unique shortcode for calling up this script.

[3] Next, copy this shortcode and paste it into a new or existing page, post, or widget where you would like the script to display and publish.

[4] WordPress will now call up the function.

The great thing about using shortcodes is that you don’t have to mess around with code … just add the shortcode to your content and WordPress does the rest!

Inserting Scripts Into WordPress Pages And Posts Using A Plugin

There are various plugins that allow you to embed code snippets into WordPress.

Insert HTML Snippet

Insert Html Snippet Plugin For WordPress

(Insert Html Snippet Plugin)

As the name suggests, this plugin allows you to insert snippets of HTML code into a page, post, or a sidebar widget.

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

HTML snippets are objects that can store code for just about anything: audio player code, javascript codes, etc.

The step-by-step tutorial below shows you how to add code to your posts and pages using the Insert HTML Snippet plugin.

Inserting Code Into Your WordPress Posts – Tutorial

Find and install Insert HTML Snippet inside your WP 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 'Insert Html Snippet' plugin

(Activate ‘Insert Html Snippet’)

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

XYZ HTML plugin menu

(XYZ HTML plugin menu)

Useful Info

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

Have your code ready

(Highlight and 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)

The ‘HTML Snippets’ screen will display in your browser. Click on Add New HTML Snippet to create a new shortcode …

'Add New HTML Snippet'

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

In ‘The Add New HTML Snippet’ screen, enter a descriptive title in the Tracking Name field (this is for your reference), paste your code into the HTML code section and click the Create button …

Insert HTML Snippet - Creating a new Snippet

(Create a new Snippet)

This saves and publishes a new snippet as a shortcode

Paste this shortcode into posts and pages!

(Paste this shortcode into your content!)

You can also create a snippet without having the script code. This is handy if, for example, you are waiting for approval of the code but need to proceed with getting the pages published where your code will eventually display.

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

You can also create a snippet without having the code.

(You can create a new shortcode without having your code yet.)

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

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

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

A list of all the HTML snippets and shortcodes you have created show up in the ‘HTML Snippets’ admin screen …

Snippets table

(Snippets list)

Because snippets get stored in an independent location (i.e. a separate database), you can add the same shortcode to different posts and pages and control everything from one location. If you update your code snippet, your code will automatically update in every instance where you have added the shortcode.

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

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

Shortcodes can be added in the WordPress visual editor.

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

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

Script added via a shortcode

(Script added using a shortcode)

Important

You can edit, delete, or deactivate your code snippets …

Deactivate, delete, or edit your code snippets

(Edit, deactivate, or delete your code snippets)

Notes:

  • If you delete or deactivate a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content. The plugin will automatically remove the line with the shortcode so that no gaps in the content will be detected by visitors.
  • If the plugin itself gets deactivated, your shortcode will show up in your content (it will need to be manually deleted).

If you deactivate the HTML Snippets plugin itself, your shortcode will appear as a line of text in your content

(If you deactivate the plugin itself, the shortcode string will appear in the content)

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

EmbedIt Pro

EmbedIt Pro - WordPress Plugin

(EmbedItPro – WordPress Plugin)

EmbedIt Pro gives you similar functionality 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 your main navigation menu …

HTML Snippets [EmbedIt Pro] plugin menu

(HTML Snippets [EmbedIt Pro] menu)

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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

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

EmbedIt Pro adds new menu items to the visual editor

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

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 your text …

Use the menu buttons to insert a shortcode into your posts.

(You can use the HTML Snippet button to insert a shortcode into your content.)

A small window will display on your screen allowing you to insert any HTML Snippets you have stored. Type in the name of the HTML Snippet you would like embedded into your page or post and click OK to proceed …

Insert HTML Snippet

(Insert HTML Snippet)

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

Shortcode inserted into content

(Shortcode added to 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. The script should have been added to your content where you have specified …

Content with script added

(What your visitors will see)

While you are logged into your site, an ‘Edit Snippet’ button should display near where your script has been inserted. This allows you to update scripts “on the fly” (this is useful if you need to edit form parameters, resize graphics, etc.)

To edit your script, click the Edit Snippet button …

Modify code on the fly!

(Edit scripts “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Make your changes and update. All pages and posts will be automatically updated with the new changes …

Update and republish your code to make global changes

(Update and republish your code to make sitewide changes)

For more information, go here: EmbedIt Pro Plugin

Useful WordPress Tip

Tip #1: EmbedIt Pro 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 posts.

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

Add shortcodes to your content with custom fields

(Add shortcodes to your posts via custom fields)

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

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

(Some WordPress themes provide built-in features)

(Some WordPress themes provide built-in functionality)

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

With a plugin like EmbeditPro, you easily add code and scripts to content inside your WordPress posts and pages.

Some applications, however, require that code be inserted into content, but also to areas such as page headers, footers, etc. (for example, product download pages, 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 every post and page on your site, not just the ones you want (check the plugin’s settings – some plugins will add code to every page and then let you turn the code off on individual pages).

If you want 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.

Warning

The section below is for advanced users.

CSS & Javascript Toolbox

CJT Plugin For WordPress

(CJT)

CSS & JavaScript Toolbox (or CJT) lets you add code to your WordPress installation code using a reasonably easy-to-use web interface.

The way the plugin 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, URLs, expressions, and much more!

Important Info

For comprehensive documentation and user manual, go here: CSS & JavaScript Toolbox.

Note: Before using the plugin, 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’ and the plugin will take care of the rest …

Database tables must be installed the first time the plugin is used

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

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

CSS & JavaScript Toolbox plugin menu

(CSS & JavaScript Toolbox menu)

Click on CSS & Javascript Toolbox on the menu …

CSS & JavaScript Toolbox plugin menu

(CSS & JavaScript Toolbox plugin menu)

The main CJT screen will load …

CSS & JavaScript Toolbox dashboard

(CSS & Javascript Toolbox dashboard)

Click on New Code Block to begin adding new code …

CJT - New Code Block Button

(CSS & JavaScript Toolbox – New Code Block Button)

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 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’ options)

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

CJT code field

(CJT content area)

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

Select where to add your code

(Select where to add your code block)

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

Access more plugin functionality via the toolbar menu

(Access more plugin features via the toolbar menu)

Click the ‘Save All Changes’ button to save your code settings …

Click 'Save All Changes' to save your code settings

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

For help and support with this plugin, visit the developer’s site here: CSS & Javascript Toolbox Plugin

Tip

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 an area that is not meant to be visible (like the “header”) and you would like to check if the code has been added correctly, then do this:

How To View Page Code In Firefox

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

Select Tools > Web Developer > Page Source from your browser menu …

Tools > Web Developer > Page Source

(Tools > Developer > Page Source)

A new browser window will open and displays the source code for the page.

Scroll down the screen until you 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) …

How to view your code

(Source 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 above process and make sure that your code has been pasted in correctly, or get help from a professional. As stated earlier in this tutorial, always back up your site before adding, changing or deleting code.

How To Insert Snippets Of Code & Scripts Into WordPress Pages And Posts

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