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 Scripts To Your Posts And PagesOne of the main advantages of using WordPress is that you don’t need to mess with code to build a successful online presence.

There may be times, however, where you are required to add code to your content in order to add a new feature to your site. Useful examples where inserting snippets of code into pages or posts would extend the functionality of your site include:

  • Special offer expiry date
  • Adding a search box to your post, page, or sidebar
  • Adding lead capture forms
  • Display relevant ads
  • Conversion tracking code (e.g. Google Adwords)
  • etc.

Adding scripts to pages can give you additional functionality

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

Info

In this step-by-step tutorial, we show you how to insert scripts into your WordPress posts with and without plugins.

Adding Simple HTML Code To WordPress Posts And Pages Manually

Info

Note: We recommend backing up your site before adding any scripts or code to WordPress. If you don’t want to back up your site yourself, then get help from a WordPress professional, or use backup plugins.

You can learn more about a WordPress backup plugin that can fully automate your backup process here:

Important Info

You cannot paste code directly into your content via the WordPress visual editor …

Do not add code inside the WordPress visual editor

(Do not add code inside your visual editor)

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

First, source or create the HTML code you plan to add to your content. You can use a simple HTML editor (e.g. search online for “HTML Code WYSIWYG Editor“) or consider using HTML cheat sheets

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

(You can use a free web-based HTML editor or HTML templates to create your code. Source: HTML-Online.com)

Select the code that you want added to your page and copy it to your clipboard …

Copy all of the code to your clipboard

(Highlight and copy your code to the clipboard)

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

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)

Switch to the Text editor …

Switch to the Text editor to paste code

(Code must be pasted in your Text editor)

Find and select your placeholder …

Select and highlight your placeholder

(Select and highlight the line containing your placeholder)

Paste the code over your selected placeholder …

Paste the code over the selected placeholder

(Paste the code over your highlighted placeholder)

Remember to save and publish the work, then preview and test the results …

Preview and test any code added to your pages or 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, we do not recommend pasting scripts containing JavaScript code directly into your content (e.g. opt-in forms, etc.) …

Avoid using the WordPress text editor to add Javascript code ... use the methods below instead!

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

Pasting scripts directly into the WP text editor could lead to errors.

We recommend using a plugin that lets you “call” the script using ’shortcodes’ pasted into your content.

What’s A Shortcode?

A ‘shortcode’ is a code shortcut. It allows you to embed complex functions without coding or programming knowledge. Shortcodes can typically be added to posts, pages, and widgets to trigger a complex script into action.

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

Shortcode structure

(This is what a WP shortcode looks like!)

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

How A WordPress Shortcode Works

How shortcodes work

(How to use WordPress shortcodes)

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 creates a unique shortcut for calling up the script.

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

[4] The plugin will now process your code snippet.

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

Adding Scripts And Snippets Of Code To Your Pages Using A Plugin

There are various plugins that let you insert snippets of code into WordPress.

Insert Html Snippet

Insert Html Snippet Plugin For WordPress

(Insert HTML Snippet WordPress Plugin)

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

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

HTML snippets are objects that can store codes and scripts for just about anything: calculators, custom tracking codes, etc.

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

Inserting Code Snippets Into Your Pages And Posts – Step-By-Step Tutorial

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

Install the 'Insert Html Snippet' plugin

