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 Snippets Of Code And Scripts Into 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 successfully manage a site.

There could be occasions, however, where you may choose to paste a snippet of code into content inside your posts in order to extend the capabilities of your site. Typical examples where adding snippets of code to pages could be used to enhance the functionality your site include:

  • Special offer automatic expiry date
  • Adding a Google search box
  • Newsletter subscription forms
  • Display relevant banner ads
  • Analytics code (e.g. Facebook Ads)
  • etc.

Adding scripts to your pages can expand your site's functionality

(Adding code to content can give you additional functionality)

Info

In this step-by-step tutorial, you will learn how to easily add code snippets to your WordPress content with and without plugins.

Embedding Simple HTML Code Into Your WordPress Posts Using The Text Editor

Useful Information

Note: We recommend backing up your database and files before adding any scripts or code to WordPress. If you don’t want to do site backups, then consider using a professional service, or use WordPress backup plugins.

You can read about a great WordPress backup plugin that we recommend using to completely automate your WordPress site backups here:

Useful Info

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

Do not add scripts inside the visual editor

(Pasting code into your visual editor will not work)

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

First, locate 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 code

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

Select and copy your code to the clipboard …

Copy all of the code to your clipboard

(Highlight and copy your code to the clipboard)

Next, open your post or page and in the Visual Editor, add placeholder symbols (e.g. @@@@@) where you want your script to appear in your content (insert a new line) …

Add a placeholder to mark the location where you want your script to display

(Add placeholder characters to mark the location where you would like your script to appear in your content)

Click on the Text editor to paste in the code …

Switch to the Text editor to paste your code

(Code must be pasted in your Text editor)

Locate and select the placeholder characters …

Select and highlight your placeholder

(Select and highlight the line containing the placeholder)

Paste the code into your content, replacing your highlighted placeholder …

Use the text editor to add simple HTML to your content

(Paste your HTML code into your content)

Save and publish the page or post, then preview …

Preview and test any code added to your posts or pages

(Preview and test any code you add to your content)

For a detailed tutorial on using basic HTML, go here:

Important

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

Don't use the text editor to add Javascript code

(Avoid using the text editor to add complex code … use the other methods described below instead!)

Pasting code containing JavaScript directly into the WP text editor could lead to errors.

A better way to embed code into posts and pages is to enter the snippet of code into a plugin that will “call” the script from a ‘shortcode’ pasted into your content.

WordPress Shortcodes

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

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

WP shortcode

(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 using a short text string.

How Shortcodes Work

How a WordPress shortcode works

(How to use WordPress shortcodes)

The above explains how WordPress shortcodes work:

[1] You install a plugin that allows you to paste a snippet of code into a special field (we’ll show you an example of this in the tutorial below)

[2] After adding the script to the field and saving, the plugin generates a unique shortcut for processing the script.

[3] Once you have embedded your shortcode into the content, publish or update your page.

[4] WordPress will now process the script.

Shortcodes are great because you don’t have to mess with code … just add the shortcode to your content and WordPress does the rest!

Inserting Code Into WordPress Pages And Posts Using A Plugin

Let’s now show you how to add code into your widgets, pages, and posts using free WordPress plugins.

Insert Html Snippet

Insert Html Snippet WordPress Plugin

(Insert HTML Snippet)

As the name suggests, Insert Html Snippet lets you easily insert snippets of code into posts, pages or sidebar widgets.

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

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

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

Embedding Code Into Your WordPress Posts – Tutorial

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

Installing the 'Insert Html Snippet' plugin

(Find and install the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate the plugin

(Activate the plugin)

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

XYZ HTML menu

(XYZ HTML plugin menu)

Important Info

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

Have your code ready to paste into the plugin

(Copy your code to the clipboard)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets menu)

The ‘HTML Snippets’ screen will appear. Click on the Add New HTML Snippet button …

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

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

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

Insert HTML Snippet - Add a new Snippet

(Adding a new HTML Snippet)

Your new snippet will be saved and published as a shortcode

Your new HTML Snippets shortcode!

(HTML Snippets shortcode!)

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

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

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

(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 of your HTML Snippets by selecting XYZ Html > HTML Snippets from your main menu …

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

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

A table of all your code snippets will display in the ‘HTML Snippets’ admin screen …

List of snippets and shortcodes

(Snippets and shortcodes list)

Because the plugin stores all code snippets in its own database, you can add the same snippet to multiple pages and posts and control everything from one location. If you update the code snippet, your code will automatically update throughout your content.

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

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

 Paste shortcodes into content directly in the WordPress visual editor.

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

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

Script added to content using a shortcode

(Script added via a shortcode)

Info

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

Edit, deactivate, and delete your snippets

(Edit, deactivate, and delete your snippets)

Note:

  • If you deactivate or delete a snippet but leave the plugin active, your shortcode will not display in your content.
  • If the plugin is deactivated, your shortcode will show up as a line of text in your content.

If the HTML Snippets plugin itself gets deactivated, your shortcode will display in your content

(If you deactivate the HTML Snippets plugin, the shortcode text will appear in the content)

For more details, go here}: Insert HTML Snippet

EmbedIt Pro

EmbedItPro Plugin

(EmbedIt Pro WP Plugin)

EmbedIt Pro gives you similar functionality to the previously described plugin, with some additional features.

After installing and activating EmbedIt Pro, a new menu item called HTML Snippets will be added to your main menu …

HTML Snippets [EmbedIt Pro] menu

(EmbedIt Pro plugin menu)

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

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

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

EmbedIt Pro adds new menu items to the visual editor toolbar

(The plugin 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 in your text …

You can use the HTML Snippet button to place a shortcode into your content.

(You can use the HTML Snippet button to place a shortcode into your pages.)

A popup window will display on your screen allowing you to insert any of the HTML Snippets you have stored. Select the HTML Snippet you would like embedded into your post/page and click OK to proceed …

Insert name of the HTML Snippet

(Insert your HTML Snippet)

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

Shortcode added to content

(Shortcode inserted into content)

Click Publish or Update to save …

Publish to save your settings

(Update to save your settings)

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

Content with script added

(Content with script added)

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

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

Make updates to code on the fly!

(Adjust code “on the fly”!)

This takes you to the Edit HTML Snippet screen. Make the required changes to the code and resave. All content will update automatically with the changes …

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

(Edit, update, and 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 WordPress sites) using the Tools > Export function …

Export your Snippets

(Export your Snippets)

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

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

Add shortcodes to your posts with custom fields

(Paste shortcodes into your posts via custom fields)

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

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

(Some themes provide built-in code insertion functionality)

(Some WordPress themes provide built-in functionality)

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

With a plugin like EmbedIt Pro, you easily insert code into content inside your posts and pages.

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

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

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

Note

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

CSS & JavaScript Toolbox

CJT Plugin For WordPress

(CSS & Javascript Toolbox – WordPress Plugin)

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

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

Important Info

For comprehensive documentation and user manual, go here:

Note: The first time you try to use 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’ and the plugin will take care of the rest …

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

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

After installation, a new menu item called CSS & JavaScript Toolbox will display in your dashboard menu as well as a dashboard panel with news and information about how CJT is being used on your site …

CJT plugin menu

(CJT menu)

Click on CSS & Javascript Toolbox

CJT plugin menu

(CSS & JavaScript Toolbox plugin menu)

The CSS & JavaScript Toolbox screen will load …

CSS & Javascript Toolbox dashboard

(CSS & JavaScript Toolbox screen)

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

CSS & Javascript Toolbox - New Code Block Button

(CJT – Add New Code Block)

In the ‘Create New Code Block’ window, type 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” (specify where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (specify whether the script should be added before or after all other code in 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 field will appear. Paste your code or script into this section …

CJT content field

(CJT code field)

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

Select where to insert your code

(Specify where to insert your code block)

The plugin dashboard also has a number of icons you can click to access different features, help, etc. (hover your mouse over the icons for functionality descriptions) …

Access more CJT features via toolbar icons

(Access more plugin features via the toolbar menu)

Click Save All Changes to save your settings …

Click 'Save All Changes' to save your settings

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

Go here for more information:

Idea

Tip: Verifying If Your Code Has Been Added Correctly

Some scripts will ask you to verify that you have added the code correctly and some will not.

If you have pasted conversion tracking code into areas of your site that are not meant to be visible (like the ”header” section) and you would like to check if the code has been added correctly, then do this:

How To View Hidden Page Code In Firefox

First, open up your internet browser (we’ll use Firefox in this example) and go to the page that contains your code.

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

Tools > Web Developer > Page Source

(Tools > Web Developer > Page Source)

A new window opens with the page code displayed.

Scroll down the screen until you can see the code that you have added (if adding code to the header section, it will normally be located  between the <head> and </head> tags) …

Source code

(Page code)

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

Adding Code In WordPress Pages

Congratulations! Now you know how to embed snippets of code into your content.

***

"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