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

How To Insert Code And Scripts Into WordPress Posts And Pages

One of the best things about using WordPress is that you don’t need to have technical skills like editing code to run a successful website.

You may come across an instance, however, where you may decide to add a script or code snippet to your content in order to add a particular feature to your site. Useful examples where inserting scripts into content would add functionality to your site include:

(Adding scripts to your content can give you additional functionality)

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

Adding Simple HTML Code To Your Posts And Pages - Manual Method

Note: Before adding any code snippets to WordPress we recommend backing up your site first. If you don’t want to do site backups, then consider using professional support services, or use a backup plugin.

Learn about a great WordPress backup plugin that we recommend using to completely automate your WordPress file and data backups here:

Scripts cannot be pasted directly into the WordPress visual editor …

(Do not paste code into your visual editor)

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

First, find or create the code you would like to add to your content. You can use an HTML editor (e.g. search online for “Online HTML Editor Free“) or consider using HTML cheat sheets

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

Copy all of your code to the clipboard …

(Highlight and copy all of the code to your clipboard)

Next, open your post or page and in the Visual Editor, add placeholder symbols to mark the location where you would like your script to display in your content …

(Add a placeholder where you would like your script to display)

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

(Switch to the Text editor to paste your code)

Find your placeholder and select the entire line …

(Select and highlight the line containing your placeholder)

Paste your HTML code over the selected text …

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

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

(Preview and test any code inserted into your posts)

If you need help using basic HTML, refer to this tutorial:

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

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

Pasting complex directly into the WordPress text editor could lead to errors.

A better method for adding code to WordPress pages and posts is to enter the code snippet into a plugin that ”calls” the script using ’shortcodes’ placed into your content.

WordPress Shortcodes

’Shortcodes’ are short bits of code that allow users to perform complex functions in WordPress without coding or programming skills or knowledge. Shortcodes can typically be added to widgets, pages, and posts to trigger a complex script into action.

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

(What a WordPress shortcode looks like)

Shortcodes allow plugin developers to create complex scripts such as user forms, content formatting tools, image tools, etc., which you then add to your content using a simple text string.

How To Use Shortcodes

(How a shortcode works)

The above explains how to use a WordPress shortcode:

[1] First, install a plugin that allows you to paste code snippets 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 shortcut for processing the script.

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

[4] The plugin will now load your script.

Shortcodes are great because you don’t have to mess with the actual script … simply add the shortcode where you would like the script to appear and WordPress does the rest!

Adding Code To WordPress Pages Using Plugins

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

Insert Html Snippet

(Insert Html Snippet WP Plugin)

As the plugin name suggests, Insert HTML Snippet allows you to easily embed snippets of HTML code into a page, post, or a sidebar widget.

Essentially, this plugin allows you to create HTML snippets and add them to your content using shortcodes or custom fields.

HTML snippets are objects that can store scripts for just about anything: codes for embedding calculation tools, custom tracking codes, etc.

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

How To Add Scripts And Snippets Of Code To Your Pages – Tutorial

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

(Locate and install ’Insert Html Snippet’)

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 code handy (e.g. pasted in a plain text file) …

(Copy your code to the clipboard)

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

(XYZ Html > HTML Snippets menu)

The ‘HTML Snippets’ screen loads in your web browser. Click on the Add New HTML Snippet button to create a new shortcode …

(’Add New HTML Snippet’)

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

(Create a new Snippet)

A new snippet will be saved and published as a shortcode

(Your new HTML Snippets shortcode!)

You can also create a shortcode without having the code. This is useful if, for example, you are awaiting approval of the code but would like to create and publish the pages where your script will eventually display.

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

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

After creating a new HTML Snippet the plugin will store it in a separate list within the plugin’s database. You can view all of your stored snippets and shortcodes by selecting XYZ Html > HTML Snippets from your WP main menu …

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

A table of all the code snippets you create display in the ‘HTML Snippets’ admin screen …

(Snippets and shortcodes table)

Because snippets get stored in an independent location (i.e. the plugin’s database), you can insert a single snippet into various pages and posts and control everything from a single location. If you edit the code and update the snippet, whatever code is in the snippet will automatically be updated wherever the shortcode has been added.

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

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

( Embed shortcodes into content inside the WordPress visual editor.)

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

(Script added to content using a shortcode)

You can delete, deactivate, or edit snippets …

(Deactivate, delete, or edit code snippets)

Note:

(If you deactivate the HTML Snippets plugin itself, the shortcode structure will appear in the content)

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

EmbedIt Pro

(EmbedItPro)

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

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

(HTML Snippets [EmbedIt Pro] plugin menu)

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

(EmbedIt Pro Shortcode)

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

(EmbedIt Pro adds new menu items to the WordPress visual editor)

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

(You can 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 stored. Type in the name of the HTML Snippet you want to add into your post/page and click OK to proceed …

(Insert name of the HTML Snippet)

Your shortcode will be added to the content …

(Shortcode inserted into content)

Click Publish/Update to save …

(Update to save your settings)

View your updated post or page and test your script. The script should have been added to your content in the location you have specified …

(Voila … your code has been 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 change form elements, video sizes, etc.)

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

(Change code “on the fly”!)

This takes you to the Edit HTML Snippet screen. Make your necessary changes to the code and resave. Everywhere your snippet has been added will automatically update with your new changes …

(Update and republish your code to make sitewide changes)

For more details, go here}:

Tip #1: The plugin allows you to 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 EmbedIt Pro plugin also uses WordPress Custom Fields to add code to your posts.

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

(Paste shortcodes into your content with custom fields)

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

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

(Some WordPress themes are built with built-in code adding 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 ad tracking tools), however, require code to be inserted into content but also to sections such as headers, footers, etc.

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

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

The section below is for advanced users. If you need any help editing scripts 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 powerful and flexible plugin that lets you add code and contribute to your WordPress installation code using an easy-to-use web interface.

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

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

Note: When you first try using CJT, you will need to install the plugin’s database tables and activate the plugin’s functionality. It’s really simple, just click the ‘Install’ button …

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

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

(CJT menu)

Click on CSS & JavaScript Toolbox on the menu …

(CJT menu)

The main CJT dashboard will come up …

(CSS & JavaScript Toolbox dashboard)

Click on New Code Block to begin adding custom code …

(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 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” (specify if 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’ window)

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

(CJT content field)

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

(Select where to add your code)

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 tooltip descriptions) …

(Access CJT features via the toolbar menu)

Click the ‘Save All Changes’ button after creating or editing your code block to save your code settings …

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

More information:

Tip: Checking If You Have Added Your Code Correctly

Some scripts will ask you to verify if your code has been added correctly and some will not.

If you have pasted code into an area like the “header” that is not meant to be visible and you need to check if the code has been added correctly, then do the following:

How To View Hidden Page Code In Firefox

First, open up your internet browser (e.g. Firefox) and visit the page where you have added your code.

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

(Tools > Developer Tools > Page Source)

A new browser window opens up displaying the source code for that page.

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

(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 problems, repeat the process to make sure that you have pasted in the code correctly, or get a professional to help you. As stated earlier in this tutorial, always back up your site before doing anything that involves changing code.

Congratulations! Now you know how to add scripts and code snippets to your WordPress pages and posts.

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com

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

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

WordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

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

How To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

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