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 Embed Code And Scripts Into WordPress PostsOne of the benefits of using WordPress is that you don’t need to mess with code to manage a website successfully.

There may be occasions, however, where you may choose to add a snippet of code to your posts or pages in order to add certain functions or features to your site. Common examples where inserting scripts into pages can enhance the functionality your site include:

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

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

(Adding scripts to pages can give you additional functionality)

Important

In this tutorial, you will learn how to easily add scripts and code to your WordPress pages and posts with and without plugins.

Adding Simple HTML Code To WordPress Posts - Manual Method

Disclaimer

Note: Before adding any scripts to WordPress we recommend backing up your site first. If you don’t want to do your own site backups, then get help from a WordPress professional, or use backup plugins.

You can read about a great WordPress backup plugin that we recommend using to completely automate your WordPress file and database backups here:

Important Info

In WordPress, you can’t add code (e.g. Javascript, HTML) directly into the visual editor …

Do not paste scripts inside the visual editor

(Pasting scripts into the visual editor does not work)

You can, however, place simple HTML code into the WordPress text editor. To insert HTML into 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 HTML Online Editor“) or consider using HTML code templates

You can use a free web-based 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. Source: HTML-Online.com)

Highlight and copy all of the code to your clipboard …

Copy your code to the clipboard

(Copy your code to the clipboard)

Next, open your post or page and add placeholder text (e.g. @@@@@) where you would like your script to display …

Add placeholder characters where you want your code to display in your content

(Add a placeholder where you would like your script to appear in your content)

Click on the Text tab to switch from the Visual editor to the Text editor …

Code must be pasted in the Text editor

(Code must be pasted in the Text editor)

Locate and highlight your placeholder symbols …

Select and highlight your placeholder characters

(Select and highlight your placeholder text)

Paste the code into your text …

Use the text editor to embed simple HTML into your content

(HTML code pasted into text)

Save the work, then preview …

Preview and test any code you add to your posts

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

We have created a detailed tutorial on using basic HTML here:

Important

While the above method can be used to add simple HTML to your content, this is not recommended for pasting scripts containing complex code directly into your content (e.g. lead capture forms, etc.) …

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

(Don’t use the WordPress text editor to add complex code)

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

A better solution for embedding code into pages and posts is to use a plugin that will “call” the script from a ‘shortcode’ placed into your content.

What Is A Shortcode?

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

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

Shortcode structure

(What a WP shortcode looks like)

Shortcodes enable plugin developers to create complex scripts such as user forms, content formatting tools, image tools, etc., which you then insert into your content via a short text string.

How WordPress Shortcodes Work

How shortcodes work

(How to use WordPress shortcodes)

The above explains how to use a shortcode:

[1] You install a plugin that lets you paste a script into a special field (see the tutorial below for an example)

[2] After pasting the script into the code area and saving, the plugin creates a unique shortcut that lets your website call up the script.

[3] Next, copy the shortcode to your clipboard and paste it into any widgets, posts, or pages where you would like the script to display and publish.

[4] WordPress will now process the script wherever the shortcode has been added.

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

Adding Snippets Of Code To Your WordPress Posts Using A Plugin

In the tutorials below, you will learn how to embed snippets of code and scripts into your WordPress posts, pages, and widgets using free WordPress plugins.

Insert HTML Snippet

Insert Html Snippet

(Insert HTML Snippet Plugin)

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

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

HTML snippets are objects that can store scripts for just about everything: audio player code, custom tracking codes, etc.

The step-by-step tutorial below shows you how to use the Insert Html Snippet plugin.

Adding Scripts And Snippets Of Code To WordPress Content – Tutorial

Download the plugin here, or use the “Search method” to install the plugin inside your WP dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …

Install 'Insert Html Snippet'

(Installing the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the ‘Insert Html Snippet’ plugin)

After the plugin has been installed, a new menu item called XYZ Html will display in the main dashboard menu …

XYZ HTML menu

(XYZ HTML plugin menu)

Tip

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

Copy your code to the clipboard

(Copy your code to the clipboard)

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

XYZ Html > HTML Snippets menu

(XYZ Html > HTML Snippets menu)

Click on Add New HTML Snippet to create a new shortcode …

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

(’Add New HTML Snippet’)

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

Insert Html Snippet - Adding a new HTML Snippet

(Adding a new HTML Snippet)

This creates and publishes a new HTML snippet as a shortcode

Shortcode!

(HTML Snippets shortcode!)

You can also create a new shortcode without having a script. This is handy if, for example, you are waiting for approval of the code but would like to create the pages where your code will eventually show up.

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

You can create a new snippet without having a script.

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

The plugin stores all snippets in a separate list in the plugin’s database. You can view all of your stored snippets by selecting XYZ Html > HTML Snippets from your WordPress 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 snippets)

A table of all the HTML snippets and shortcodes you create appear in the ‘HTML Snippets’ admin screen …

Snippets and shortcodes table

(List of snippets)

Because the plugin keeps all snippets stored in a separate database, you can add the same shortcode to various pages and control everything from a single location. If you update the code in your snippet, the code will automatically update wherever the shortcode has been inserted.

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

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

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

