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.

Get Thrive Leads for WordPress

Inserting Code Snippets Into WordPressOne of the best things about using WordPress is that you don’t need to mess with code to run a successful website.

You could come across times, however, where you may like to paste a snippet of code into your posts or pages in order to achieve a certain outcome. Some common examples of code snippets you may want to add to your website include:

  • Today’s date
  • Adding a Google search box to your post, page, or sidebar
  • Newsletter subscription forms
  • Display relevant advertising
  • Tracking scripts (e.g. Google Analytics)
  • etc.

Adding code to your pages can give your site additional functionality

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

Important

In this tutorial, we will show you how to easily embed code snippets into your WordPress content with and without plugins.

Inserting Simple Code Snippets Into Your Posts Manually

Important Info

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

You can learn more about a WordPress backup plugin that we recommend using to perform complete file and data backups here:

Important Info

With WordPress, you cannot add code directly into the visual editor …

Pasting scripts inside the visual editor does not work

(Pasting scripts inside your visual editor will not work)

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

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

Use a free online HTML editor or HTML templates to create your HTML code

(You can use a free 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 your code to the clipboard

(Highlight and copy your code to the clipboard)

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

Add a placeholder to mark the spot where you would like your code to display

(Add placeholder symbols where you want your code to display)

Next, switch to the Text editor …

Switch to the Text editor to paste your code

(Code must be pasted in your Text editor)

Locate and highlight the placeholder …

Select and highlight your placeholder

(Select and highlight your placeholder characters)

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

Use the text editor to add simple HTML to your content

(HTML code pasted into text)

Publish your post or page and preview …

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

(Preview and test any code inserted into content)

If you need help using basic HTML, refer to this tutorial:

Important

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

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

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

If you paste code like JavaScript directly into the WordPress text editor you could find the script will cause errors.

A smarter solution for adding scripts to pages and posts is to use a plugin that then processes the script from ’shortcodes’ pasted into your content.

Shortcodes

A ‘shortcode’ is a short bit of code that allows users to perform complex functions in WordPress with no coding skills. Shortcodes are typically used in widgets, posts, and pages to trigger complex scripts into action.

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

What a WP shortcode looks like

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

How WordPress Shortcodes Work

How a shortcode works

(How a shortcode works)

The screenshot above explains how WordPress shortcodes work:

[1] First, install a plugin that allows you to 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 code area and saving, the plugin creates a unique shortcode for calling up the script.

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

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

The great thing about using shortcodes is that you don’t have to mess around with scripts … simply add the shortcode to your content and WordPress does the rest!

How To Add Snippets Of Code To Your WordPress Posts And Pages Using Plugins

There are a number of plugins that let you add snippets of code into your WordPress posts.

Insert HTML Snippet

Insert HTML Snippet Plugin

(Insert HTML Snippet)

As the name of this plugin suggests, Insert HTML Snippet allows you to add snippets of HTML code into posts, pages or sidebar widgets.

This plugin lets you create unlimited HTML snippets and add them to your content using shortcodes or custom fields.

HTML snippets are objects that can store codes and scripts for just about everything: forms and calculators, custom javascript codes, etc.

The tutorial below shows you how to paste code into your pages and posts using HTML snippets.

Inserting Snippets Of Code Into WordPress Posts And Pages – Insert HTML Snippet Tutorial

Download the plugin here, or install the plugin directly from your plugin dashboard (search for keywords like “Insert HTML, Insert HTML Snippets, etc.“) …

Install the 'Insert Html Snippet' plugin

(Install the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

Activate the plugin

(Activate the plugin)

After installing and activating Insert Html Snippet, a new menu item called XYZ Html will display in the menu …

XYZ Html plugin menu

(XYZ HTML plugin menu)

Useful Information

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

Have your code ready to paste into the plugin

(Have your code ready)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets menu)

Click on Add New HTML Snippet

'Add New HTML Snippet'

(’Add New HTML Snippet’)

In ‘The Add New HTML Snippet’ section, give your code snippet a descriptive title (this is for your own reference to help identify what the snippet is about!), paste your code snippet into the HTML code section and click on the Create button …

Insert Html Snippet - Add a new Snippet

(Create a new Snippet)

This saves and publishes a new HTML snippet as a shortcode

Add the shortcode to your posts and pages!

(HTML Snippets shortcode!)

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

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

You can create a new snippet without having the code.

(You can also create a shortcode without having a script.)

The plugin stores your snippets 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 admin menu …

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

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

A table with all the snippets you create show up in the ‘HTML Snippets’ admin screen …

Snippets and shortcodes table

(Table of snippets)

Because code snippets are stored in an independent location (i.e. a separate database), you can use the same shortcode in various pages and control everything from a single location. If you update the snippet code, the code will automatically be updated in every instance where the shortcode has been inserted.

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

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

 Add shortcodes to content in the WordPress visual editor.

(Shortcodes can be added in the WordPress visual editor.)

After publishing, preview your content and test the script …

Script added to content using a shortcode

(Script added via a shortcode)

Important Info

As well as editing your snippet codes, you can deactivate or delete your snippets …

Delete, edit, or deactivate snippets

(Edit, deactivate, or delete your snippets)

Notes:

  • If you delete or deactivate a snippet but leave the HTML Snippets plugin active, the shortcode will not display in your content.
  • If you deactivate the plugin, your shortcode will display as a line of text in your content and will need to be manually deleted.

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

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

For more details, go here: Insert Html Snippet Plugin

EmbedIt Pro

EmbedItPro - WordPress Plugin

(EmbedIt Pro)

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

After the plugin has been installed and activated, a new menu item called HTML Snippets will be added to your WordPress menu …

HTML Snippets [EmbedIt Pro] menu

(EmbedIt Pro plugin menu)

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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

A couple of new buttons will display on your Editor toolbar: Embed HTML Snippet and Embed From Custom Field

EmbedIt Pro adds new menu items to the visual editor toolbar

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

Use the HTML Snippet button to insert shortcodes into your content. With the cursor location selected, click on the HTML Snippet button to select and insert your snippet shortcode in your text …

Use the HTML Snippet button to insert shortcodes into your content.

(You can use the HTML Snippet button to place shortcodes into your content.)

A window will pop up on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you want added into your page/post and click the ‘OK’ button to continue …

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 added to content)

