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 Insert Code And Scripts In WordPress Posts And PagesOne of the best reasons for using WordPress is that you don’t need to know how to write code to successfully manage a website or blog.

There may be instances, however, where you may decide to paste a script or code snippet into content in order to add desired functions or features. Some common examples where inserting snippets of code into pages would add functionality to your site include:

  • Today’s date
  • Adding a Google search box
  • Adding a subscription form
  • Display contextual banner ads
  • Conversion tracking code (e.g. Google Adwords)
  • etc.

Adding code to content can give you additional functionality

(Adding scripts to content can give you additional functionality)

Info

In this step-by-step tutorial, you will learn how to easily embed scripts into WordPress posts and pages with and without plugins.

Inserting Simple HTML Code Into WordPress Pages And Posts Using The Text Editor

Important Info

Note: We recommend backing up your files and database before adding any scripts to WordPress. If you don’t want to perform your own backups, then get assistance from a WordPress professional, or use backup plugins.

You can read about a WordPress backup plugin that can fully automate your backup process here:

Important

Scripts cannot be pasted directly into the WordPress visual editor …

Pasting code inside your visual editor does not work

(Pasting scripts inside your visual editor does not work)

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

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

You can use an online HTML editor or HTML templates to create your code

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

Copy all of the code to your clipboard …

Copy the code to your clipboard

(Copy your code to the clipboard)

Next, open your page or post and in the Visual Editor, add placeholder text (e.g. @@@@@) where you would like your script to appear in your content (create a blank line) …

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

(Add a placeholder where you want your script to appear)

Switch to the Text editor to paste in your code …

Code must be pasted in your Text editor

(Code must be pasted in the Text editor)

Find and highlight your placeholder characters …

Select and highlight your placeholder characters

(Select and highlight your placeholder)

Paste your HTML code over the selected placeholder …

Use the text editor to add simple HTML to your content

(Use the text editor to add simple HTML to your content)

Save the content, then preview (and test) the results …

Preview and test any code inserted into your posts or pages

(Preview and test any code you add to content)

If you need help using basic HTML, go here:

Important

While the above method is fine for adding simple HTML to your content, this is not recommended for pasting scripts containing JavaScript code directly into your content (e.g. opt-in forms, etc.) …

Don't use the text editor to add Javascript code

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

Pasting complex directly into the WP text editor can lead to errors.

We recommend using a plugin that automatically processes snippets of code from ’shortcodes’ pasted into your content.

What Is A Shortcode?

A ‘shortcode’ is a simple bit of code that allows you to perform complex functions with no coding or programming knowledge. Shortcodes can typically be used in pages, widgets, and posts to trigger complex scripts into action.

Shortcodes normally look like little bits of text enclosed in square brackets, e.g. ‘[ezformshortcode]’ …

What a WP shortcode looks like

(What a shortcode looks like)

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

How A Shortcode Works

How to use shortcodes

(How shortcodes work)

The screenshot above explains how to use shortcodes:

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

[2] After pasting the code snippets into the special field and saving, the plugin creates a unique shortcode for calling up the script.

[3] Copy the shortcode and paste it into a new or existing post, page, or widget where you would like the function to display and publish.

[4] WordPress will now automatically process the script.

The great thing about using shortcodes is that you don’t have to mess with the actual script to get the functionality you want … simply add the shortcode where you would like the code to appear and WordPress does the rest!

Embedding Snippets Of Code Into WordPress Posts And Pages Using Plugins

There are various plugins that let you insert code into your WordPress widgets, pages, and posts.

Insert Html Snippet

Insert Html Snippet - WordPress Plugin

(Insert Html Snippet Plugin)

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

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

HTML snippets can store codes and scripts for just about everything: calculators, javascript codes, etc.

The tutorial below shows you how to use Insert Html Snippet.

How To Insert Code Snippets Into Your Content – Insert Html Snippet Plugin Tutorial

Install Insert Html Snippet inside your dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Installing the 'Insert Html Snippet' plugin

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

Activate the plugin …

Activate 'Insert Html Snippet'

(Activate ’Insert Html Snippet’)

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

XYZ Html plugin menu

(XYZ HTML menu)

Important

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

Have your code ready to use

(Have your code ready)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets)

The ‘HTML Snippets’ screen will display in your web browser. Click on the Add New HTML Snippet button …

'Add New HTML Snippet'

(’Add New HTML Snippet’)

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

Creating a new HTML Snippet

(Add a new HTML Snippet)

Your new snippet will be saved and published as a shortcode

Shortcode!

