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 Code And Scripts In WordPress ContentOne of the best reasons for using WordPress is that you don’t need to know how to write code to manage a website successfully.

There may be situations, however, where you may decide to add a block of code to content inside your posts in order to add a certain feature or functionality to your site. Useful examples where adding code snippets to pages may enhance the functionality your site include:

  • Current date
  • Adding a search box to your post, page, or sidebar
  • A subscription form
  • Display relevant banner ads
  • Analytics code (e.g. Google Adwords)
  • etc.

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

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

Important

Some script features can be added through plugins that require little to no handling of code. In this step-by-step tutorial, we show you how to easily insert scripts into your WordPress pages and posts.

How To Insert Code Into WordPress Content Manually

Warning

Note: Before adding any scripts to WordPress remember to back up your database and files first. If you don’t want to do site backups, then get professional help services, or use WordPress backup plugins.

You can read about a WordPress backup plugin that we recommend using to automate WordPress site backups here: Backup, Clone And Keep Your WordPress Sites Protected With Backup Creator WordPress Plugin

Important Info

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

Do not insert code into the visual editor

(Pasting code inside the WordPress visual editor will not work)

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

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

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

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

Highlight and copy your code to the clipboard …

Select and copy the code to your clipboard

(Select and copy your code to the clipboard)

Next, open your page or post and select the exact location where you want your script to display in your content, then insert a blank line and add a placeholder (e.g. @@@@@) …

Add a placeholder where you would like your code to appear

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

Next, switch to the Text editor to paste in the code …

Switch to the Text editor to paste in your code

(Switch to the Text editor to paste in code)

Locate and highlight your placeholder …

Select and highlight your placeholder

(Select and highlight your placeholder)

Paste the code over the highlighted text …

Paste the code into your text

(Use the text editor to add simple HTML to your content)

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

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

(Preview and test any code you add to posts)

If you need help using basic HTML in WordPress, refer to this step-by-step tutorial: A Practical Guide To HTML Tags

Important

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

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

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

If you paste JavaScript code directly into the WordPress text editor you could find the script will not work correctly.

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

WordPress Shortcodes

A ‘shortcode’ is a simple bit of code that allows users to perform complex functions without coding or programming knowledge. Shortcodes can typically be added to widgets, pages, and posts to trigger a complex script into action.

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

What a shortcode looks like

(What a shortcode looks like)

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

How WordPress Shortcodes Work

How a WordPress shortcode works

(How a shortcode works)

The above explains how to use shortcodes:

[1] You install a plugin that lets you paste a script into a special field (we’ll show you an example of this in the tutorial below)

[2] After pasting the script into the special field and saving, the plugin generates a unique shortcut for processing the script.

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

[4] The plugin will now process the function.

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

How To Add Scripts To WordPress Content Using A Plugin

In the tutorials below, we explain how to embed code into your WordPress widgets, posts, and pages using various free WordPress plugins.

Insert Html Snippet

Insert Html Snippet WordPress Plugin

(Insert HTML Snippet Plugin)

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

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

HTML snippets are objects that can store code for just about everything: a video embed code, custom javascript codes, etc.

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

Adding Code Snippets And Scripts To Your WordPress Posts – Insert Html Snippet Tutorial

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

Find and install 'Insert Html Snippet'

(Installing the ‘Insert Html Snippet’ plugin)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate ’Insert Html Snippet’)

After installing and activating the plugin, a new menu item called XYZ Html will be added to the main dashboard menu …

XYZ HTML plugin menu

(XYZ HTML plugin menu)

Idea

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

Have your code ready to paste into the plugin

(Have your code ready to use)

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

XYZ Html > HTML Snippets

(XYZ Html > HTML Snippets plugin menu)

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

'Add New HTML Snippet'

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

In ‘The Add New HTML Snippet’ section, enter a name in the Tracking Name section (this is for your reference), paste your script into the HTML code section and click the Create button …

Insert HTML Snippet - Add a new Snippet

(Creating a new Snippet)

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

HTML Snippets shortcode!

(Your new HTML Snippets shortcode!)

You can also create a new snippet without having your code snippet yet. This is handy if, for example, you are waiting for approval of the code but would like to publish the content 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 code, you can then edit the snippet and replace the content …

You can create a new shortcode without having the script code.

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

After creating snippets the plugin will store it in a separate list in the plugin’s database. You can view your HTML Snippets by selecting XYZ Html > HTML Snippets from the dashboard menu …

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

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

A table with all your HTML snippets and shortcodes will be displayed in the ‘HTML Snippets’ admin screen …

List of snippets

(Table of snippets)

Because the plugin stores all snippets in a separate database, you can add one shortcode to a number of pages and posts and control everything from one location. If you update the code in your snippet, the code will automatically update throughout your content.

You can add shortcodes to your content directly 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 the code to display …

Shortcodes can be embedded into your content inside the WordPress visual editor.

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

After publishing, preview and test the script to ensure that everything has been added correctly …

Script added via a shortcode

(Script added to content using a shortcode)

Info

You can deactivate, edit, or delete code snippets …

Edit, delete, or deactivate your snippets

(Delete, deactivate, or edit snippets)

