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 And Scripts To Your Pages And PostsOne of the most powerful aspects of using WordPress is that you don’t need to have technical skills like editing code to manage a website successfully.

There could be situations, however, where you may choose to add a script or code snippet to content in order to add particular functions or features to your site. Common examples where inserting snippets of code into pages or posts may be used to enhance your site include:

  • Scarcity offers (e.g. “This offer expires in less than 2 days)
  • Adding a search box to your sidebar, page, or post
  • Adding newsletter subcription forms
  • Display contextual advertising
  • Conversion tracking code (e.g. Facebook Ads)
  • etc.

Adding code to content can expand your site's functionality

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

Useful Information

Some script features can be added to WordPress using plugins that make handling code easier. In this step-by-step tutorial, you will learn how to easily insert code snippets into your WordPress pages. We’ll also show you different methods you can use to insert code snippets into your content.

Inserting Code Into Your WordPress Pages - Manual Method

Warning

Note: Make sure to back up your site files and database before adding any scripts or code to WordPress. If you don’t want to do site backups, then get professional WordPress assistance services, or use a backup plugin.

Learn about a great WordPress backup plugin that we recommend using to automate WordPress file and data backups here:

Useful Information

Code cannot be added directly into content via the WordPress visual editor …

Do not paste code inside your visual editor

(Do not insert scripts into the WordPress visual editor)

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

First, find or create the code you want to add to your content. You can use a free web-based HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or consider using HTML code templates

Use a simple HTML editor or HTML templates to create your HTML code

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

Copy all of the code to your clipboard …

Highlight and copy your code to the clipboard

(Select and copy the code to your clipboard)

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

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

(Add a placeholder to mark the location where you want your code to display in your content)

Next, click on the Text editor …

Code must be pasted in the Text editor

(Code must be pasted in your Text editor)

Locate and highlight your placeholder …

Select and highlight the line containing your placeholder

(Select and highlight the line containing the placeholder)

Paste your HTML code into your content …

HTML code pasted into text

(Paste the code into your text)

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

Preview and test any code added to your pages or posts

(Preview and test any code inserted into content)

We have written a detailed tutorial about using basic HTML in WordPress here:

Important

While the above method can be used to add simple HTML code to content, we do not recommend pasting complex code directly into your content (e.g. subscriber forms, etc.) …

Avoid using the WordPress text editor to add Javascript code

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

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

A better way to add scripts to pages and posts is to use a plugin that automatically processes the script from a ‘shortcode’ added to your content.

What’s A Shortcode?

’Shortcodes’ are short bits of code that allow you to perform complex functions in WordPress without coding skills or knowledge. Shortcodes can typically be added to widgets, pages, and posts to trigger a complex script into action.

Shortcodes normally look like descriptive strings of text enclosed by square brackets, e.g. ‘[ezformshortcode]’ …

Shortcode

(WP shortcode)

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

How To Use Shortcodes

How a shortcode works

(How WordPress shortcodes work)

The above explains how to use a shortcode:

[1] First, install a plugin that lets you paste a script into a special field (see the tutorial below for an example)

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

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

[4] The plugin will now automatically load the code snippet.

The great thing about using shortcodes is that you don’t have to mess with the actual code to get the functionality you want … simply add the shortcode to your page, widget, or post and WordPress does the rest!

Embedding Code Snippets Into WordPress Pages Using Plugins

In the tutorials below, you will learn how to add snippets of code into your widgets, pages, and posts using various free WordPress plugins.

Insert HTML Snippet

Insert HTML Snippet WordPress Plugin

(Insert Html Snippet Plugin)

As the name suggests, this plugin lets you easily add snippets of code into a post, page, or a sidebar widget.

How this plugin works is that it allows you to create separate HTML snippets and add them to your content using shortcodes or custom fields.

HTML snippets are objects that can store code for just about everything: video embed codes, javascript codes, etc.

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

Inserting Code And Scripts Into WordPress Pages – Step-By-Step Tutorial

Locate and install the Insert Html Snippet plugin inside your WP dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Locate and install the 'Insert Html Snippet' plugin

(Install the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

Activate 'Insert Html Snippet'

(Activate the ‘Insert Html Snippet’ plugin)

After installing and activating the Insert Html Snippet plugin, a new item called XYZ Html will appear in the WP menu …

XYZ Html menu

(XYZ Html plugin menu)

Useful Information

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

Have your code ready

(Copy your code to the clipboard)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets menu)

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

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

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

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

Insert HTML Snippet - Creating a new Snippet

(Insert Html Snippet – Add a new HTML Snippet)

A new HTML snippet will be created, saved, and published as a shortcode

Shortcode!

(Your new shortcode!)

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

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

You can also create a new shortcode without having your code snippet yet.

(You can also create a HTML snippet without having a script.)

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

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

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

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

Snippets and shortcodes table

