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 Code & Scripts Into WordPressOne of the best reasons for using WordPress is that you don’t need to mess with code to run a successful website.

There may be instances, however, where you may want to add a code snippet or script to your posts or pages in order to extend the functionality of your site. Useful scripts you may want to insert into your posts or pages include:

  • Special offer expiry date
  • Adding a Google search box to your sidebar, post, or page
  • Adding subscription forms
  • Display contextual advertising
  • Tracking code (e.g. Google Adwords)
  • etc.

Adding scripts to content can help expand your site's functionality

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

Info

Some script features can be added to WordPress with plugins that involve little to no messing with code. In this tutorial, we show you how to easily insert code into your WordPress posts.

How To Insert Simple HTML Code Into Your WordPress Posts Using The Text Editor

Warning

Note: Before adding any scripts to WordPress make sure to backup your database and files first. If you don’t want to do your own backups, then consider using professional WordPress help services, or use backup plugins.

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

Important

WordPress does not let you add codes and scripts directly into the visual editor …

Pasting code into the WordPress visual editor does not work

(Pasting code inside the visual editor will not work)

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

First, locate or create the HTML code you plan to add to your content. You can use an HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or consider using an HTML cheat sheet

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

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

Select and copy your code to the clipboard …

Select and copy your code to the clipboard

(Copy your code to the clipboard)

Next, open your page or post and add a placeholder (e.g. @@@@@) to mark the location where you want your code to appear …

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

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

Switch to the Text editor …

Code must be pasted in the Text editor

(Code must be pasted in the Text editor)

Find your placeholder and highlight the entire line …

Select and highlight your placeholder characters

(Select and highlight your placeholder)

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

Paste the code over your highlighted placeholder

(Use the text editor to embed simple HTML code into your content)

Save the content and preview …

Preview and test any code added to your content

(Preview and test any code you add to pages)

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

Important

While the above can be used to add simple HTML to content, we do not recommend pasting scripts containing JavaScript code directly into your content (e.g. lead capture forms, etc.) …

Avoid using the WordPress text editor to add complex code ... use the other methods described below instead!

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

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

We recommend using a plugin that lets you “call” scripts using ’shortcodes’ placed in your content.

What Is A Shortcode?

A ‘shortcode’ is a code shortcut. It allows you to embed complex scripts with no coding knowledge. Shortcodes are typically added to widgets, posts, and pages to trigger complex scripts into action.

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

What a shortcode looks like

(WordPress shortcode format)

Shortcodes enable WordPress developers to create complex scripts such as forms, content generators, image galleries, etc., which you then add to your content using a simple text string.

How To Use Shortcodes

How WordPress shortcodes work

(How to use WordPress shortcodes)

The above explains how shortcodes work:

[1] First, install a plugin that lets you 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 code to the code area and saving, the plugin creates a unique text shortcut that will call up the script.

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

[4] WordPress will now call up your script.

The great thing about using shortcodes is that you don’t have to mess around with scripts to get the functionality you want … just add the shortcode to your post, page, or widget and WordPress does the rest!

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

Let’s now show you how to add code snippets and scripts into WordPress using various free WordPress plugins.

Insert Html Snippet

Insert HTML Snippet Plugin

(Insert Html Snippet WordPress Plugin)

As the plugin name suggests, Insert Html Snippet allows you to easily insert code into pages, posts or sidebar widgets.

Essentially, this plugin lets you create and store 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 anything: audio and video players, custom javascript codes, etc.

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

Inserting Code And Scripts Into Your Content – Insert Html Snippet Tutorial

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

Install the 'Insert Html Snippet' plugin

(Install the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate the plugin

(Activate the plugin)

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

XYZ HTML menu

(XYZ Html menu)

Important Info

Important: Make sure you have your script available (e.g. save it into a plain text file) …

Highlight and copy your code to the clipboard

(Have your code ready)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets plugin menu)

Click on Add New HTML Snippet

'Add New HTML Snippet'

(Click on ‘Add New HTML Snippet’ to create a new snippet)

In ‘The Add New HTML Snippet’ screen, give your snippet a name (this is for your reference), paste your code snippet into the HTML code section and click the Create button …

Adding a new HTML Snippet

(Insert Html Snippet – Adding a new Snippet)

This saves and publishes your HTML snippet as a shortcode

HTML Snippets shortcode!

(Shortcode!)

You can also create a new snippet without having the code. This is handy if, for example, you are awaiting approval of the code but want to go ahead and create the  pages where your code will eventually display.

In this case, go ahead and create your new code 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 snippet without having the code.

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

The plugin stores all snippets in a separate list within the plugin’s database. You can view all the snippets and shortcodes you’ve created by selecting XYZ Html > HTML Snippets from the admin menu …

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

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

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

Snippets table

(Snippets and shortcodes table)

Because the plugin keeps all code snippets stored in a separate database, you can add a single shortcode to various pages and posts and control everything from one location. If you edit the code in your snippet, the script will automatically be updated throughout your content.

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

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

Shortcodes can be inserted into content inside the WordPress visual editor.

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

After publishing, preview and test the script …

Script added via a shortcode

(Script added to content using a shortcode)

Important Info

You can deactivate, edit, or delete your snippets …

Delete, edit, or deactivate snippets

(Deactivate, delete, and edit your snippets)

Note:

  • If you delete or deactivate a snippet but leave the plugin active, the shortcode will not display in your content. The plugin will remove the section that contains the shortcode so that no gaps are visible to visitors.
  • If the plugin itself gets deactivated, the shortcode will display in your content and will need to be manually deleted.

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

(If the plugin is deactivated, the shortcode text will display in the content)

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

EmbedIt Pro

EmbedIt Pro Plugin

(EmbedIt Pro Plugin For WordPress)

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

After installing and activating EmbedIt Pro, a new menu item called HTML Snippets will appear in your menu …

EmbedIt Pro plugin menu

(HTML Snippets [EmbedIt Pro] menu)

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

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

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

The plugin adds new menu items to the visual editor

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

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

Use the menu buttons to insert a shortcode into your content.

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

A small popup window will display on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you would like added into your post or page and click the ‘OK’ button to continue …

Insert your HTML Snippet

(Insert HTML Snippet)

The shortcode will be inserted in the location of your cursor …

Shortcode inserted into content

(Shortcode inserted into content)

Click Publish or 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 have been added to your content where you have specified …

What your visitors will see

(What your visitors will see)

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

To edit your script, click the Edit Snippet button …

Change scripts on the fly!

(Make updates to code “on the fly”!)

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

Update and republish your code to make global changes

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

For more details, go here}:

Useful WordPress Tip

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

Export your Snippets

(Export your HTML Snippets)

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

If you know how to use custom fields, you can paste 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 embed HTML into a single post without leaving the post editing window.

Add shortcodes to your content using custom fields

(Paste shortcodes into your posts with custom fields)

Tip #3 – Use 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 let you add raw HTML and JavaScript code to your pages …

(Some WordPress themes offer built-in features)

(Some WordPress themes offer built-in features)

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

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

Some applications, however, require that code be added not only to content but also to sections such as page headers, footers, etc. (for example, purchase pages, opt-in confirmation pages, and so.)

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

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 below.

Important Info

The section below is for advanced users. If you need help editing code on your site, please contact a professional WordPress web developer.

CSS & Javascript Toolbox

CSS & JavaScript Toolbox WP Plugin

(CSS & JavaScript Toolbox – WordPress Plugin)

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

The way the plugin works is that it lets you extend your site’s functionality with custom code blocks that you can assign to individual posts, pages, categories, custom posts, URLs, expressions, and more!

Idea

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

Note: After activating 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 …

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

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

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

CJT plugin menu

(CSS & Javascript Toolbox menu)

Click on CSS & JavaScript Toolbox

CJT menu

(CSS & JavaScript Toolbox menu)

The main CJT screen will display …

CSS & Javascript Toolbox dashboard

(CSS & JavaScript Toolbox screen)

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

CJT - Add New Code Block

(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 it activated yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and select the “Initial Block Position” (specify if 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' options

(‘Create New Code Block’ window)

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

CJT content field

(CJT content area)

Next, select where you would like to insert your code block (e.g. Pages, Categories, etc …)

Specify where to insert your block of code

(Select where to add your block of code)

The main screen also various icons you can click to access different functions, help, etc. (hover your mouse over the icons for tooltip descriptions) …

Access plugin functionality via toolbar icons

(Access more CJT functionality via toolbar icons)

Click Save All Changes after creating or editing your code block to save your settings …

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

To learn more about this plugin, go here:

Tip

Tip: Verifying If You Have Added Your Code Correctly

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

If you have pasted code into a section of your site like the “header” that is not meant to be visible and you want to check if the code has been added correctly, then do the following:

How To View Source 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.

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

Tools > Developer Tools > Page Source

(Viewing source code in Firefox)

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

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

Verify that your scripts have been added correctly

(How to view your 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 as it should. If you experience any problems, repeat the above process and make sure that you have entered the code correctly, or get help from a professional. As stated earlier in this tutorial, always back up your files and database before doing anything that involves changing code.

Adding Scripts & Code In WordPress Content

Congratulations, now you know how to embed scripts and code snippets into your WordPress posts.

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

***

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

How To Create Engaging PresentationsHow To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

WordPress SEOWordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

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