How To Insert Code Into WordPress

You don’t need to know how to write code to run or manage a WordPress site. However, you may occasionally come across a script or a few lines of code that, if added to your content, can give you the kind of functionality you are looking for.

For example, you may come across a piece of code that would always show today’s date on your special offer, or create the right call to action at the end of your posts, or display relevant ads in a certain location of your pages, or change the layout of your content for a particular section, etc.

In this tutorial you are going to learn how to easily insert code and scripts into your Posts and Pages, so you can take advantage of the additional functionality these scripts can provide for you.

You are also going to learn different methods you can use to insert code and scripts into your content.

Watch the video below and then complete the step-by-step tutorial to learn more about how to insert code into WordPress Posts and Pages …

Inserting Codes And Scripts Into WordPress Posts And Pages Manually

WordPress does not allow you to insert codes and scripts (e.g. HTML, Javascript) directly into the Visual Editor.

You can, however, insert code into WordPress using the text editor.

To insert one into your WordPress article for a Post or Page, do the following:

First, select the code that you want to add to your WordPress Post or Page and copy it to your clipboard …

Next, go to the Post or Page you are editing and select the exact location where you want your script to display, then create a new line and insert a string of “placeholder” characters (e.g. @@@@@) …

Click on the Text Tab to switch from the Visual editor to the Text editor…

Locate and highlight the placeholder text characters you have added earlier …

Paste it over your selected text …

Remember to publish your post or page to save your new content.

Important: DO NOT switch back to the Visual Editor window after inserting code like Javascript, HTML, etc, or it will disappear and you will need to repeat the above process to add it again. When adding Javascript to your posts or pages, it’s best to publish the page and stay in the HTML editor window if you need to do any further content editing.

To avoid problems, paste any code you want to display in your WordPress Posts or Pages into a plain text file and save the file first. This way you can easily get it again if you need to.

Tip: A smarter solution you can use for adding code to WordPress Posts and Pages is to use plugins that let you enter the code or script into a separate area of your site and then “call” the script by letting you add a “shortcode” into your content.

How To Insert Code Into WordPress

WordPress Shortcodes

A “shortcode” is a very simple short bit of code that includes embedded codes and/or scripts, and allows you to perform complex functions in WordPress without needing to have coding skills or programming knowledge. Shortcodes can be inserted anywhere in your site to trigger a complex script into action. Typically, shortcodes look like descriptive bits of text wrapped in square brackets, e.g. [ezformshortcode].

Shortcodes enable plugin developers to create complex content such as forms, image galleries, content generators, etc …, which you can then easily insert into WordPress using a simple text code supplied by the plugin.

This is illustrated in the example below:

In the screenshot above, you can see the following:

[1] A Plugin is installed on your WordPress site that lets you paste a script into a separate content field (we’ll show you this plugin further below)

[2] After pasting the code into the field and saving, the plugin generates a unique shortcode for calling up this script.

[3] You then copy the shortcode to your clipboard, and paste it into a new or existing Post or Page where you would like the script to display. Once you have “embedded” the shortcode in to your content, you then publish or update your Post or Page.

[4] WordPress will now call up and load the script into a browser whenever someone visits your site and views the Post or Page where you have embedded the shortcode into the content.

The great thing about using shortcodes is that you don’t have to mess with scripts or code to get the functionality of the script … you just insert the shortcode where you would like the script or code to appear and WordPress does the rest!

Inserting Codes And Scripts Into WordPress Posts And Pages

In this example, you will learn how to insert code into WordPress using a free WordPress plugin called EmbedIt Pro …

As the name of this plugin suggest, EmbedIt Pro allows you to embed HTML code into a post, page, or a sidebar widget.

Essentially, the way this plugin works, is that it allows you to code your HTML separately using shortcodes or custom fields.

You then create and store HTML snippets, and insert them into your content by clicking the “HTML Snippet” button in the post editor (see step-by-step tutorial below)

HTML snippets are objects that can store scripts for just about everything: a video embed code from YouTube, some javascript content, audio player code, etc.

The tutorial below shows you how to use the EmbedIt Pro plugin to add code to your posts or pages using HTML snippets.

How To Embed Codes And Scripts Into Your WordPress Content – EmbedIt Pro Tutorial

Download the plugin here, or use the “Search method” to install the plugin directly from your WordPress dashboard as described in this tutorial: How To Use WordPress Plugins …

After installing and activating the EmbedIt Pro plugin, a new Menu item called HTML Snippets will be added to your WP Admin Menu section …

Important: Make sure you have your script available (e.g. saved in a plain text file) and ready to paste into your post or page.

To create a new code snippet, click on HTML Snippets > Add New …

In The Add New HTML Snippet screen, name your code snippet by entering a name in the Title section (this is for your own reference, so enter a descriptive title to help you identify what the snippet is about!), and paste your code into the Body section …

Click the Publish button to save your new HTML Snippet …

Your HTML Snippet will be saved and published as a Shortcode …

After creating your HTML Snippet, the plugin stores your snippet in a separate list inside the plugin’s database.

You can view all of your HTML Snippets by selecting HTML Snippets > HTML Snippets from your WP admin menu …

A list of all HTML Snippets you have created will be displayed in the HTML Snippets admin screen. Because snippets are stored in an independent location (i.e. the plugin’s database), you can add the same snippet to multiple posts or pages.

You can also edit your snippet code, and this will automatically update the code on all the places where you have added the shortcode …

To insert the code into your content, go to the post or page you want to edit, and place your mouse cursor in the location where you would like to add the code.

You will notice that a couple of new menu buttons have been added to your Editor Menu Toolbar: HTML Snippet and Custom Field.

For this example, we will use the HTML Snippet button to insert a shortcode into our content.

With the cursor location selected, click on the HTML Snippet button to select and insert your code snippet …

A window will pop up on your screen allowing you to select any of the HTML Snippets you have previously created and saved. Select the HTML Snippet you would like to insert into your post or page and click OK to continue …

The shortcode associated with your HTML Snippet will be inserted in the location of your cursor …

Click the Publish or Update button to save your settings …

When you view your updated post or page, you should see that the code has been inserted and the new content should display on your browser window in the location you specified …

While you are logged into your WordPress administration area, an Edit Snippet button should display below the section where your code is inserted. This allows you to make updates to your code “on the fly” (for example, this is useful if you need to change sizes of videos or images embedded in it to make them display better on your page).

To edit or update the code, click on the Edit Snippet button …

You will be taken to the Edit HTML Snippet screen. Here you can edit and update your code, and all posts and pages that include the shortcode for this snippet will be automatically updated with your new changes …

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

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

If you are familiar with custom fields, you can paste your HTML code to embed in a custom field of your choice, and then place a shortcode in your content by clicking the “Custom Field” button in your content editor.

This is useful when you need to quickly embed HTML in a single post without leaving the post editing window.

Tip #3 – Inserting code into the header section of WordPress

A plugin like EmbeditPro allows you to easily add scripts into the content area of your WordPress Posts and Pages.

Some applications, however, require that code be added not only to the content section, but also to the header section of an individual post or page in order for the application to work (for example, if you are tracking Facebook Ad conversions, you will need to insert a snippet of code into the header section of the individual page or post where conversions occur (e.g. a “thank you” or “download” page.).

You can find a number of WordPress plugins that will allow you to add code to the header section of Posts and Pages, but with many of these plugins, the code is added to all Posts and Pages, not just the one you want.

If you need to insert scripts into places outside of the content area of single Posts or Pages, then a great Free WordPress plugin you can use is CSS & Javascript Toolbox …

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

The way this plugin works, is that it allows you to modify or extend your site functionality and appearance by adding custom code directly into CJT code blocks, which you can then assign to individual pages, posts, custom posts, categories, URLs, expressions, and loads more!

The plugin developers of CJT have created comprehensive documentation and a User Manual for the plugin, which you can access here: CJT Free Version

After installing and activating the plugin, you will see a new item on the WP admin menu called CSS & Javascript Toolbox. Click on the CSS & Javascript Toolbox menu item …

The CSS & Javascript Toolbox screen will display on your screen …

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

The Create New Code Block window appears.

Give your code block a name, select the checkbox to activate it (or leave it unchecked if you don’t want it activated yet), select a “Location Hook” (Options = Header / Footer. This specifies whether to insert your code block in the header of footer of the page), and the “Initial Block Position” (Options = First Block / Last Block. This lets you specify whether the script should be added before or after all other code in the header or footer), then click Create …

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

Next, select the location on your site where you want the code block to be inserted (Page, Post, etc …)

The plugin screen has a number of icons you can click to access its features (hover your mouse over the icons to see a description of the feature), as well as links to help documentation …

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

The plugin also adds a menu icon to your WordPress Visual Editor, which allows you to insert an existing code block when creating or editing a Post or Page …

How To Insert Code And Scripts Into a WordPress article

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

Tip: How To Check That Your Code Has Been Added

If you have added code to a section of your site like the “header” section that is not meant to be visible (e.g. a conversion tracking script) and you want to check to make sure that the code has been added, then here’s how to do it:

Note: For this example, we’ll use the Firefox browser. All browsers have a similar feature.

First, open up your internet browser (e.g. Firefox) and go to the page where you have inserted the code, then select Tools > Web Developer > Page Source from your browser menu section …

A new browser window will open up displaying the source code for that page. Scroll down the page until you find the code that you have inserted (if adding code to a page header, the code will typically be found between the <head> and </head> tags …

If you can see the code that you have added in the page source, then you know that your code has been added. If you experience any errors, repeat the above process and make sure that you have entered the code correctly, and placed it in the correct location as per your script instructions.

WordPress is huge and can sometimes be overwhelming about where to start. As you move on to the next Page, you will have a clearer picture of where to start and progress to building a professional WordPress Site.