WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

How To Insert Code And Scripts Into WordPress Posts And Pages

One of the main benefits of using WordPress is that you don’t need to have technical skills like editing code to build a successful web presence.

You may come across a situation, however, where you may be required to embed a block of code into content in your posts in order to add a desired function to your site. Useful examples where adding code snippets to pages would enhance the functionality your site include:

(Adding scripts to content can give you additional functionality)

In this step-by-step tutorial, you are going to learn how to insert code into your WordPress pages.

Adding Simple HTML Code To Your WordPress Pages Using The Text Editor

Note: Before adding any code snippets to WordPress make sure to backup your database and files first. If you don’t want to back up your site yourself, then get help from a WordPress professional, or use WordPress backup plugins.

You can learn more about a great WordPress backup plugin that can fully automate your backup process here:

You cannot add code directly into the WordPress visual editor …

(Pasting code into the WordPress visual editor does not work)

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

First, find or create your code. You can use a web-based HTML editor (e.g. search online for “HTML Code WYSIWYG Editor“) or consider using HTML templates

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

Copy the code to your clipboard …

(Highlight and copy the code to your clipboard)

Next, open your post or page and add a placeholder (e.g. @@@@@) to mark the spot where you want your code to appear in your content (create a blank line) …

(Add placeholder symbols to mark the spot where you want your code to appear in your content)

Switch to the Text editor to paste in the code …

(Switch to the Text editor to paste in code)

Find the placeholder and select the entire line …

(Select and highlight the line containing the placeholder text)

Paste the code over your highlighted placeholder …

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

Save and republish your content and preview and test the results …

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

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

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

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

Pasting Javascript code directly into the text editor could cause errors.

The method we recommend is to use a plugin that processes scripts from ’shortcodes’ placed into your content.

What Is A Shortcode?

’Shortcodes’ are simple bits of code that allow users to perform complex functions with no coding or programming skills. Shortcodes can typically be added to widgets, posts, and pages to trigger complex scripts into action.

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

(What a shortcode looks like)

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

How WordPress Shortcodes Work

(How WordPress shortcodes work)

The screenshot above explains how to use WordPress shortcodes:

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

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

[3] After pasting your shortcode into the content, publish or update your page or post.

[4] WordPress will now automatically call up the script every time someone loads the content containing the embedded shortcode on their browser.

Shortcodes are great because you don’t have to mess around with code to get the functionality you want … simply add the shortcode where you would like the code to appear and WordPress does the rest!

How To Embed Scripts Into WordPress Posts Using Plugins

There are a number of plugins that let you insert snippets of code and scripts into your pages, widgets, and posts.

Insert HTML Snippet

(Insert Html Snippet WordPress Plugin)

As the name suggests, this plugin lets you insert HTML code into posts, pages or sidebar widgets.

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

HTML snippets are objects that can store codes and scripts for just about anything: audio players, javascript codes, etc.

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

Inserting Snippets Of Code Into Your WordPress Posts And Pages – Insert HTML Snippet Tutorial

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

(Install the ‘Insert Html Snippet’ plugin)

Next, activate the plugin …

(Activate the plugin)

After installing and activating the Insert Html Snippet plugin, a new item called XYZ Html will appear in your main menu …

(XYZ Html plugin menu)

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

(Have your code ready to paste into the plugin)

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

(XYZ Html > HTML Snippets plugin menu)

The ‘HTML Snippets’ screen will appear. Click on the Add New HTML Snippet button to create a new snippet …

(’Add New HTML Snippet’)

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

(Insert Html Snippet – Add a new HTML Snippet)

This saves and publishes a new snippet as a shortcode

(Shortcode!)

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

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

(You can create a new shortcode without having your script yet.)

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

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

A table with all the code snippets and shortcodes you have created appear in the ‘HTML Snippets’ admin screen …

(Table of snippets)

Because snippets are stored in an independent location (i.e. the plugin’s database), you can add the same shortcode to different pages and control everything from a single location. If you update your code snippet, the code will automatically update in every instance where the shortcode has been added.

You can add shortcodes to content inside the WordPress visual editor.

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

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

After publishing, preview your content and test the script …

(Script added using a shortcode)

As well as modifying snippet codes, you can deactivate or delete your snippets …

(Delete, edit, or deactivate your snippets)

Notes:

(If the plugin is deactivated, the shortcode will show up in the content as text)

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

EmbedIt Pro

(EmbedIt Pro Plugin For WordPress)

EmbedIt Pro is similar to the previously described plugin, with some added features.

After the plugin has been installed, a new menu item called HTML Snippets will be added to the menu …

(HTML Snippets [EmbedIt Pro] menu)

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

(EmbedIt Pro Shortcode)

A couple of new menu items will appear in your Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field

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

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

(You can use the HTML Snippet button to add shortcodes to your pages.)

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

(Insert HTML Snippet)

Your shortcode will be inserted into the content …

(Shortcode added to content)

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

(Publish to save your settings)

View your post or page and test your script. The code should have been added to your content where you have specified …

(What your visitors will see)

While you are logged into your site, an ‘Edit Snippet’ button should display below the section where your code snippet has been added. This allows you to adjust code “on the fly” (this is useful if you need to change code parameters, video sizes, etc.)

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

(Modify code “on the fly”!)

You will be taken to the Edit HTML Snippet screen. Edit the script and save. All pages and posts will be automatically updated …

(Update and republish your code to make sitewide changes)

For more details, go here}:

Tip #1: You can export your HTML snippets (and import these into other sites) using the Tools > Export function …

(Export your HTML Snippets)

Tip #2 (For Advanced Users): The plugin also uses WordPress Custom Fields to add code to your posts.

If you know how custom fields work, you can paste your HTML code into a custom field and add a shortcode in your content with the “Custom Field” button. This is useful if you want to embed HTML into a single post without leaving the post editing window.

(Add shortcodes to your posts with custom fields)

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

Many WP themes can be used with drag and drop page-building plugins like Visual Composer or Thrive Content Builder that allow you to add raw code to your content …

(Some themes provide built-in functionality)

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

A plugin like EmbeditPro allows you to easily add snippets of code to content inside your WordPress posts and pages.

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

You can find a number of WordPress plugins that will allow you to add code to headers and footers of your posts and pages. Many of these plugins, however, add code to all pages, not just the ones you want (check the plugin’s settings – some plugins and themes will add code to all pages and then let you turn the code off on individual pages and posts).

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

The information 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

(CJT Plugin)

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

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

For comprehensive documentation, go here:

Note: The first time you try to use the plugin, 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’ and the plugin will take care of the rest …

(First-time plugin use requires installing database tables)

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

(CJT plugin menu)

Click on CSS & Javascript Toolbox on the menu …

(CSS & Javascript Toolbox menu)

This loads the CSS & JavaScript Toolbox screen …

(CSS & JavaScript Toolbox dashboard)

Click on the New Code Block button to add custom code to your site …

(CJT – New Code Block Button)

In the ‘Create New Code Block’ window, type a name, 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 choose the “Initial Block Position” (this allows you to specify if the script should be added before or after all other code inside the header or footer. Options = First Block / Last Block.). After selecting your options, click Create

(‘Create New Code Block’ window)

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

(CJT code field)

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

(Select where to add your block of code)

The main plugin dashboard also has a number of icons you can click to access different features, links to help documentation, etc. (hover your mouse over the icons for item descriptions) …

(Access plugin features via the toolbar menu)

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

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

More info:

Tip: Checking That Scripts Have Been Added Correctly

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

If you have added conversion tracking code to 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 Hidden Code In Firefox

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

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

(How to view page code in Firefox)

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

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

(How to check that you have added scripts correctly)

If you can see the code in page source view, then all that’s left is to test your script and make sure that everything is working as it should. If you experience any problems, repeat the above process to make sure that you have embedded your code correctly, or get help from a professional. As stated at the beginning of this tutorial, always back up your site before adding, changing or deleting code.

Congratulations! Now you know how to easily snippets of code to your posts and pages.

***

"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

Recommended Video Courses For WordPress Users

Why 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

Keyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

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

Google 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

WordPress 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