Notes:

  • If you delete or deactivate a snippet but the HTML Snippets plugin is left active, the shortcode will not display in your content. The plugin will automatically remove any lines that contain the shortcode from your content so that no gaps are visible to visitors.
  • If you deactivate the plugin, your shortcode will display as a line of text in your content.

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

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

To learn more about this WordPress plugin, visit the plugin site: Insert HTML Snippet

EmbedIt Pro

EmbedIt Pro Plugin

(EmbedItPro – WordPress Plugin)

EmbedIt Pro is similar to the HTML Snippets plugin, with some added features.

After installing and activating the plugin, a new menu item called HTML Snippets will be added to your main navigation menu …

HTML Snippets [EmbedIt Pro] menu

(HTML Snippets [EmbedIt Pro] plugin menu)

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

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

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

EmbedIt Pro adds new menu items to the visual editor

(The plugin adds new menu buttons 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 insert your snippet in the text …

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

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

A small window will pop up on your screen allowing you to insert any HTML Snippets you have saved. Type in the name of the HTML Snippet you want added into your page/post and click the ‘OK’ button to proceed …

Insert HTML Snippet

(Insert name of the HTML Snippet)

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

Shortcode added to content

(Shortcode inserted into content)

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

Publish to save your settings

(Update to save your settings)

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

Voila ... your script has been added!

(Content with script added)

While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed below where your code has been added. This lets you adjust code “on the fly” (this is useful if you need to edit code parameters, video sizes, etc.)

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

Make updates to code on the fly!

(Edit code “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Make your changes and update. Everywhere your shortcut has been added to content will be automatically updated with the changes …

Edit republish your code to make global changes

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

For more information, go here: EmbedIt Pro Plugin

Useful WordPress Tip

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

Export your HTML Snippets

(Export your Snippets)

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

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

(Add shortcodes to your posts via custom fields)

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

Many themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that have script processing features …

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

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

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

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

Some applications (e.g. analytics and ad tracking tools), however, require that code be added not only to content but also to areas like headers, footers, etc.

You can find a number of plugins that will allow you to add code to the header or footer section of your pages and posts. Many of these plugins, however, will add code every page on your site, not just the ones you want (check the plugin’s settings – some plugins and themes will add the code to every page and then let you turn the code on/off for selected pages).

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

Warning

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

CSS & Javascript Toolbox

CJT

(CSS & Javascript Toolbox – WordPress Plugin)

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

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

Tip

For comprehensive documentation and user manual, go here: CSS & JavaScript Toolbox Plugin.

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’ button …

First-time plugin use requires database tables installation

(First-time plugin use requires database tables installation)

After installation, a new menu item called CSS & JavaScript Toolbox will appear in your main menu as well as a dashboard panel with latest news and plugin usage information …

CSS & Javascript Toolbox plugin menu

(CJT plugin menu)

Click on CSS & Javascript Toolbox

CSS & Javascript Toolbox plugin menu

(CSS & JavaScript Toolbox plugin menu)

This brings up the CSS & Javascript Toolbox screen …

CSS & Javascript Toolbox screen

(CSS & Javascript Toolbox screen)

Click on New Code Block to begin adding custom code …

CSS & JavaScript Toolbox - New Code Block Button

(CSS & Javascript Toolbox – 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 to activate it yet), select a “Location Hook” (specify where to insert your code block. Options = Header / Footer.), and specify the “Initial Block Position” (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' options

(‘Create New Code Block’ options)

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

CJT code field

(CJT code area)

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

Select where to insert your block of code

(Specify where to insert your code block)

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

Access more plugin functionality via the toolbar

(Access plugin functionality via toolbar icons)

Click Save All Changes when you you are done creating or editing a code block to save your code settings …

CJT - 'Save All Changes' button

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

For help and support with this plugin, visit the plugin developer’s site here: CSS & JavaScript Toolbox Plugin For WordPress

Info

Tip: How To View Your Code

Some scripts will ask you to verify that you have added the code correctly and some will not.

If you have pasted conversion tracking code into areas of your site that are not meant to be visible (like the ”header” section) and you need to check if the code has been added correctly, then do the following:

Viewing Hidden Page Code In Firefox

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

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

How to view page code in Firefox

(How to view source code in Firefox)

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

Use the search function (Ctrl+F) or scroll down the screen until you can locate the code that you have added (code added to the header section is typically placed  between the <head> and </head> tags) …

Source code

(Page code)

If you can see the code in your page, 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 above process and make sure that your code has been inserted correctly, or get help from a professional. As stated earlier in this tutorial, always back up your files and database before adding, changing or deleting code.

How To Add Scripts To Your Posts

Congratulations, now you know how to insert scripts into your WordPress posts.

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com

Disclaimer: We have no association with WordPress, Automattic, or any of the WordPress-related products reviewed on this website. We may receive an affiliate commission of financial benefit from sales of any products and services mentioned on our site. All images and details sourced from product websites are the copyright of their respective owners, comply with all license terms and agreements of use are used solely for illustrative or training purposes.

***

Was this post useful? If so, please consider using the links below and share this tutorial with other online users.

Author: Martin Aranovitch

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

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