(Snippets and shortcodes list)

Because code snippets are stored in an independent location (i.e. the plugin’s database), you can use a single snippet in various pages and control everything from a single location. If you edit the code in your snippet, whatever is controlled by the snippet will automatically update throughout your content.

Shortcodes can be pasted in the WordPress visual editor.

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

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

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

After publishing, preview and test the script …

Script added via a shortcode

(Script added using a shortcode)

Important Info

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

Deactivate, delete, and edit your code snippets

(Deactivate, delete, and edit snippets)

Note:

  • If you delete or deactivate a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content.
  • If the HTML Snippets plugin itself is deactivated, your shortcode will appear as a line of text in your content (you will need to manually delete all instances of the shortcode).

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

(If the HTML Snippets plugin is deactivated, the shortcode text will show up in your content)

For more details, go here}: Insert HTML Snippet Plugin

EmbedIt Pro

EmbedItPro Plugin

(EmbedItPro – WordPress Plugin)

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

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

EmbedIt Pro plugin menu

(EmbedIt Pro plugin menu)

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

Shortcode - EmbedIt Pro

(EmbedIt Pro Shortcode)

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

The plugin adds new menu buttons to the visual editor

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

You can use the HTML Snippet button to add shortcodes to your pages. With the cursor location selected, click on the HTML Snippet button to select and insert the code snippet into your text …

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

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

A a new 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 would like inserted into your post/page and click OK to proceed …

Insert name of the HTML Snippet

(Insert name of the HTML Snippet)

Your shortcode will be pasted into the content …

Shortcode added to content

(Shortcode added to content)

Click Publish or Update to save …

Update to save your settings

(Publish to save your settings)

View your post or page and test your script. The script should have been added to your content in the location you have specified …

What your visitors will see

(Content with script added)

While you are logged into your site, an ‘Edit Snippet’ button should display below the area where your code snippet has been inserted. This allows you to make adjustments to scripts “on the fly” (this is useful if you need to edit form elements, resize images, etc.)

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

Make adjustments to scripts on the fly!

(Adjust code “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Make your changes and update. All content will automatically update with your changes …

Update and republish your code to make sitewide changes

(Update and republish your code to make sitewide changes)

For more details, go here}:

Useful WordPress Tip

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

Export your HTML Snippets

(Export your HTML Snippets)

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

If you know how to use custom fields in WordPress, 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.

Add shortcodes to your posts using custom fields

(Add shortcodes to your content via custom fields)

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

Many WP themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that allow you to insert raw code into your content …

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

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

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

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

Some applications, however, require that code be added not only to content but also to areas like page headers, footers, etc. (like product download pages, opt-in confirmation pages, and so.)

You can find a number of WordPress plugins that will allow you to add code to the header or footer section of posts and pages. Many of these plugins, however, will add code to all pages or posts, not just the ones you want (some plugins and themes will add the code to every page and then let you turn the code on/off on individual pages or posts).

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

Info

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

CSS & Javascript Toolbox

CJT WordPress Plugin

(CSS & Javascript Toolbox Plugin)

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

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

Info

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

Note: When you first try 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’ button …

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

(First-time plugin use requires database installation)

After installing the plugin, you will see a new menu item on the WordPress menu called CSS & Javascript Toolbox as well as a dashboard panel with latest news and plugin usage information …

CSS & JavaScript Toolbox plugin menu

(CJT plugin menu)

Click on CSS & JavaScript Toolbox

CJT menu

(CSS & JavaScript Toolbox menu)

The main CJT screen will load …

CSS & JavaScript Toolbox dashboard

(CSS & Javascript Toolbox dashboard)

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

CSS & Javascript Toolbox - Add New Code Block

(CSS & Javascript Toolbox – New Code Block)

In the ‘Create New Code Block’ window, give your new code block 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 choose the “Initial Block Position” (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’ options)

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

CJT content field

(CJT content area)

Next, select where you want to insert your code (e.g. Pages, Custom Posts, etc …)

Specify where to add your block of code

(Specify where to add your code block)

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

Access plugin functionality via the toolbar menu

(Access more CJT features via the toolbar)

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

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

More information:

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 want to check if the code has been added correctly, then here’s how to do it:

How To View Source Code In Firefox

First, open up your internet browser (e.g. Firefox) and visit the page that contains the code.

From the browser menu, select Tools > Developer Tools > Page Source

Tools > Developer > Page Source

(How to view source code in Firefox)

A new browser opens and displays the source code for that page.

Use the search function (Ctrl+F) or scroll down the screen until you see the code that you have added (if adding code to a page header, it will typically be contained  between the <head> and </head> tags) …

Page code

(How to view your 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 added the code correctly, or get a professional to help you. As stated earlier in this tutorial, always back up your site before adding, changing or deleting code.

How To Add Code And Scripts In WordPress Content

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

***

"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

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