(Shortcodes can be inserted into content directly 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 using a shortcode

(Script added to content using a shortcode)

Info

You can deactivate, delete, and edit your code snippets …

Edit, deactivate, or delete your code snippets

(Deactivate, delete, and edit code snippets)

Note:

  • If you deactivate or delete a snippet but leave the plugin active, the shortcode will not display in your content.
  • If the HTML Snippets plugin itself gets deactivated, your shortcode will appear as a line of text in your content (you will need to manually removed all instances of the shortcode).

If the plugin gets deactivated, your shortcode will display in your content

(If the HTML Snippets plugin is deactivated, the shortcode itself will appear in your content)

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

EmbedIt Pro

EmbedIt Pro - WordPress Plugin

(EmbedIt Pro 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 display in the dashboard menu …

EmbedIt Pro plugin menu

(EmbedIt Pro plugin menu)

To create a new shortcode, click on HTML Snippets > Add New, add your script, give your snippet a descriptive title and click Publish

EmbedIt Pro Shortcode

(Shortcode – EmbedIt Pro)

A couple of new menu items will be added to your Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

The plugin adds new menu items to the visual editor toolbar

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

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 place the shortcode in your text …

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

(Use the HTML Snippet button to place a shortcode into your content.)

A small window will pop up on your screen allowing you to insert any HTML Snippets you have stored. Select the HTML Snippet you would like added into your page or post and click the ‘OK’ button to proceed …

Insert HTML Snippet

(Insert HTML Snippet)

Your shortcode will be added to the content …

Shortcode inserted into content

(Shortcode inserted into content)

Click Publish or Update to save …

Publish to save your settings

(Update to save your settings)

View your updated post or page. The script should have been added to 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 below the area where your code has been inserted. This allows you to adjust your script “on the fly” (this is useful if you need to edit form parameters, resize graphics, etc.)

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

Adjust scripts on the fly!

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

The Edit HTML Snippet screen will open in your browser. Make your desired changes to the script and update. Wherever the snippet has been added to content will update automatically …

Edit republish your code to make global changes

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

For more details, go here}:

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 Snippets to other WordPress sites

(Export your Snippets to other sites)

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

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

Paste shortcodes into your posts with custom fields

(Add shortcodes to your posts using custom fields)

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

Many 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 features …

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

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

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

A plugin like EmbeditPro allows you to easily add scripts to 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. (for example, purchase pages, opt-in confirmation pages, and so.)

There are a number of plugins that will allow you to add code to headers and footers of posts and pages. Many of these plugins, however, add code every page and post on your site, not just the ones you want (some plugins will add the code to all pages and then let you turn the code off on individual pages).

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

Note

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

CSS & JavaScript Toolbox

CSS & JavaScript Toolbox Plugin

(CSS & Javascript Toolbox WP Plugin)

CSS & JavaScript Toolbox (or CJT) 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 extend your site’s functionality by adding custom code using code blocks that can be assigned to individual posts, pages, custom posts, categories, expressions, URLs, and more!

Idea

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

Note: The first time you try to use CJT, you will be asked to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …

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

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

After installing CJT, a new menu item called CSS & Javascript Toolbox will appear in your WP menu as well as a dashboard panel with news and plugin usage information …

CSS & Javascript Toolbox menu

(CJT plugin menu)

Click on CSS & Javascript Toolbox on the menu …

CJT plugin menu

(CJT menu)

This loads the CSS & JavaScript Toolbox dashboard …

CSS & JavaScript Toolbox screen

(CSS & Javascript Toolbox screen)

Click on the New Code Block button to begin adding custom code …

CSS & Javascript Toolbox - New Code Block Button

(CJT – New Code Block)

In the ‘Create New Code Block’ window, name your new code block, select the checkbox to activate it (or leave it unchecked if you don’t want to activate it yet), select a “Location Hook” (this specifies where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (this lets you specify if the script should be added before or after all other code inside the header or footer. Options = First Block / Last Block.). 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 area …

CJT code area

(CJT content field)

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

Specify where to add your code

(Specify where to add your code block)

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

Access more plugin functionality via toolbar icons

(Access CJT functionality via the toolbar menu)

Click the ‘Save All Changes’ button to save your code settings …

CJT - 'Save All Changes' button

(CJT – ‘Save All Changes’ button)

Go here for more info:

Idea

Tip: How To View Your Code

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 follow the steps below:

How To View Page Code In Firefox

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

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

Tools > Developer Tools > Page Source

(How to view source code in Firefox)

A new browser window will open and displays the source code for that page.

Scroll down until you can see the code that you have added (if adding code to the header section, it will typically be contained  between the <head> and </head> tags) …

Page code

(Source code)

If you can see your code, then the next step is to test your script and make sure that everything is working as it should. If you experience any errors, repeat the process to make sure that your code has been entered correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your files and database before adding, changing or deleting code.

Adding Code To Your WordPress Pages And Posts

Congratulations, now you know how to easily insert code snippets and scripts into your WordPress 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

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

How To Use FTPHow To Use FTP

This video course shows you how to use FTP (File Transfer Protocol) to transfer and upload files between your hard drive and your server using a free FTP program called Filezilla.

More info: How To Use FTP

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

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

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.