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 …

For a whitelabel version of this tutorial visit WPTrainingManual.com.

How To Insert Code Snippets Into WordPress ContentOne of the most powerful aspects of using WordPress is that you don’t need to mess with code to run a website or blog.

You may come across times, however, where you may choose to paste a script or code snippet into your content in order to add new features or functionality. Typical examples where inserting scripts into posts or pages would extend the functionality of your site include:

  • Current date and time
  • Adding a Google search box to your page, post, or sidebar
  • Adding a subscription form
  • Display relevant ads
  • Conversion tracking code (e.g. Facebook Ads)
  • etc.

Adding code to your pages can give you additional functionality

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

Important

Some script functions can be added with plugins that require little to no messing with code. In this tutorial, we are going to show you how to easily add code snippets to your pages. You will also learn different methods you can use to add scripts and codes to your content.

How To Add Code To Your WordPress Posts Manually

Info

Note: Before adding any code or scripts to WordPress we recommend backing up your files and database first. If you don’t want to back up your files yourself, then get assistance from a WordPress professional, or use a WordPress backup plugin.

Learn about a great WordPress backup plugin that we recommend using to perform automated WordPress file and database backups here:

Useful Info

WordPress doesn’t allow you to add code directly into the visual editor …

Pasting code into the WordPress visual editor does not work

(Pasting code inside the WordPress visual editor does not work)

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

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

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

Highlight and copy the code to your clipboard …

Copy the code to your clipboard

(Select and copy the code to your clipboard)

Next, open your page or post and add placeholder symbols to mark the spot where you want your script to display in your content …

Add a placeholder where you want your script to display in your content

(Add placeholder symbols where you would like your script to display)

Next, switch to the Text editor to paste in the code …

Switch to the Text editor to paste in code

(Code must be pasted in the Text editor)

Find the placeholder text and select the line …

Select and highlight your placeholder characters

(Select and highlight the line containing your placeholder text)

Paste your HTML code over the selected placeholder …

Use the text editor to insert simple HTML code into your content

(Paste your HTML code over the highlighted text)

Save 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 pages)

To learn more about using basic HTML, refer to this tutorial:

Important

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

Don't use the WordPress text editor to add complex code ... use other methods instead!

(Don’t use the text editor to add Javascript code … use the methods below instead!)

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

A smarter way to embed code into WordPress content is to use a plugin that will “call” the script from ’shortcodes’ added to your content.

What Is A Shortcode?

’Shortcodes’ are short bits of code that allow users to perform complex functions with no coding or programming skills or knowledge. Shortcodes can typically be added to widgets, posts, and pages to trigger complex scripts into action.

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

What a WordPress shortcode looks like

(What a shortcode looks like)

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

How WordPress Shortcodes Work

How to use shortcodes

(How WordPress shortcodes work)

The above explains how to use a WordPress shortcode:

[1] First, install a plugin that lets you paste snippets of code into a special field (we’ll show you an example of this in the tutorial below)

[2] After pasting the code snippets into the field and saving, the plugin generates a unique shortcode for processing the script.

[3] After embedding the shortcode into your content, publish or update your page or post.

[4] The plugin will now process your code.

Shortcodes are great because you don’t have to mess around with scripts to get the functionality you want … simply add the shortcode to your content and WordPress does the rest!

How To Add Code Snippets To Your Pages And Posts Using A Plugin

Let’s now show you how to add snippets of code into your WordPress content using various free WordPress plugins.

Insert Html Snippet

Insert Html Snippet Plugin For WordPress

(Insert HTML Snippet – WordPress Plugin)

As the name suggests, Insert HTML Snippet allows you to embed HTML snippets into posts, pages or sidebar widgets.

How this plugin works is that it 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 code for just about everything: calculators, forms, video/audio players, javascript codes, etc.

The tutorial below shows you how to paste code into your pages and posts using Insert Html Snippet.

How To Add Snippets Of Code And Scripts To Your Posts – Tutorial

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

Install the 'Insert Html Snippet' plugin

(Installing the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the plugin)

After the plugin has been installed, a new menu item called XYZ Html will appear in the WP menu …

XYZ Html menu

(XYZ HTML menu)

Idea

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

Copy your code to the clipboard

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

Click on Add New HTML Snippet

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

(’Add New HTML Snippet’)

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

Insert HTML Snippet - Adding a new HTML Snippet

(Insert HTML Snippet – Creating a new Snippet)

Your snippet will be saved and published as a shortcode

Use the shortcode to embed your code into pages and posts!

(Your new HTML Snippets shortcode!)

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

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

You can also create a new snippet without having a script.

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

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

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

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

A list of all your code snippets and shortcodes will appear in the ‘HTML Snippets’ admin screen …

List of snippets

(Snippets table)

Because code snippets are stored in an independent location (i.e. a separate database), you can use one shortcode in various posts and pages and control everything from one location. If you edit the code snippet, your code will automatically update throughout your content.

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

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

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

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

