One of the main advantages of using WordPress is that you don’t need to know how to write code to manage a website successfully.
There may be times, however, where you may be required to paste a code snippet or script into posts or pages in order to extend the capabilities of your site. Typical code snippets you may want to add to your site include:
- Today’s date
- Adding a Google search box to your post, sidebar, or page
- Adding newsletter subcription forms
- Display relevant advertising
- Conversion tracking code (e.g. Facebook Ads)
(Adding scripts to your pages can give your site additional functionality)
Some script functions can be added to WordPress using plugins that make handling code easier. In this tutorial, you will learn how to insert snippets of code into your WordPress pages and posts. You will also learn different plugins that can be used to insert code snippets into your content.
Embedding Simple HTML Code Into WordPress Pages - Manual Method
Note: Remember to back up your site before adding any scripts or code to WordPress. If you don’t want to back up your files yourself, then use a professional, or use a WordPress backup plugin.
Learn about a WordPress backup plugin that can fully automate your site backups here:
WordPress doesn’t let you add code directly into the visual editor …
(Pasting scripts inside the visual editor will not work)
You can, however, place simple code into the WordPress text editor. To add HTML code to a page or post, do the following:
First, source or create your HTML code. You can use an HTML editor (e.g. search online for “Free Online HTML Editor WYSIWYG“) or consider using an HTML cheat sheet …
(Use an online HTML editor or HTML templates to create your code. Source: HTML-Online.com)
Highlight and copy all of your code to the clipboard …
(Copy all of the code to your clipboard)
Next, open your post or page and in the Visual Editor, create a new line and add a placeholder (e.g. @@@@@) to mark the location where you want your code to appear in your content …
(Add a placeholder to mark the spot where you would like your script to appear in your content)
Click on the Text tab to switch to the Text editor …
(Switch to the Text editor to paste in your code)
Find your placeholder symbols and highlight the line …
(Select and highlight your placeholder)
Paste the code over the highlighted placeholder …
(HTML code pasted into text)
Publish your page or post, then preview and test the results …
(Preview and test any code you add to your posts or pages)
If you need help using basic HTML in WordPress, refer to this tutorial:
While the above can be used to add simple HTML code to your content, we do not recommend pasting scripts containing complex code directly into your content (e.g. subscriber forms, etc.) …
(Avoid using the WordPress text editor to add complex code … use the methods below instead!)
Pasting scripts directly into the WP text editor could cause errors.
A smarter way to add code to WordPress posts and pages is to enter the script into a plugin that processes the script using ’shortcodes’ pasted into your content.
A ‘shortcode’ is a code shortcut. It allows you to trigger complex functions with no coding knowledge. Shortcodes are typically added to widgets, posts, and pages to trigger complex scripts into action.
Shortcodes look like bits of text enclosed by square brackets, e.g. ‘[ezformshortcode]’ …
Shortcodes allow WordPress developers to create complex scripts such as content generators, image tools, user forms, etc., which you then add to your content via a short text string.
How To Use WordPress Shortcodes
(How a shortcode works)
The above explains how to use a shortcode:
 You install a plugin that lets you paste a script into a special field (see the tutorial below for an example)
 After pasting the script into the special field and saving, the plugin generates a unique text shortcut that will process the script.
 Once you have pasted your shortcode into the content, publish or update your page.
 WordPress will now automatically load your code.
