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 …

Adding Scripts And Code Snippets To Your PostsOne of the best things about using WordPress is that you don’t need to know how to write or edit code to manage a site.

You may come across situations, however, where you may like to insert a code snippet or script into content inside your posts in order to benefit from certain desired functions or features. Useful code snippets you may want to add to your site include:

  • Special offer automatic expiry time (e.g. “This offer expires in less than 5 days)
  • Adding a Google search box to your sidebar, post, or page
  • Adding lead capture forms
  • Display contextual advertising
  • Conversion tracking scripts (e.g. Google Analytics)
  • etc.

Adding code to your pages can expand your site's functionality

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

Important Info

Some script features can be added using plugins that make handling code easier. In this tutorial, we will show you how to easily insert snippets of code and scripts into your posts and pages.

Inserting Simple HTML Code Into WordPress Content - Manual Method

Useful Information

Note: Make sure to backup your files and database before adding any scripts to WordPress. If you don’t want to back up your site yourself, then consider getting professional WordPress support, or use a WordPress backup plugin.

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

Info

Code cannot be inserted directly into your content via the WordPress visual editor …

Do not insert scripts inside the visual editor

(Do not add scripts inside the WordPress visual editor)

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

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

You can use an HTML editor or HTML templates to create your code

(Use a free online HTML editor or HTML templates to create your HTML code. Image source: HTML-Online.com)

Copy all of your code to the clipboard …

Select and copy your code to the clipboard

(Select and copy the code to your clipboard)

Next, open your page or post and in the Visual Editor, Add a placeholder (e.g. @@@@@) in the the location where you want your script to display …

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

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

Next, switch to the Text editor …

Switch to the Text editor to paste in your code

(Code must be pasted in your Text editor)

Find the placeholder text and highlight the line …

Select and highlight the line containing the placeholder

(Select and highlight the line containing the placeholder)

Paste the code into your content …

Use the text editor to add simple HTML to your content

(Simple HTML code pasted into text)

Republish your post or page and preview (and test) the results …

Preview and test any code inserted into pages or posts

(Preview and test any code you add to content)

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

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. newsletter forms, etc.) …

Avoid using the WordPress text editor to add Javascript code

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

If you paste scripts directly into the WordPress text editor you could experience errors.

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

WordPress Shortcodes

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

A shortcode looks like a short bit of text enclosed in square brackets, e.g. ‘[ezformshortcode]’ …

WordPress shortcode

(What a WP shortcode looks like)

Shortcodes enable plugin developers to create complex scripts such as user forms, content generators, image galleries, etc., which you then insert into your content via a simple text code.

How Shortcodes Work

How a WordPress shortcode works

(How WordPress shortcodes work)

The screenshot above explains how WordPress shortcodes work:

[1] You install a plugin that allows you to paste snippets of code into a special field (see the tutorial below for an example)

[2] After pasting the code snippets into the special field and saving, the plugin creates a unique text-based shortcode that lets your website call up this script.

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

[4] WordPress will now automatically process your code.

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

How To Insert Code Into Your WordPress Pages Using A Plugin

There are various plugins available that let you add scripts and code snippets into WordPress.

Insert Html Snippet

Insert Html Snippet Plugin For WordPress

(Insert HTML Snippet Plugin For WordPress)

As the name suggests, this plugin lets you insert snippets of HTML code into a post, page, or a sidebar widget.

Essentially, how this plugin works is that it lets you create separate HTML snippets and add them to your pages and posts using shortcodes or custom fields.

HTML snippets can store code for just about anything: video embed codes from YouTube, javascript codes, etc.

The tutorial below shows you how to embed code into your content using Insert HTML Snippet.

Embedding Scripts Into Your Posts – Step-By-Step Tutorial

Download the plugin here, or locate and install the plugin inside your dashboard (search for keywords like “Insert HTML, Insert Code, etc.“) …

Installing the 'Insert Html Snippet' plugin

(Installing ’Insert Html Snippet’)

Activate the plugin …

Activate the 'Insert Html Snippet' plugin

(Activate the plugin)

Once the plugin has been installed and activated, a new item called XYZ Html will display in your menu …

XYZ HTML menu

(XYZ Html plugin menu)

Idea

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

Highlight and copy your code to the clipboard

(Have your code ready)

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

XYZ Html > HTML Snippets plugin menu

(XYZ Html > HTML Snippets menu)

Click on the Add New HTML Snippet button …

'Add New HTML Snippet'

(’Add New HTML Snippet’)

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

Add a new Snippet

(Add a new Snippet)

This creates your new snippet as a shortcode

Paste this shortcode into your posts and pages!

(Your new HTML Snippets shortcode!)

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

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

You can create a new shortcode without having the code.

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

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

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

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

A table with all your snippets appear in the ‘HTML Snippets’ admin screen …

List of snippets

(Snippets and shortcodes table)

Because snippets are stored in an independent location (i.e. a separate database), you can use the same snippet in different posts and pages and control everything from a single location. If you modify your code snippet, whatever is controlled by the snippet will automatically be updated throughout your content.

Shortcodes can be added to your content in the WordPress visual editor.

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

 Add shortcodes to your content directly in the WordPress visual editor.

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

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

Script added to content via a shortcode

(Script added to content via a shortcode)

Useful Information

You can edit, deactivate, and delete your snippets …

Delete, edit, or deactivate your snippets

(Edit, deactivate, or delete your snippets)

Note:

  • If you delete or deactivate a snippet but the plugin is left active, your shortcode will not display in your content. The plugin will fix the content so that it will not be visible to visitors.
  • If the plugin itself is deactivated, the shortcode will show up as a line of text in your content (you will need to manually remove the shortcode wherever it’s been added).

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

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

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

EmbedIt Pro

EmbedItPro

(EmbedIt Pro – WordPress Plugin)

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

After installing and activating the plugin, a new menu item called HTML Snippets will appear in the navigation menu …

EmbedIt Pro menu

(EmbedIt Pro plugin menu)

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

EmbedIt Pro Shortcode

(EmbedIt Pro Shortcode)

You will notice that two new buttons have been added to your Editor toolbar: HTML Snippet and Custom Field

EmbedIt Pro adds new menu items to the visual editor toolbar

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

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

Use the menu buttons to add shortcodes to your content.

(You can use the menu buttons to insert a shortcode into your content.)

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

Insert HTML Snippet

(Insert your HTML Snippet)

Your shortcode will be inserted into 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 post or page. The code should have been added to your content in the location you have specified …

Content with script added

(Content with script added)

While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed below the section where your script has been inserted. This allows you to edit scripts “on the fly” (this is useful if you need to edit form parameters, resize videos, etc.)

To update your code, click the Edit Snippet button …

Edit code on the fly!

(Modify code “on the fly”!)

This will take you to the Edit HTML Snippet screen. Make the changes to the code and save. Wherever the snippet has been added to content will be automatically updated with your changes …

Update and republish your code to make sitewide changes

(Edit, update, and republish your code to make sitewide 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 Snippets to other sites

(Export your 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 custom fields, you can paste your 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.

Embed shortcodes into your content using custom fields

(Add shortcodes to your content with custom fields)

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

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

(Some themes provide built-in features)

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

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

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

Some applications (e.g. analytics and ad tracking tools), however, require code to be added not only to content but also to areas such as headers, footers, etc. (for example, product download pages, opt-in confirmation pages, and so.)

You can find a number of WordPress plugins that allow you to add code to the header section of your pages and posts. Many of these plugins, however, 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 single page and then let you turn the code off on selected pages).

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

Useful Information

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

CSS & JavaScript Toolbox

CSS & Javascript Toolbox

(CSS & Javascript Toolbox)

CSS & JavaScript Toolbox (or CJT) lets you add code elements and contribute to your WordPress installation software code using an easy-to-use web interface.

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

Info

For comprehensive documentation, go here:

Note: After activating CJT, you will be asked to go through an installation process to create 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 must be installed the first time you use the plugin

(First-time plugin use requires installing database tables)

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

CJT plugin menu

(CSS & JavaScript Toolbox menu)

Click on CSS & JavaScript Toolbox on the menu …

CJT menu

(CSS & JavaScript Toolbox menu)

This brings up the CSS & JavaScript Toolbox dashboard …

CSS & JavaScript Toolbox dashboard

(CSS & JavaScript Toolbox dashboard)

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

CSS & JavaScript Toolbox - Add New Code Block Button

(CSS & Javascript Toolbox – New Code Block)

In the ‘Create New Code Block’ window, add a name to your new 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 specify the “Initial Block Position” (specify whether 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 field will appear. Paste your code or script into this section …

CJT content area

(CJT code field)

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

Specify where to insert your code

(Select where to add 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 all functions) …

Access more CJT functionality via the toolbar

(Access CJT features via the toolbar menu)

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

Click 'Save All Changes' to save your settings

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

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

Tip

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 added code to an area that is not meant to be visible (like the “header”) and you need 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 (e.g. Firefox) and go to the page containing the code.

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

Tools > Developer > Page Source

(Tools > Developer Tools > Page Source)

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

Use the search function (Ctrl+F) or scroll down until you can locate the code that you have added (if adding code to the header section, it will normally be contained  between the <head> and </head> tags) …

How to view your code

(How to view your code)

If you can see the code in your page, then the next step is to test your script and make sure that everything is working correctly. If you experience any errors, repeat the above process and make sure that your code has been added correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your site before doing anything that involves changing code.

Adding Scripts And Code Snippets To WordPress Pages And Posts

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

***

"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