Click Publish/Update to save …

Update to save your settings

(Update to save your settings)

View your post or page and test your script. The script should display in your content …

Content with script added

(What your visitors will see)

While you are logged into your WordPress backend, an ‘Edit Snippet’ button should display near the area where your code snippet has been inserted. This allows you to update scripts “on the fly” (this is useful if you need to change code parameters, resize images, etc.)

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

Make adjustments to code on the fly!

(Change scripts “on the fly”!)

The Edit HTML Snippet screen will open in your browser. Make your changes and save. All posts and pages will update globally with the changes …

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

(Update and republish your code to make sitewide changes)

Go here to learn more about using this plugin:

Useful WordPress Tip

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

Export your HTML Snippets

(Export your Snippets to other sites)

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

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

(Paste shortcodes into your posts with custom fields)

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

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

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

(Some themes are built with built-in code adding features)

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

A plugin like EmbeditPro allows you to easily add code and scripts to content inside your WordPress pages and posts.

Some applications (e.g. analytics and ad tracking tools), however, require that code be inserted into content but also to sections such as page headers, footers, etc. (for example, landing pages, opt-in confirmation pages, and so.)

There are a number of WordPress plugins that let you add code to the header section of your posts and pages. Many of these plugins, however, add code every page on your site, not just the ones you want (some plugins and themes will add code to every single page and then let you turn the code off on individual pages and posts).

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

Important

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

CSS & JavaScript Toolbox

CJT WP Plugin

(CJT Plugin For WordPress)

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

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

Important Info

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

Note: Before using CJT, you will need to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …

First-time plugin use requires database installation

(Database tables will need to be installed the first time you use CJT)

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

CSS & Javascript Toolbox menu

(CJT menu)

Click on CSS & JavaScript Toolbox on the menu …

CJT menu

(CJT plugin menu)

This loads the CSS & JavaScript Toolbox screen …

CSS & Javascript Toolbox dashboard

(CSS & Javascript Toolbox dashboard)

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

CJT - Add New Code Block Button

(CSS & JavaScript Toolbox – Add 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 to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (this lets you 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 area …

CJT content area

(CJT code field)

Next, select where you would like your block to be inserted (e.g. Pages, Posts, etc …)

Select where to insert your block of code

(Specify where to add your code block)

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

Access more CJT features via the toolbar menu

(Access plugin features via toolbar icons)

Click Save All Changes to save your settings …

Click 'Save All Changes' to save your code settings

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

More info:

Info

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 code into an area like the “header” that is not meant to be visible and you need to check if the code has been added correctly, then here’s how to do it:

Viewing Hidden Page Code In Firefox

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

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

Viewing hidden code in Firefox

(How to view page code in Firefox)

A new browser opens displaying the source code for that page.

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

How to view your code

(How to view your code)

If you can see your 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 above process to make sure that your code has been entered 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.

Inserting Snippets Of Code Into WordPress Pages

Congratulations! Now you know how to add scripts to your content.

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site is not affiliated with nor sponsored by Automattic, Inc. or the WordPress Open Source project. This site and the products and services offered on this site are not associated, affiliated, endorsed, or sponsored by WordPress, nor have they been reviewed, tested, or certified by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items linked to, reviewed, or advertised on this site.

***

Did you find this article useful? If so, please consider using the social buttons below to share this page with other website owners.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and has authored hundreds of FREE WordPress tutorials for non-techies and beginners. WPCompendium.org provides detailed step-by-step tutorials that will teach you how to use WordPress with no coding skills required and grow your business online at minimal cost!