(Your new HTML Snippets shortcode!)

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

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

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

(You can also create a new HTML snippet without having your code snippet yet.)

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

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

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

A table with all the HTML snippets and shortcodes you have created will display in the ‘HTML Snippets’ admin screen …

List of snippets

(List of snippets and shortcodes)

Because the plugin keeps all snippets stored in a separate database, you can use the same snippet in multiple pages and control everything from one location. If you edit your code snippet, whatever is controlled by the snippet will automatically be updated in every instance where you have added the shortcode.

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

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

 Insert shortcodes into content in the WordPress visual editor.

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

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

Script added to content via a shortcode

(Script added to content via a shortcode)

Useful Information

You can edit, deactivate, or delete code snippets …

Edit, delete, or deactivate code snippets

(Delete, edit, and deactivate code snippets)

Notes:

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

If the plugin gets deactivated, your shortcode will show up as a line of text in your content

(If you deactivate the plugin, the shortcode will display in your content as text)

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

EmbedIt Pro

EmbedItPro - WordPress Plugin

(EmbedIt Pro WordPress Plugin)

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

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

HTML Snippets [EmbedIt Pro] plugin menu

(EmbedIt Pro plugin menu)

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

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 buttons to the visual editor

(EmbedIt Pro adds new menu items to the WordPress visual editor)

Use the HTML Snippet button to place a shortcode into your content. With the cursor location selected, click on the HTML Snippet button to select and place the code snippet into the text …

Use the menu buttons to add a shortcode to your posts.

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

A small window will display 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 embedded into your content and click the ‘OK’ button to proceed …

Insert your HTML Snippet

(Insert HTML Snippet)

The shortcode will be added where your cursor is located …

Shortcode inserted into content

(Shortcode added to 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 code should display in your content …

Content with script added

(What your visitors will see)

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

To edit your code, click the Edit Snippet button …

Change code on the fly!

(Modify scripts “on the fly”!)

This takes you to the Edit HTML Snippet screen. Make your changes and save. All posts and pages will be automatically updated with your new changes …

Edit republish your code to make sitewide changes

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

Export your HTML Snippets

(Export your Snippets)

Tip #2 (Advanced Users): EmbedIt Pro 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” button. This is useful if you want to insert code into a single post without leaving the post editing window.

Embed shortcodes into your content with custom fields

(Add shortcodes to your content with custom fields)

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

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 WordPress themes offer built-in code insertion functionality)

(Some themes offer built-in features)

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

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

Some applications (e.g. analytics and banner ad tracking tools), however, require code to be added not only to content but also to areas such as headers, footers, etc.

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

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

Useful Info

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

CSS & Javascript Toolbox

CSS & JavaScript Toolbox Plugin

(CJT Plugin For WordPress)

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

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

Important

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

Note: After activating the plugin, you will be asked to go through a custom installation process to create the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ and the plugin will take care of the rest …

First-time plugin use requires database installation

(First-time plugin use requires installing database tables)

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

CSS & JavaScript Toolbox menu

(CJT plugin menu)

Click on CSS & Javascript Toolbox on the menu …

CSS & JavaScript Toolbox plugin menu

(CJT menu)

The CSS & JavaScript Toolbox dashboard will load …

CSS & Javascript Toolbox dashboard

(CSS & Javascript Toolbox dashboard)

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

CJT - Add New Code Block

(CJT – New Code Block Button)

In the ‘Create New Code Block’ window, give your code block a name, select the checkbox to activate it (or leave it unchecked if you don’t want it activated yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and specify 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.). After selecting your options, click Create

'Create New Code Block' window

(‘Create New Code Block’ window)

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

CJT content field

(CJT content field)

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

Select where to add your block of code

(Specify where to add your block of code)

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

Access CJT functionality via the toolbar menu

(Access plugin features via the toolbar menu)

Click the ‘Save All Changes’ button after creating or editing your code block to save your 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 plugin developer’s site here:

Tip

Tip: How To Verify That Your Code Has Been Added Correctly

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

If you have pasted code into an area that is not meant to be visible (like the ”header” section) and you would like to check if the code has been added correctly, then here’s how to do it:

How To View Hidden Code In Firefox

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

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

Viewing page code in Firefox

(Tools > Developer Tools > Page Source)

A new window opens up with the source code displayed.

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

How to check that scripts have been added correctly

(Verify if 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 correctly. If you experience any problems, 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 adding, changing or deleting code.

How To Insert Code Snippets Into WordPress Content

Congratulations, now you know how to easily insert code into your posts.

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum