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 …

Adding Scripts And Code To WordPressOne of the most powerful aspects of using WordPress is that you don’t need to know how to write code to run a site.

You could come across occasions, however, where you may choose to paste a script or code snippet into posts or pages in order to extend the functionality of your site. Common scripts you may want to insert into your posts or pages include:

  • Current date
  • Adding a Google search box
  • Adding lead capture forms
  • Display relevant banner ads
  • Tracking scripts (e.g. Facebook Ads)
  • etc.

Adding scripts to content can give you additional functionality

(Adding scripts to pages can give your site additional functionality)

Important

In this step-by-step tutorial, you are going to learn how to embed scripts and code snippets into your WordPress pages. You are also going to learn different methods you can use to insert scripts into your content.

Adding Simple Code Snippets To Your WordPress Posts - Manual Method

Info

Note: Before adding any scripts to WordPress make sure to backup your site files and database first. If you don’t want to back up your files manually, then get professional support, or use WordPress backup plugins.

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

Useful Information

You cannot add code directly into the WordPress visual editor …

Do not add scripts into the WordPress visual editor

(Do not add scripts inside your visual editor)

You can, however, add simple HTML code to the WordPress text editor. To insert HTML code 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 simple HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or use an HTML cheat sheet

Use a 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. Image source: HTML-Online.com)

Copy all of the code to your clipboard …

Copy all of the code to your clipboard

(Highlight and copy your code to the clipboard)

Next, open your page or post and in the Visual Editor, add placeholder characters (e.g. @@@@@) in the the location where you want your script to display …

Add a placeholder where you want your script to display

(Add a placeholder to mark the location where you would like your script to appear)

Switch to the Text editor …

Switch to the Text editor to paste in code

(Code must be pasted in the Text editor)

Find and select the placeholder characters …

Select and highlight the line containing your placeholder text

(Select and highlight your placeholder characters)

Paste the code into your content …

Paste the code over the highlighted placeholder

(Simple HTML code pasted into text)

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

Preview and test any code added to your posts

(Preview and test any code you add to posts or pages)

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

Important

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

Avoid using the text editor to add complex code

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

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

A smarter way to add code to WordPress posts and pages is to enter the code snippet into a plugin that will “call” the script from ’shortcodes’ added to your content.

Shortcodes

’Shortcodes’ are code shortcuts that allow you to perform complex functions in WordPress without coding skills or knowledge. Shortcodes are typically used in pages, posts, and widgets to trigger a complex script into action.

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

What a WordPress shortcode looks like

(Shortcode)

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

How A Shortcode Works

How a WordPress shortcode works

(How a WordPress shortcode works)

The above explains how to use WordPress shortcodes:

[1] You install a plugin that allows you to 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 generates a unique piece of text that will call up the script.

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

[4] WordPress will now automatically process your code snippet whenever someone loads the content containing the embedded shortcode on their browser.

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

Inserting Snippets Of Code And Scripts Into Your WordPress Content Using Plugins

There are various plugins that let you add snippets of code into your pages, widgets, and posts.

Insert Html Snippet

Insert Html Snippet WordPress Plugin

(Insert HTML Snippet WP Plugin)

As the name of this plugin suggests, Insert Html Snippet lets you easily embed HTML code into a page, post, or a sidebar widget.

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

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

The tutorial below shows you how to add code to your posts and pages using the Insert Html Snippet plugin.

How To Embed Code Snippets Into Your Pages And Posts – Step-By-Step Tutorial

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

Find and install the 'Insert Html Snippet' plugin

(Installing ’Insert Html Snippet’)

Next, activate the plugin …

Activate 'Insert Html Snippet'

(Activate the plugin)

After installing and activating the Insert HTML Snippet plugin, a new item called XYZ Html will be added to the menu …

XYZ HTML menu

(XYZ HTML menu)

Important

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

Have your code ready to use

(Select 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 plugin menu)

Click on the Add New HTML Snippet button …

'Add New HTML Snippet'

(Click on the ‘Add New HTML Snippet’ button to create a new snippet)

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

Create a new HTML Snippet

(Add a new HTML Snippet)

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

HTML Snippets shortcode!

(Paste this shortcode into your content!)

You can also create a snippet without having code. This is useful if, for example, you are awaiting approval of the code but want to proceed with getting the content created where your script will eventually show up.

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

You can also create a new shortcode without having the script code.

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

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

Click on XYZ Html > HTML Snippets to view all of your snippets

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

A table of all your snippets and shortcodes will be displayed in the ‘HTML Snippets’ admin screen …

Snippets list

(Snippets and shortcodes table)

Because the plugin keeps all snippets stored in a separate database, you can use a single snippet in a number of pages and control everything from a single location. If you edit the code and update the snippet, your script will automatically update wherever the shortcode has been added.

You can paste shortcodes into content directly in the WordPress visual editor.

To place the code into your content using a shortcode, simply open your page or post and place your mouse cursor where you would like the code to display …

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

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

After publishing, preview your content and test your script …

Script added using a shortcode

(Script added via a shortcode)

Important

You can edit, deactivate, and delete your snippets …

Edit, delete, and deactivate your snippets

(Edit, deactivate, or delete your snippets)

Note:

  • If you delete or deactivate a snippet but leave the HTML Snippets plugin active, the shortcode will not display in your content.
  • If the HTML Snippets plugin itself is deactivated, your shortcode will appear in your content (the shortcode will need to be manually deleted).

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

(If the HTML Snippets plugin gets deactivated, your shortcode will appear as a line of text in the content)

For more details, go here}: Insert HTML Snippet 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 EmbedIt Pro, a new menu item called HTML Snippets will appear in the menu …

HTML Snippets [EmbedIt Pro] plugin menu

(HTML Snippets [EmbedIt Pro] menu)

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

Shortcode - EmbedIt Pro

(EmbedIt Pro Shortcode)

Two new menu items will appear in your Visual Editor menu toolbar: HTML Snippet and Custom Field

EmbedIt Pro adds new menu items to the visual editor toolbar

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

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

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

(Use the HTML Snippet button to add a shortcode to your content.)

A window will pop up on your screen allowing you to insert any HTML Snippets you have saved. Select the HTML Snippet you would like embedded into your page or post and click OK to continue …

Insert HTML Snippet

(Insert your HTML Snippet)

Your shortcode will be placed in the location you have specified …

Shortcode added to content

(Shortcode inserted into content)

Click Publish/Update to save …

Update to save your settings

(Update to save your settings)

View your post or page. The code should display in your content in the location you have specified …

What your visitors will see

(What your visitors will see)

While you are logged into your site, you should see an ‘Edit Snippet’ button displayed next to where your code has been inserted. This lets you modify your script “on the fly” (this is useful if you need to edit form parameters, image sizes, etc.)

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

Modify scripts on the fly!

(Edit scripts “on the fly”!)

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

Edit republish your code to make sitewide changes

(Edit republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

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

Export your HTML Snippets

(Export your HTML Snippets)

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

If you know how to use custom fields in WordPress, you can paste your HTML code into a custom field and add a shortcode in your content with the “Custom Field” menu 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 using custom fields

(Add shortcodes to your content with custom fields)

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

Most WordPress themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that let you embed raw code into your content …

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

(Some themes provide built-in code adding features)

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

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

Some applications, however, require that code be added not only to content but also to areas such as page headers, footers, etc.

There are a number of plugins that let you add code to the header section of your pages and posts. Many of these plugins, however, will add code to all pages and posts, not just the ones you want (some plugins and themes will add code to all pages and then let you turn the code on/off for selected pages or posts).

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

Warning

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

CSS & JavaScript Toolbox

CSS & Javascript Toolbox Plugin

(CSS & JavaScript Toolbox)

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

The way CJT works is that it allows you to modify your site’s functionality and appearance by adding custom code using code blocks that you can assign to individual posts, pages, custom posts, categories, expressions, URLs, and much more!

Info

For comprehensive documentation and user manual, go here:

Note: When you first try using CJT, you will need to install the plugin’s database tables and activate the plugin’s functionality. To do this, just click the ‘Install’ and the plugin will take care of the rest …

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

(First-time plugin use requires installing database tables)

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

CJT plugin menu

(CSS & JavaScript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox on the menu …

CJT plugin menu

(CJT plugin menu)

The CSS & JavaScript Toolbox screen will come up …

CSS & JavaScript Toolbox screen

(CSS & Javascript Toolbox screen)

Click on New Code Block to add new code to your site …

CSS & Javascript Toolbox - Add New Code Block

(CSS & Javascript Toolbox – 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 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 lets you specify whether 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’ window)

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

CJT code field

(CJT code area)

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

Select where to insert your block of code

(Specify where to add your block of code)

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 tooltips) …

Access plugin functionality via the toolbar

(Access more CJT features via toolbar icons)

Click Save All Changes to save your code settings …

CJT - 'Save All Changes' button

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

For help and support with this plugin, visit the plugin developer’s site here:

Tip

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 pasted conversion tracking code into an area 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 this:

How To View Page Code In Firefox

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

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

Viewing hidden code in Firefox

(Viewing page code in Firefox)

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

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

Source code

(Making sure that you have added your code correctly)

If you can see the code, then all that’s left is to test your script and make sure that everything is working as it should. If you experience any errors, repeat the above process and make sure that you have inserted your code correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your site before adding, changing or deleting code.

How To Insert Scripts Into WordPress Posts And Pages

Congratulations! Now you know how to easily code snippets to WordPress pages and posts.

***

"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