After publishing, preview your content and test the script …

Script added to content via a shortcode

(Script added to content via a shortcode)

Important

As well as modifying the code in your snippet, you can deactivate or delete the snippets …

Deactivate, delete, and edit your snippets

(Delete, deactivate, and edit code snippets)

Note:

  • If you delete or deactivate a snippet but the plugin is left active, your shortcode will not display in your content. The plugin will remove any sections containing the shortcode from your content so that no gaps will be detected by visitors.
  • If the plugin itself is deactivated, the shortcode will show up as a line of text in your content.

If you deactivate the plugin itself, the shortcode will show up as a line of text in your content

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

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

EmbedIt Pro

EmbedIt Pro

(EmbedItPro WordPress Plugin)

EmbedIt Pro gives you similar functionality 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 display in the WP menu section …

HTML Snippets [EmbedIt Pro] plugin menu

(HTML Snippets [EmbedIt Pro] menu)

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

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

Two new items will display on your Editor menu toolbar: HTML Snippet and Custom Field

The plugin adds new menu items to the visual editor

(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 your snippet shortcode in your text …

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

(Use the HTML Snippet button to add shortcodes to your posts.)

A popup window will display on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you want to embed into your content 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 the ‘Publish’ or ‘Update’ button to save …

Update to save your settings

(Publish to save your settings)

View your updated post or page and test your script. The script should display in your content in the specified location …

Voila ... your script has been added!

(What your visitors will see)

While you are logged into your site, an ‘Edit Snippet’ button should display next to where your script has been added. This allows you to make changes to scripts “on the fly” (this is useful if you need to change form parameters, resize videos, etc.)

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

Update scripts on the fly!

(Adjust scripts “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Make your changes and update. All content will update throughout your site with your new changes …

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: The plugin allows you to export your snippets (and import these into other sites) using the Tools > Export function …

Export your Snippets

(Export your HTML Snippets)

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

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

Paste shortcodes into your posts via custom fields

(Embed shortcodes into your posts via custom fields)

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

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

(Some themes are built with built-in features)

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

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

A plugin like EmbedIt Pro lets you easily insert snippets of code into content inside your posts and pages.

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

There are a number of WordPress plugins that let you add code to the header or footer section of your pages. Many of these plugins, however, add code to all pages, not just the ones you want (check the plugin’s settings – some plugins will add code to all pages and then let you turn the code off for individual pages).

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

Useful Info

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

CSS & Javascript Toolbox

CSS & Javascript Toolbox WP Plugin

(CSS & JavaScript Toolbox)

CSS & JavaScript Toolbox (or CJT) lets you add code elements and contribute to your site’s own coding structure using a reasonably easy-to-use web interface.

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

Tip

For comprehensive documentation, go here:

Note: The first time you try to use 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 …

First-time plugin use requires database installation

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

After installation, you will see a new item on your WordPress menu section called CSS & Javascript Toolbox as well as a dashboard panel with latest news and information about how the plugin is being used on your site …

CSS & JavaScript Toolbox plugin menu

(CSS & JavaScript Toolbox menu)

Click on CSS & JavaScript Toolbox

CSS & JavaScript Toolbox menu

(CJT plugin menu)

This brings up the CSS & JavaScript Toolbox dashboard …

CSS & JavaScript Toolbox screen

(CSS & Javascript Toolbox screen)

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

CSS & Javascript Toolbox - Add New Code Block Button

(CJT – Add New Code Block)

In the ‘Create New Code Block’ window, add a name to your 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 whether the script should be added before or after all other code in the header or footer. Options = First Block / Last Block.). Click Create

'Create New Code Block' options

(‘Create New Code Block’ options)

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

CJT code area

(CJT code field)

Next, select where you want your code to be inserted (e.g. in specific Pages, Categories, etc …)

Specify where to insert your code

(Select where to insert your block of code)

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

Access more plugin functionality via the toolbar menu

(Access CJT functionality via toolbar icons)

Click the ‘Save All Changes’ button when done to save your settings …

Click 'Save All Changes' to save your settings

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

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

Info

Tip: How To View Your Code

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

If you have added 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 follow the steps below:

How To View Hidden Code In Firefox

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

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

How to view source code in Firefox

(Viewing page code in Firefox)

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

Use the search function (Ctrl+F) or scroll down the screen until you spot the code that you have added (code added to the header section is normally placed  between the <head> and </head> tags) …

How to view your code

(Source code)

If you can see the code in page source view, then all that’s left is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the process to make sure that your code has been embedded 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 Snippets In WordPress Posts And Pages

Congratulations, now you know how to add snippets of code to WordPress pages and posts.

***

"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)

For a whitelabel version of this tutorial visit WPTrainingManual.com.
Originally published as How To Insert Code And Scripts Into WordPress Posts And Pages.