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 Add Snippets Of Code To Your WordPress PagesOne of the most powerful aspects of using WordPress is that you don’t need to know how to write code to build a successful web presence.

You could come across an instance, however, where you may choose to add a block of code to content inside your posts in order to get a certain result. Common examples where inserting snippets of code into content would enhance your site include:

  • Special offer expiry date
  • Adding a search box to your post, sidebar, or page
  • Adding subscription forms
  • Display relevant advertising
  • Analytics scripts (e.g. Google Analytics)
  • etc.

Adding code to your content can give your site additional functionality

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

Important

Some script functions can be added with plugins that make handling code easier. In this tutorial, we show you how to easily add snippets of code to your posts.

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

Important Info

Note: We recommend backing up your database and files before adding any code snippets to WordPress. If you don’t want to back up your data manually, then get professional WordPress support services, or use WordPress backup plugins.

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

Important

Scripts cannot be added directly into your content via the WordPress visual editor …

Do not insert code inside the WordPress visual editor

(Do not insert code inside the WordPress visual editor)

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

First, locate or create your code. You can use an online HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or consider using HTML code templates

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

(Use a free web-based 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 the code to your clipboard)

Next, open your post or page and in the Visual Editor, 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 appear

(Add placeholder text to mark the spot where you would like your code to display in your content)

Click on the Text tab …

Code must be pasted in the Text editor

(Code must be pasted in the Text editor)

Find the placeholder and highlight the line …

Select and highlight the line containing the placeholder

(Select and highlight your placeholder)

Paste the code into your text …

Use the text editor to embed simple HTML into your content

(Paste the code over your selected text)

Remember to save and republish the page and preview and test the results …

Preview and test any code added to posts or pages

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

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

Important

While the above can be used to add simple HTML to your content, we do not recommend pasting scripts containing complex 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 WordPress text editor to add JavaScript code)

If you paste code like Javascript directly into the text editor you will probably find that the script will cause an error.

A smarter way to add code to pages and posts is to use a plugin that automatically processes the script using a ‘shortcode’ pasted into your content.

WordPress Shortcodes

’Shortcodes’ are simple bits of code that allow you to perform complex functions without coding or programming knowledge. Shortcodes can typically be used in pages, widgets, and posts to trigger a complex script into action.

Shortcodes look like short bits of text enclosed by square brackets, e.g. ‘[ezformshortcode]’ …

Shortcode

(WP shortcode)

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

How WordPress Shortcodes Work

How to use shortcodes

(How a WordPress shortcode works)

The above explains how to use a shortcode:

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

[2] After adding the code snippet to the code area and saving, the plugin generates a unique text-based shortcode for processing this script.

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

[4] The plugin will now call up your code wherever the shortcode has been added.

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

How To Insert Scripts And Snippets Of Code Into Your WordPress Pages Using Plugins

In this section, you will learn how to add scripts and snippets of code into WordPress using free WordPress plugins.

Insert Html Snippet

Insert HTML Snippet - WordPress Plugin

(Insert Html Snippet – WordPress Plugin)

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

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

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

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

Adding Snippets Of Code And Scripts To Your WordPress Content – Insert HTML Snippet Tutorial

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

Install 'Insert Html Snippet'

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

Activate the plugin …

Activate the plugin

(Activate ’Insert Html Snippet’)

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

XYZ HTML menu

(XYZ HTML plugin menu)

Info

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

Have your code ready to use

(Have your code ready to use)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen appears. 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 the code snippet into the HTML code section and click on the Create button …

Create a new HTML Snippet

(Add a new Snippet)

A new HTML snippet will be created and published as a shortcode

Shortcode!

(HTML Snippets shortcode!)

You can also create a new snippet without having the script code. This is useful if, for example, you are awaiting approval of the code but would like to create and publish the pages where your script will eventually display.

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

You can also create a snippet without having your script yet.

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

After creating your HTML Snippet the plugin will store 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 your dashboard menu …

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

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

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

Snippets table

(Snippets and shortcodes table)

Because snippets get stored in an independent location (i.e. the plugin’s database), you can use a single snippet in various pages and control everything from one location. If you modify the code snippet, the script will automatically be updated wherever the shortcode has been added.

Shortcodes can be added inside the WordPress visual editor.

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

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

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

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

Script added to content via a shortcode

(Script added to content using a shortcode)

Useful Info

You can deactivate, edit, or delete snippets …

Edit, deactivate, or delete your code snippets

(Delete, edit, or deactivate your snippets)

Notes:

  • If you delete or deactivate a snippet but leave the plugin active, your shortcode will not display in your content. The plugin will automatically fix your pages so that no content gaps will be noticed by visitors.
  • If you deactivate the HTML Snippets plugin, your shortcode will display in your content (you will need to manually remove the shortcode wherever you have added it).

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

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

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

EmbedIt Pro

EmbedItPro Plugin For WordPress

(EmbedIt Pro Plugin)

EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some added features.

Once the plugin has been installed, a new menu item called HTML Snippets will appear in the WP menu section …

HTML Snippets [EmbedIt Pro] plugin menu

(HTML Snippets [EmbedIt Pro] plugin menu)

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

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

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

The plugin adds new menu buttons to the visual editor toolbar

(The plugin adds new menu items to the visual editor)

Use the HTML Snippet button to add a shortcode to your content. With the cursor location selected, click on the HTML Snippet button to select and embed the snippet shortcode in the text …

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

(You can use the HTML Snippet button to add shortcodes to your posts.)

A small window will pop up on your screen allowing you to insert any HTML Snippets you have stored. Type in the name of the HTML Snippet you would like added into your page or post and click OK to continue …

Insert name of the HTML Snippet

(Insert HTML Snippet)

Your shortcode will be inserted where your cursor is located …

Shortcode added to content

(Shortcode inserted into content)

Click the ‘Publish’ or ‘Update’ button to save …

Publish to save your settings

(Publish to save your settings)

View your post or page. The script should have been added to your content in the location you have specified …

What your visitors will see

(Voila … your code has been added!)

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

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

Make adjustments to scripts on the fly!

(Edit code “on the fly”!)

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

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

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

For more details, go here}:

Useful WordPress Tip

Tip #1: EmbedIt Pro allows you to export your snippets (and import these into other sites) using the Tools > Export function …

Export your HTML Snippets

(Export your Snippets)

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

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

Add shortcodes to your posts via custom fields

(Paste shortcodes into your posts using custom fields)

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

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

(Some WordPress themes come with built-in features)

(Some themes offer built-in functionality)

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

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

Some applications, 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 WordPress plugins that allow you to add code to headers and footers of pages. Many of these plugins, however, will add code every post or page on your site, not just the ones you want (check the plugin’s settings – some plugins and themes will add the code to all pages and then let you turn the code off on selected pages).

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

Info

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

CJT

(CJT – WordPress Plugin)

CSS & JavaScript Toolbox (or CJT) lets you add code elements to your WordPress installation code using a reasonably easy-to-use web interface.

The way CJT works is that it allows you to 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 more!

Info

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

Note: After activating the plugin, you will need 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’ button …

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

(Database tables must be installed the first time CJT is used)

After installation, you will see a new item on the WP admin menu area called CSS & Javascript Toolbox 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

CJT plugin menu

(CSS & Javascript Toolbox plugin menu)

This loads the CSS & JavaScript Toolbox screen …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

Click on New Code Block to begin adding new code …

CJT - 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 it activated 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.). 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 content field

(CJT content area)

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

Specify where to insert your block of code

(Specify where to insert your block of code)

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

Access more CJT features via toolbar icons

(Access more plugin functionality via the toolbar)

Click the ‘Save All Changes’ button after creating or editing your code block to save your settings …

CJT - 'Save All Changes' button

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

For more information, go here:

Info

Tip: Checking If Your Scripts Have Been Added Correctly

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

If you have added conversion tracking code to a section 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:

Viewing Page Code In Firefox

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

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

Viewing source code in Firefox

(How to view hidden 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 can find the code that you have added (code added to the header section is typically found  between the <head> and </head> tags) …

Source code

(Source code)

If you can see the code in page source view, then the next step is to test your script and make sure that everything is working correctly. If you experience any problems, repeat the above process to make sure that your code has been pasted in correctly, or get help from a professional. As stated earlier in this tutorial, always back up your site before doing anything that involves changing code.

How To Add Scripts To WordPress Content

Congratulations! Now you know how to add code and scripts to your posts and pages.

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

Originally published as How To Insert Code And Scripts Into WordPress Posts And Pages.