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 Scripts Into WordPress Pages And PostsOne of the best reasons for using WordPress is that you don’t need to mess with code to manage a website successfully.

There could be situations, however, where you are required to add a code snippet or script to your content in order to extend the capabilities of your site. Some useful snippets of code you may want to insert into your pages or posts include:

  • Showing the current date on your time sensitive offer page
  • Adding a search box to your page, post, or sidebar
  • Adding subscription forms
  • Display contextual ads
  • Conversion tracking scripts (e.g. Facebook Ads)
  • etc.

Adding code to pages can give your site additional functionality

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

Important

Some script functions can be added through plugins that involve little to no messing with code. In this step-by-step tutorial, we show you how to easily add code snippets and scripts to WordPress pages.

Adding Simple Code Snippets To Your WordPress Pages And Posts Manually

Important

Note: Remember to back up your site files and database before adding any scripts to WordPress. If you don’t want to back up your site yourself, then consider getting support from a WordPress professional, or use a WordPress backup plugin.

Learn about a great WordPress backup plugin that can automate your site backups here:

Important Info

WordPress doesn’t allow you to add codes and scripts (e.g. HTML, Javascript) directly into the visual editor …

Pasting scripts into your visual editor will not work

(Do not paste code inside the WordPress visual editor)

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

First, find or create your HTML code. You can use a free web-based HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or consider using an HTML cheat sheet

Use a free web-based HTML editor or HTML templates to create your code

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

Select the code that you want to add to your post and copy it to your clipboard …

Highlight and copy all of the code to your clipboard

(Select and copy your code to the clipboard)

Next, open your page or post and add placeholder symbols where you want your code to display in your content …

Add placeholder characters to mark the location where you want your script to appear in your content

(Add placeholder characters to mark the spot where you want your code to display in your content)

Next, switch to the Text editor …

Switch to the Text editor to paste in your code

(Switch to the Text editor to paste your code)

Locate and select your placeholder symbols …

Select and highlight the line containing your placeholder symbols

(Select and highlight the line containing the placeholder)

Paste the code over the selected text …

Use the text editor to add simple HTML code to your content

(HTML code pasted into text)

Republish your post or page, then preview …

Preview and test any code you add to posts

(Preview and test any code added to posts)

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

Important

While the above is fine for adding simple HTML code to content, this is not recommended for pasting complex scripts directly into your content (e.g. newsletter forms, etc.) …

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

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

If you paste scripts directly into the WP text editor you could find the script causes errors.

A better way to add scripts to WordPress posts and pages is to use a plugin that will “call” the script from ’shortcodes’ placed into your content.

What Is A Shortcode?

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

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

What a shortcode looks like

(This is what a WP shortcode looks like!)

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

How WordPress Shortcodes Work

How a WordPress shortcode works

(How shortcodes work)

The screenshot above explains how to use shortcodes:

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

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

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

[4] The plugin will now automatically call up the code snippet when someone visits your post or page.

Shortcodes are great because you don’t have to mess with code … just add the shortcode where you would like the script to appear and WordPress does the rest!

How To Insert Snippets Of Code Into WordPress Pages Using A Plugin

There are a number of plugins that let you embed scripts and code into your WordPress posts and pages.

Insert Html Snippet

Insert Html Snippet - WordPress Plugin

(Insert Html Snippet Plugin)

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

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

HTML snippets can store code for just about everything: a video embed code from YouTube, javascript codes, etc.

The step-by-step tutorial below shows you how to paste code into your content using the Insert HTML Snippet plugin.

How To Add Scripts To Your WordPress Content – Tutorial

Download the plugin here, or locate and install the plugin inside your WP dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …

Find and install 'Insert Html Snippet'

(Install ’Insert Html Snippet’)

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate ’Insert Html Snippet’)

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

XYZ Html menu

(XYZ HTML plugin menu)

Important

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

Select and copy the code to your clipboard

(Have your code ready to paste into the plugin)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets menu)

Click on Add New HTML Snippet

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

(’Add New HTML Snippet’)

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

Adding a new HTML Snippet

(Insert HTML Snippet – Creating a new Snippet)

This creates, saves, and publishes your new snippet as a shortcode

HTML Snippets shortcode!

(Shortcode!)

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

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

You can also create a new snippet without having code.

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

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

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

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

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

Snippets table

(Table of snippets and shortcodes)

Because the plugin stores all snippets in its own database, you can use a single shortcode in a number of posts or pages and control everything from a single location. If you edit the code snippet, the code will automatically be updated everywhere the shortcode has been embedded.

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

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

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

(Shortcodes can be added to your content in the WordPress visual editor.)

After publishing, preview your content and test the script …

Script added via a shortcode

(Script added via a shortcode)

Important

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

Delete, deactivate, or edit code snippets

(Edit, delete, or deactivate code snippets)

Note:

  • If you delete or deactivate a snippet but leave the plugin active, your shortcode will not display in your content. The plugin will fix the content so that no content gaps will be detected by visitors.
  • If you deactivate the plugin, the shortcode will show up as a line of text in your content and will need to be manually deleted.

If the plugin is deactivated, your shortcode will appear in your content

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

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

EmbedIt Pro

EmbedIt Pro - WordPress Plugin

(EmbedItPro – WordPress Plugin)

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

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

EmbedIt Pro menu

(EmbedIt Pro menu)

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

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

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

The plugin 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 a shortcode to your pages. With the cursor location selected, click on the HTML Snippet button to select and embed your snippet shortcode in your text …

Use the menu buttons to insert shortcodes into your content.

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

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

Insert HTML Snippet

(Insert your HTML Snippet)

Your shortcode will be pasted into the content …

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

Content with script added

(Voila … your code has been added!)

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

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

Edit scripts on the fly!

(Edit code “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Make your changes and save. All posts and pages will update globally with the changes …

Edit, 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: The plugin allows you to export your HTML 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 EmbedIt Pro plugin also uses WordPress Custom Fields to insert code into your content.

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

(Add shortcodes to your content via custom fields)

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

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 WordPress themes are built with built-in code insertion features)

(Some WordPress themes offer built-in code insertion 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 pages and posts.

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

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

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 described below.

Disclaimer

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

CSS & JavaScript Toolbox

CSS & Javascript Toolbox

(CJT WordPress Plugin)

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

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

Tip

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

Note: When you first try using CJT, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ button …

Database tables need to be installed the first time you use the plugin

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

After installing CJT, a new menu item called CSS & JavaScript Toolbox will display in the main dashboard menu as well as a dashboard panel with news and plugin usage information …

CSS & Javascript Toolbox menu

(CSS & Javascript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox on the menu …

CSS & JavaScript Toolbox menu

(CJT menu)

The main CJT screen will load …

CSS & JavaScript Toolbox dashboard

(CSS & Javascript Toolbox screen)

Click on the New Code Block button to add new code …

CSS & JavaScript Toolbox - New Code Block

(CSS & JavaScript Toolbox – Add 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 to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and select the “Initial Block Position” (this allows you to 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 field will appear. Paste your code or script into this section …

CJT content area

(CJT code area)

Next, select where you would like to insert the code block (e.g. in specific Pages, Custom Posts, etc …)

Specify where to add your code block

(Select where to insert your code block)

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

Access more CJT features via the toolbar menu

(Access 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:

Important

Tip: Verifying That You Have Added Your Code Correctly

Some scripts will ask you to verify that your code has been added correctly and some will not.

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

How To View Page Code In Firefox

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

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

Viewing hidden code in Firefox

(Tools > Developer > Page Source)

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

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

Page code

(Source 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 above process to make sure that your code has been pasted in correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your files and database before doing anything that involves changing code.

Embedding Code Into Your WordPress Pages And Posts

Congratulations! Now you know how to add scripts and code snippets to your content.

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie