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 Snippets Into Your ContentOne of the best things about using WordPress is that you don’t need to know how to edit code to manage your website.

You could come across situations, however, where you may like to add a code snippet or script to content inside your posts or pages in order to benefit from specific functions or features. Common scripts you may want to insert into your pages include:

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

Adding scripts to your pages can give your site additional functionality

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

Important

Some script features can be added to WordPress using plugins that make handling code easier. In this step-by-step tutorial, you will learn how to add code to WordPress pages with and without plugins.

Adding Simple HTML Code To WordPress Pages And Posts Using The Text Editor

Note

Note: We recommend backing up your site before adding any code snippets to WordPress. If you don’t want to do your own backups, then get assistance from a WordPress professional, or use a backup plugin.

You can read about a WordPress backup plugin that we recommend using to automate site backups here:

Info

With WordPress, you can’t add code and scripts directly into the visual editor …

Pasting code into the visual editor will not work

(Pasting scripts into your visual editor does not work)

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

First, locate or create your HTML code. You can use a free 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 code

(You can use an online HTML editor or HTML templates to create your code. Source: HTML-Online.com)

Select the code that you want added to your content and copy it to your clipboard …

Highlight and 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 new line and add a placeholder (e.g. @@@@@) where you want your script to appear …

Add placeholder characters to mark the spot where you want your script to display

(Add placeholder characters to mark the spot where you want your script to display in your content)

Switch to the Text editor …

Code must be pasted in your Text editor

(Code must be pasted in the Text editor)

Locate and highlight your placeholder …

Select and highlight your placeholder symbols

(Select and highlight the line containing your placeholder text)

Paste the code over your highlighted text …

HTML code pasted into text

(HTML code pasted into text)

Save your post, then preview (and test) the results …

Preview and test any code inserted into content

(Preview and test any code added to pages or posts)

To learn more about using basic HTML, go here:

Important

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

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

(Avoid using the text editor to add complex code … use the methods below instead!)

If you paste scripts directly into the WordPress text editor you could find the script will cause an error.

The method we recommend is to use a plugin that lets you “call” the script from a ‘shortcode’ pasted into your content.

WordPress Shortcodes

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

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

Shortcode

(This is what a WordPress shortcode looks like!)

Shortcodes allow plugin developers to create complex scripts such as image galleries, content formatting tools, user forms, etc., which you then add to your content using a short text code.

How A WordPress Shortcode Works

How WordPress shortcodes work

(How WordPress shortcodes work)

The above explains how a WordPress shortcode works:

[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 adding the code snippet to the code area and saving, the plugin generates a unique shortcode for processing this script.

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

[4] WordPress will now call up the function.

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 functionality to appear and WordPress does the rest!

Embedding Code Into Your WordPress Pages Using Plugins

There are a number of plugins available that let you add code into WordPress.

Insert Html Snippet

Insert HTML Snippet WordPress Plugin

(Insert Html Snippet – WordPress Plugin)

As the name suggests, this plugin allows you to easily embed HTML code snippets into a post, page, or a sidebar widget.

This plugin allows you to create separate 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: video and audio players, javascript codes, etc.

The step-by-step tutorial below shows you how to insert code into your content using Insert Html Snippet.

Inserting Code Snippets Into Your WordPress Pages And Posts – Tutorial

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

Installing 'Insert Html Snippet'

(Installing the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate 'Insert Html Snippet'

(Activate ’Insert Html Snippet’)

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

XYZ HTML menu

(XYZ Html plugin menu)

Info

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

Have your code ready to paste into the plugin

(Have your code ready to paste into the plugin)

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 will load in your browser. Click on Add New HTML Snippet

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

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

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

Insert HTML Snippet - Create a new Snippet

(Insert HTML Snippet – Add a new Snippet)

This creates and publishes your snippet as a shortcode

Use the shortcode to insert your script into your posts and pages!

(Shortcode!)

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

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

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

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

After creating new 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 your dashboard menu …

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

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

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

Snippets list

(Snippets table)

Because code snippets get stored in an independent location (i.e. the plugin’s database), you can add the same snippet to a number of pages and control everything from a single location. If you modify the code and update the snippet, the script will automatically update everywhere the shortcode has been inserted.

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

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

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

(Shortcodes can be inserted into your content directly inside the WordPress visual editor.)

After publishing, preview and test the script …

Script added to content using a shortcode

(Script added to content using a shortcode)

Important Info

You can deactivate, edit, or delete code snippets …

Edit, deactivate, or delete code snippets

(Edit, delete, and deactivate code 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 the HTML Snippets plugin itself is deactivated, the shortcode will display in your content (you will need to manually delete the shortcode wherever it’s been placed).

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

(If you deactivate the HTML Snippets plugin itself, the shortcode itself will show up in the content)

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

EmbedIt Pro

EmbedItPro Plugin

(EmbedItPro WordPress Plugin)

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 be added to the dashboard menu …

HTML Snippets [EmbedIt Pro] plugin menu

(EmbedIt Pro plugin menu)

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

Shortcode - EmbedIt Pro

(Shortcode – EmbedIt Pro)

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

The plugin adds new menu buttons to the visual editor toolbar

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

You can use the HTML Snippet button to add a shortcode to your pages. With the cursor location selected, click on the HTML Snippet button to select and embed the shortcode in the text …

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

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

A popup window will appear on your screen allowing you to insert any of the HTML Snippets you have created. Select the HTML Snippet you would like embedded into your page/post and click the ‘OK’ button to proceed …

Insert name of the HTML Snippet

(Insert name of the HTML Snippet)

Your shortcode will be added to the content …

Shortcode added to content

(Shortcode added to content)

Click Publish or Update to save …

Update 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 where you have specified …

Content with script added

(Content with script added)

While you are logged into your admin, an ‘Edit Snippet’ button should display below the section where your code snippet has been added. This lets you modify your script “on the fly” (this is useful if you need to edit form elements, resize images, etc.)

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

Modify scripts on the fly!

(Modify code “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Make your changes and resave. All posts and pages will be automatically updated …

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

(Edit republish your code to make global changes)

For more details, go here}:

Useful WordPress Tip

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

Export your HTML 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 are familiar with how custom fields work, you can add your code to a custom field and place a shortcode into your content with the “Custom Field” toolbar button. This is useful when you want to embed HTML into a single post without leaving the post editing window.

Add shortcodes to your posts via custom fields

(Add shortcodes to your posts with custom fields)

Tip #3 – Use WordPress Themes With Drag And Drop Page Builders

Most themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that allow you to insert raw HTML or JavaScript code into your content …

(Some WordPress themes provide built-in code insertion functionality)

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

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

With a plugin like EmbedIt Pro, you easily add code to content inside your posts and pages.

Some applications (e.g. analytics and ad conversion tracking tools), however, require that code be inserted into content but also to sections like page headers, footers, etc. (like product download pages, confirmation pages, and so.)

You can find a number of WordPress plugins that will allow you to add code to the header/footer section of pages. Many of these plugins, however, add code to all pages, not just the ones you want (some plugins and themes will add the code to all pages and then let you turn the code on/off on individual 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.

Disclaimer

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

CSS & JavaScript Toolbox

CSS & JavaScript Toolbox - WordPress Plugin

(CSS & JavaScript Toolbox WP Plugin)

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

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

Idea

For comprehensive documentation and user manual, go here:

Note: When you first try using CJT, you will be asked to go through an 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 …

Database tables must be installed the first time CJT is used

(First-time plugin use requires database tables installation)

After installation, you will see a new menu item on your WordPress admin menu section called CSS & Javascript Toolbox as well as a dashboard panel with latest news and plugin usage information …

CSS & JavaScript Toolbox menu

(CSS & JavaScript Toolbox plugin menu)

Click on CSS & JavaScript Toolbox on the menu …

CSS & JavaScript Toolbox plugin menu

(CSS & JavaScript Toolbox plugin menu)

This brings up the CSS & JavaScript Toolbox dashboard …

CSS & Javascript Toolbox screen

(CSS & Javascript Toolbox dashboard)

Click on New Code Block to add new code …

CJT - Add New Code Block

(CJT – Add New Code Block)

In the ‘Create New Code Block’ window, name 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” (specify 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 area will appear. Paste your code or script into this area …

CJT code area

(CJT code field)

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

Select where to add your block of code

(Select where to add your code block)

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

Access more plugin features via the toolbar menu

(Access plugin functionality via the toolbar menu)

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

CJT - 'Save All Changes' button

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

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

Important 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 pasted conversion tracking 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 do this:

How To View Hidden Code In Firefox

First, open up your internet browser (e.g. Firefox) and visit the page where you have added your code.

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

Tools > Developer Tools > Page Source

(Tools > Developer Tools > Page Source)

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

Scroll down the screen until you see the code that you have added (if adding code to a page header, it will normally be located  between the <head> and </head> tags) …

Source code

(Page code)

If you can see the code, then all that’s left is to test your script and make sure that everything is working as it should. If you experience any errors, repeat the process and make sure that you have pasted in your code correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your files and database before doing anything that involves changing code.

Inserting Code Snippets Into Your WordPress Content

Congratulations! Now you know how to easily insert code snippets into your WordPress posts.

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Recommended Video Courses For WordPress Users

How To Set Up WordPress On LocalhostHow To Set Up WordPress On Localhost

Learn how to install, set up, and locally host a fully functioning WordPress site on your computer.

More info: How To Set Up WordPress On Localhost

Recommended Video Courses For WordPress Users

WordPress SecurityWordPress Security

Learn how to keep your WordPress site or blog secure and protected from malware, hackers and brute-force attacks.

More info: WordPress Security

Recommended Video Courses For WordPress Users

How To Optimize WordPressHow To Optimize WordPress

Learn how to optimize your WordPress site and improve your page loading speed.

More info: How To Optimize WordPress

Recommended Video Courses For WordPress Users

How To Use cPanelHow To Use cPanel

cPanel is a powerful and simple-to-use web hosting management software application that gives website owners the ability to quickly and easily manage their servers and websites using a simple and intuitive dashboard.

This video course will teach you how to use the main features of cPanel to manage your web hosting.

More info: How To Use cPanel

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Using Password ManagersUsing Password Managers

Password Managers provide an easy and secure way to keep track of all your passwords. This video course shows you how to use two FREE powerful password management tools.

More info: Using Password Managers

Recommended Video Courses For WordPress Users

How To Use Amazon S3How To Use Amazon S3

Learn how to set up and use Amazon S3 to upload, store, manage, and protect your site’s images, large media files, downloadable files, stream videos and more.

More info: How To Use Amazon S3

Recommended Video Courses For WordPress Users

How To Set Up A Forum On WordPressHow To Set Up A Forum On WordPress

Learn how to set up a forum for your visitors, prospects, customers, members, or affiliates using WordPress.

More info: How To Set Up A Forum On WordPress

Recommended Video Courses For WordPress Users

How To Back Up & Restore WordPress SitesHow To Back Up & Restore WordPress Sites

Learn how to safely and automatically backup your WordPress files and database and how to easily restore your WordPress site if something were to happen.

More info: How To Back Up & Restore WordPress Sites

Recommended Video Courses For WordPress Users

How To Install, Set Up & Use WordPress MultisiteHow To Install, Set Up & Use WordPress Multisite

Learn how to quickly and securely set up an online community of websites or blogs using the powerful WordPress Multisite feature.

More info: WordPress Multisite

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. 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.