(Installing the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate 'Insert Html Snippet'

(Activate ’Insert Html Snippet’)

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

XYZ HTML plugin menu

(XYZ HTML plugin menu)

Useful Info

Important: Make sure to have your code snippet available (e.g. copied and pasted into a plain text file) …

Have your code ready

(Have your code ready)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen appears. Click on Add New HTML Snippet to create a new shortcode …

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

(’Add New HTML Snippet’)

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

Create a new HTML Snippet

(Insert Html Snippet – Adding a new HTML Snippet)

A new snippet will be saved and published as a shortcode

HTML Snippets shortcode!

(Your new HTML Snippets shortcode!)

You can also create a new snippet without having the script code. This is handy if, for example, you are waiting for approval of the code but need to create and publish the pages where your script will eventually appear.

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

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

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

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

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

Snippets and shortcodes table

(Snippets and shortcodes table)

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

You can embed shortcodes into your content directly inside the WordPress visual editor.

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

You can embed shortcodes into content in the WordPress visual editor.

(You can paste shortcodes into your content directly inside the WordPress visual editor.)

After publishing, preview your content and test your script …

Script added to content via a shortcode

(Script added using a shortcode)

Useful Information

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

Edit, deactivate, and delete your code snippets

(Edit, deactivate, and delete 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 automatically remove the line containing the shortcode so that it will not be noticeable to visitors.
  • If you deactivate the HTML Snippets plugin, the shortcode will appear as a line of text in your content.

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

(If the HTML Snippets plugin is deactivated, the shortcode text will appear in the content)

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

EmbedIt Pro

EmbedIt Pro - WordPress Plugin

(EmbedItPro)

EmbedIt Pro is similar to the previously described plugin, with some added features.

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

EmbedIt Pro menu

(EmbedIt Pro menu)

To create a new shortcode, click on HTML Snippets > Add New, paste your code, give your snippet a descriptive title and click Publish

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

Two new menu items will be added to your Editor toolbar: HTML Snippet and Custom Field

EmbedIt Pro adds new menu buttons to the visual editor toolbar

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

You can 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 insert your snippet shortcode into your text …

You can use the menu buttons to place a shortcode into your content.

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

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

Insert name of the HTML Snippet

(Insert your HTML Snippet)

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

Shortcode added to content

(Shortcode inserted into content)

Click Publish or Update to save …

Update to save your settings

(Publish to save your settings)

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

Content with script added

(Voila … your script has been added!)

While you are logged into your WordPress administration area, you should see an ‘Edit Snippet’ button displayed next to the section where your code snippet has been inserted. This lets you adjust your script “on the fly” (this is useful if you need to edit form parameters, resize videos, etc.)

To update your code, click on the Edit Snippet button …

Make updates to code on the fly!

(Edit scripts “on the fly”!)

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

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

(Edit republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

Tip #1: EmbedIt Pro allows you to 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 insert code into your content.

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

Embed shortcodes into your content via custom fields

(Add shortcodes to your posts using custom fields)

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

Most WordPress themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that let you add raw HTML or JavaScript code to your pages …

(Some WordPress themes are built with built-in code adding features)

(Some WordPress themes come with built-in code insertion functionality)

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

A plugin like EmbedIt Pro lets you easily add code to content inside your posts and pages.

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

There are a number of plugins that will allow you to add code to headers and footers of posts and pages. Many of these plugins, however, add code every page on your site, not just the ones you want (check the plugin’s settings – some plugins and themes will add code to every page and then let you turn the code off for selected pages and posts).

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

Warning

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

CSS & Javascript Toolbox

CJT Plugin

(CJT WordPress Plugin)

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

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

Important Info

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

Note: After activating the plugin, you will need 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 …

First-time plugin use requires installing database tables

(Database tables must be installed the first time you use the plugin)

After installing CJT, a new menu item called CSS & Javascript Toolbox will be added to your main dashboard menu as well as a dashboard panel with latest news and plugin usage information …

CSS & Javascript Toolbox menu

(CJT menu)

Click on CSS & JavaScript Toolbox

CJT menu

(CSS & JavaScript Toolbox plugin menu)

This brings up the CSS & Javascript Toolbox screen …

CSS & Javascript Toolbox dashboard

(CSS & Javascript Toolbox dashboard)

Click on the New Code Block button to begin adding custom code to your site …

CSS & JavaScript Toolbox - New Code Block

(CSS & Javascript Toolbox – Add New Code Block Button)

In the ‘Create New Code Block’ window, enter a name, 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 if 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 area will appear. Paste your code or script into this section …

CJT content field

(CJT code field)

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

Select where to insert your code block

(Specify where to insert your code)

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

Access plugin features via toolbar icons

(Access more CJT features via toolbar icons)

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 settings

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

For more information, go here:

Important Info

Tip: How To View Your Code

Some scripts will ask you to verify if your code has been added 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” section) and you need to check if the code has been added correctly, then do the following:

Viewing Page Code In Firefox

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

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

Tools > Developer Tools > Page Source

(Viewing source code in Firefox)

A new window opens with the page code displayed.

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

Source code

(Page code)

If you can see your code, then the next step is to test your script and make sure that everything is working correctly. If you experience any errors, repeat the process and make sure that your code has been added correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your files and database before adding, changing or deleting code.

How To Insert Snippets Of Code In WordPress Content

Congratulations! Now you know how to easily code to your WordPress pages.

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now