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

How To Insert Code And Scripts Into WordPress Posts And Pages

One of the advantages of using WordPress is that you don’t need to have technical skills like editing code to manage a site.

There could be times, however, where you may be required to insert a code snippet or script into content in your posts or pages in order to add a certain feature or functionality to your site. Some common scripts you may want to add to your website include:

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

In this tutorial, we will show you how to add code snippets and scripts to WordPress pages. You are also going to learn different methods that can be used to insert code and scripts into your content.

How To Add Simple Code To Your Pages Manually

Note: Before adding any scripts to WordPress make sure to back up your site first. If you don’t want to do manual backups, then consider getting professional help, or use a backup plugin.

Learn about a great WordPress backup plugin that we recommend using to perform automated WordPress file and data backups here:

In WordPress, you cannot add code directly into the visual editor …

(Do not add scripts inside the WordPress visual editor)

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

First, source or create the code you want to add to your content. You can use a free web-based HTML editor (e.g. search online for “Free Online WYSIWYG HTML Editor“) or use HTML code templates

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

Copy your code to the clipboard …

(Select and copy your code to the clipboard)

Next, open your page or post and in the Visual Editor, create a new line and add placeholder text (e.g. @@@@@) in the exact spot where you would like your script to display in your content …

(Add a placeholder to mark the location where you would like your script to appear)

Next, click on the Text tab …

(Switch to the Text editor to paste in your code)

Locate the placeholder and highlight the entire line …

(Select and highlight the line containing the placeholder)

Paste the code over the highlighted text …

(HTML code pasted into text)

Save your work and preview (and test) the results …

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

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

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

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

If you paste complex code directly into the text editor you may experience errors.

We recommend using plugins that let you “call” the script from ’shortcodes’ added to your content.

What’s A Shortcode?

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

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

(What a WP shortcode looks like!)

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

How To Use WordPress Shortcodes

(How shortcodes work)

The screenshot above explains how a WordPress shortcode works:

[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 adding the code to the code area and saving, the plugin creates a unique text-based shortcut for calling up the script.

[3] Copy this shortcode and paste it into any pages, widgets, or posts where you would like the function to display and publish.

[4] WordPress will now automatically call up the code every time someone visits your post or page.

Shortcodes are great because 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!

How To Add Code To WordPress Pages Using A Plugin

Let’s now show you how to insert code and scripts into your WordPress pages using various free WordPress plugins.

Insert HTML Snippet

(Insert Html Snippet)

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

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

HTML snippets can store scripts for just about everything: calculators, custom javascript codes, etc.

The tutorial below shows you how to paste code into your posts and pages using Insert HTML Snippet.

Inserting Scripts Into Your Pages – Step-By-Step Tutorial

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

(Installing the ‘Insert Html Snippet’ plugin)

Activate the plugin …

(Activate the plugin)

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

(XYZ HTML plugin menu)

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

(Have your code ready)

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

(XYZ Html > HTML Snippets)

The ‘HTML Snippets’ screen appears. Click on the Add New HTML Snippet button to create a new shortcode …

(’Add New HTML Snippet’)

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

(Create a new HTML Snippet)

This saves and publishes your HTML snippet as a shortcode

(Shortcode!)

You can also create a shortcode without having your code snippet yet. This is useful if, for example, you are awaiting approval of the code but want to proceed with getting the content published where your script will eventually show up.

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

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

The plugin stores all snippets in a separate list within the plugin’s database. You can view all of your stored snippets by selecting XYZ Html > HTML Snippets from your WP admin menu …

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

A list of all the HTML snippets you have created show up in the ‘HTML Snippets’ admin screen …

(List of snippets and shortcodes)

Because snippets get stored in an independent location (i.e. the plugin’s database), you can embed one shortcode into a number of pages and control everything from one location. If you edit your code inside the snippet, whatever code is in the snippet will automatically be updated wherever the shortcode has been embedded.

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

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

(You can embed shortcodes into your content in the WordPress visual editor.)

After publishing, preview and test your script to ensure that the code is working ok …

(Script added via a shortcode)

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

(Edit, deactivate, and delete your snippets)

Notes:

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

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

EmbedIt Pro

(EmbedItPro – WordPress Plugin)

EmbedIt Pro gives you similar functionality to the HTML Snippets plugin, with some additional features.

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

(HTML Snippets [EmbedIt Pro] menu)

To create a shortcode, click on HTML Snippets > Add New, add your code, give your snippet a name and click the Publish button …

(EmbedIt Pro Shortcode)

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

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

You can use the HTML Snippet button to insert shortcodes into your posts. With the cursor location selected, click on the HTML Snippet button to select and insert your shortcode into your text …

(Use the menu buttons to add shortcodes to your content.)

A small window will appear 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 content and click OK to proceed …

(Insert your HTML Snippet)

Your shortcode will be added where your cursor is located …

(Shortcode inserted into content)

Click Publish or Update to save …

(Update to save your settings)

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

(What your visitors will see)

While you are logged into your WordPress backend, you should see an ‘Edit Snippet’ button displayed next to the section where your code has been inserted. 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 script, click on the Edit Snippet button …

(Adjust scripts “on the fly”!)

The Edit HTML Snippet screen will open in your web browser. Make the required changes to the script and update. Everywhere the snippet has been added to content will be automatically updated with the changes …

(Update and republish your code to make global changes)

For more details, go here}:

Tip #1: The plugin lets you export your snippets (and import these into other sites) using the Tools > Export function …

(Export your Snippets)

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

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

(Add shortcodes to your content using 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 let you add raw HTML or JavaScript code to your content …

(Some WordPress themes provide built-in functionality)

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

With a plugin like EmbeditPro, you easily insert code into content inside your pages and posts.

Some applications, however, require code to be inserted into content but also to areas like page headers, footers, etc.

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 every page and post on your site, not just the ones you want (check the plugin’s settings – some plugins will add the code to all pages and then let you turn the code off on individual pages or posts).

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

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

CSS & Javascript Toolbox

(CSS & JavaScript Toolbox – WordPress Plugin)

CSS & JavaScript Toolbox (or CJT) is a flexible plugin that lets you add code that contribute to your WordPress installation coding structure using an easy-to-use web interface.

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

For comprehensive documentation and user manual, go here:

Note: Before using 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’ and the plugin will take care of the rest …

(First-time plugin use requires database tables installation)

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

(CSS & JavaScript Toolbox menu)

Click on CSS & Javascript Toolbox on the menu …

(CJT menu)

This brings up the CSS & Javascript Toolbox screen …

(CSS & JavaScript Toolbox dashboard)

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

(CJT – New Code Block Button)

In the ‘Create New Code Block’ window, give your code block 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” (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)

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. in specific Pages, Posts, etc …)

(Select where to insert your code block)

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

(Access more plugin functionality via toolbar icons)

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

(CJT – ‘Save All Changes’ button)

More info:

Tip: How To Verify That You Have Added Your Scripts Correctly

Some scripts will ask you to verify if your code has been added 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 would like to check if the code has been added correctly, then follow the steps below:

Viewing Hidden Code In Firefox

First, open up your internet browser (we’ll use Firefox in this example) and visit the page where you have added the code.

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

(How to view source code in Firefox)

A new browser opens up with the source code displayed.

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

(How to view your code)

If you can see the 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 and make sure that your code has been added 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.

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

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

Recommended Video Courses For WordPress Users

How 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

Build An e-Commerce Store With WordPress

Learn how to set up an e-commerce store on your WordPress site using e-commerce platforms like WooCommerce and Easy Digital Downloads.

More info: Build An e-Commerce Store With WordPress

Recommended Video Courses For WordPress Users

How 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

Using S2 Member

Learn how to set up and configure a WordPress membership site using the S2 Member free WordPress membership plugin.

More info: Using S2 Member

Recommended Video Courses For WordPress Users

How 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