The great thing about using shortcodes is that you don’t have to mess around with the actual code … simply add the shortcode where you would like the functionality to appear and WordPress does the rest!
Embedding Code Snippets Into Your WordPress Pages Using Plugins
There are several plugins that allow you to add snippets of code into WordPress.
(Insert Html Snippet – WordPress Plugin)
As the name suggests, this plugin lets you insert code into pages, posts and sidebar widgets.
Essentially, how this plugin works is that it lets you create separate HTML snippets and add them to your posts and pages using shortcodes or custom fields.
The step-by-step tutorial below shows you how to use Insert HTML Snippet.
Adding Code To Your Posts – Tutorial
Locate and install Insert Html Snippet inside your dashboard (search for keywords like “Insert HTML, Insert HTML Code, etc.“) …
(Install ’Insert Html Snippet’)
Activate the plugin …
(Activate the plugin)
Once the plugin has been installed, a new item called XYZ Html will display in the WP menu …
(XYZ Html menu)
Important: Make sure you have your code available (e.g. pasted into a plain text file) …
(Highlight and copy your code to the clipboard)
To create a new code snippet, click on XYZ Html > HTML Snippets …
(XYZ Html > HTML Snippets plugin menu)
Click on the Add New HTML Snippet button to create a new shortcode …
(Click on the ‘Add New HTML Snippet’ button to create a new snippet)
In ‘The Add New HTML Snippet’ screen, name your snippet (this is for your own reference to help identify what the snippet is about!), paste the code into the HTML code section and click the Create button …
(Insert HTML Snippet – Creating a new HTML Snippet)
This creates and publishes your new snippet as a shortcode …
(HTML Snippets shortcode!)
You can also create a shortcode without having the script code. This is handy if, for example, you are waiting for approval of the code but would like to create and publish the content where your code will eventually show up.
In this case, go ahead and create your code snippet with placeholder content and insert the shortcode into your pages then publish. After receiving your live code, you can then edit the snippet and replace the content …
(You can also create a new HTML snippet without having the script code.)
After creating your HTML Snippet the plugin will store it in a separate list within the plugin’s database. You can view all the snippets and shortcodes you’ve created by selecting XYZ Html > HTML Snippets from your admin menu …
(Click on the XYZ Html > HTML Snippets plugin menu to view all of your snippets and shortcodes)
A table with all the code snippets you have created appear in the ‘HTML Snippets’ admin screen …
(List of snippets and shortcodes)
Because the plugin stores all snippets in its own database, you can add a single shortcode to a number of posts and pages and control everything from one location. If you modify the code in your snippet, your script will automatically update everywhere the shortcode has been inserted.
Shortcodes can be embedded into your content inside the WordPress visual editor.
To place the code into your content using a shortcode, simply open your widget, page, or post and place your mouse cursor where you would like the code to display …
(Shortcodes can be added to your content in the WordPress visual editor.)
After publishing, preview your content and test the script to ensure that your code is working ok …
(Script added to content via a shortcode)
As well as editing your snippet codes, you can deactivate and delete your snippets …
(Deactivate, delete, and edit your snippets)
- If you delete or deactivate a snippet but leave the HTML Snippets plugin active, the shortcode will not display in your content. The plugin will remove any sections that contain the shortcode from your content so that no gaps are visible to visitors.
- If the HTML Snippets plugin gets deactivated, the shortcode will appear as a line of text in your content.
(If you deactivate the HTML Snippets plugin itself, the shortcode will show up in your content as a line of text)
For more details, go here}: Insert HTML Snippet WordPress Plugin
(EmbedIt Pro – WordPress Plugin)
EmbedIt Pro is similar to the HTML Snippets plugin, with some added features.
After installing and activating the EmbedIt Pro plugin, a new menu item called HTML Snippets will appear in the dashboard menu …
(HTML Snippets [EmbedIt Pro] menu)
To create a new HTML snippet, click on HTML Snippets > Add New, add your code, give your snippet a descriptive title and click the Publish button …
(Shortcode – EmbedIt Pro)
A couple of new items will be added to your Visual Editor menu toolbar: Embed HTML Snippet and Embed From Custom Field…
(EmbedIt Pro adds new menu buttons 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 place your snippet in your text …
(You can use the HTML Snippet button to insert a shortcode into your pages.)
A window will pop up on your screen allowing you to insert any HTML Snippets you have stored. Select the HTML Snippet you want to add into your page or post and click the ‘OK’ button to proceed …
(Insert HTML Snippet)
Your shortcode will be placed in the location you have specified …
(Shortcode added to content)
Click the ‘Publish’ or ‘Update’ button to save …
(Publish to save your settings)
View your updated post or page and test your script. The script should have been added to your content where you have specified …
(Content with script added)
While you are logged into your admin, you should see an ‘Edit Snippet’ button displayed next to where your code snippet has been added. This allows you to make changes to scripts “on the fly” (this is useful if you need to change code parameters, video sizes, etc.)
To update your script, click the Edit Snippet button …
(Change code “on the fly”!)
This will take you to the Edit HTML Snippet screen. Make your changes and update. All posts and pages will update automatically …
(Edit, update, and republish your code to make sitewide changes)
For more details, go here}:
Tip #1: The plugin lets you export your HTML snippets (and import these into other sites) using the Tools > Export function …
(Export your Snippets to other sites)
Tip #2 (For Advanced Users): The plugin also uses WordPress Custom Fields to add code to your posts.
If you know how to use custom fields in WordPress, you can add your code to a custom field and add a shortcode in your content with the “Custom Field” menu button. This is useful if you want to embed code into a single post without leaving the post editing window.
(Add shortcodes to your posts using custom fields)
Tip #3 – Use Themes With Drag And Drop Code Insertion Page Building Plugins
(Some WordPress themes are built with built-in features)
Tip #4 – Adding code to the header section of WordPress
With a plugin like EmbedIt Pro, you easily insert code into content inside your WordPress posts and pages.
Some applications, however, require code to be inserted into content but also to areas such as page headers, footers, etc.
There are a number of WordPress plugins that let you add code to the header/footer section of pages and posts. Many of these plugins, however, add code to all pages or posts, not just the ones you want (some plugins will add the code to every page and then let you turn the code off for selected pages and posts).
If you want to add code outside of regular content areas, then you will need to either customize your site or use a plugin like the one described below.
The section below is for advanced users. If you need help customizing your site, please contact a professional WordPress web developer.
The way the plugin works is that it lets you modify and extend your site’s functionality and appearance by adding custom code using code blocks that can be assigned to individual pages, posts, custom posts, categories, expressions, URLs, and more!
For comprehensive documentation and user manual, go here:
Note: After activating CJT, you will be asked to install 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 …
(First-time plugin use requires database installation)
Click on the New Code Block button to begin adding custom code to your site …
In the ‘Create New Code Block’ window, name 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” (specify where to insert your code block. Options = Header / Footer.), and choose the “Initial Block Position” (this lets you 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 the code block to be inserted (e.g. in specific Pages, Custom Posts, etc …)
(Specify where to insert your code)
The CJT screen also various icons you can click to access different functions, help, etc. (hover your mouse over the icons for item descriptions) …
(Access more CJT features via the toolbar menu)
Click Save All Changes after creating or editing your code block to save your settings …
(CJT – ‘Save All Changes’ button)
For help and support with this plugin, visit the developer’s site here:
Tip: How To View Your Code
Some scripts will ask you to verify if you have added the code correctly and some will not.
If you have pasted code into areas of your site that are not meant to be visible (like the “header”) and you want to check if the code has been added correctly, then do the following:
Viewing Source Code In Firefox
First, open up your internet browser (we’ll use Firefox in this example) and visit the page containing your code.
From the browser menu, select Tools > Developer Tools > Page Source …
(How to view hidden code in Firefox)
A new browser will open up displaying the source code for that page.
Use the search function (Ctrl+F) or scroll down until you locate the code that you have added (code added to a page header is typically placed between the <head> and </head> tags) …
(Checking that you have added your code 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 correctly. If you experience any problems, repeat the above process and make sure that you have embedded your code correctly, or get a professional to help you. As stated at the beginning of this tutorial, always back up your files and database before adding, changing or deleting code.
Congratulations, now you know how to insert code into WordPress 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