• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Paste Code In WordPress “As Is” With Perfect Formatting

Bhagwad Park

Published on: September 17, 2018

Categories: WordPress 0

WordPress was built for writing “normal” articles (Until Gutenberg that is!). It’s never been able to properly format code in posts. A bunch of problems crop up when trying to insert code into WordPress like:

  1. Losing indentation
  2. Incorrect HTML encoding
  3. Inability to write HTML code without breaking the editor

In this tutorial, I’m going to show you a method to past all code into WordPress without a hitch, and with perfect formatting. I’ve been using it myself for years, and it’s perfect. So let’s start.

Method 1: The “Imperfect” Way – Doesn’t Always Word

Let’s say I have the following code with proper indentation etc in Notepad:

Code with Proper Indentation

Here’s what happens when I paste it directly into the WordPress editor:

Lost Indentation

As you can see, I completely lose all indentation. And a code without proper indentation makes everyone sad. So the best way to paste a lot of code (especially PHP code) is to go to the “Text” tab, and enclose your code between <pre> tags like this:

Enclose in pre Tags

Simply put your code between these two:

<pre>
.
.
</pre>

And you’re done! With these changes, your code will render properly with the correct indentation as shown here:

Maintain Indentation

You might notice, that WordPress has escaped a lot of HTML characters are replaced them with their HTML entity equivalents.

Method 2: When Method 1 Doesn’t Work

The first method shown here works fine for a lot of code solutions. If you search online for how to paste code into WordPress, most of the tutorial will give you Method 1 and tell you to enclose it within <pre> tags.

Unfortunately, that doesn’t always work.

For example, a little while ago, I’d written a tutorial on how to insert HTML designs into WordPress. The code for that was:

function html_func( $atts, $content = null) {

    $html_code = <<<EOT
<div style="
    border: solid;
">
<div>This is some text</div>
<div>This is another line of text</div>
</div>
EOT;
return $html_code;
}
add_shortcode( 'html', 'html_func' );

Now we can try Method 1 with this and enclose it within <pre> tags as shown here:

Another Code Sample with Pre

Unfortunately, this completely messes up the design when you switch back to the normal view like this:

Pre Doesnt Work

The reason this happens is because the code contains HTML characters that impact how the page renders. So while the WordPress editor handles certain characters well, and converts them appropriately, HTML tags and characters are still messed up.

To fix this, we need to perform the encoding ourselves before pasting into WordPress. You can use any HTML encoding tool, but I’ve been using this one for years. Simply paste your code into the first box, and click “Encode” as shown here:

Encode First

Now take the results of the second box, and then paste it into the “Text” tab of the WordPress editor, enclosed between <pre> tags like this:

Pre with Pre-Encoding

And now you will have the perfect output of code:

How to Paste Code

Method 2 is pretty foolproof and works for all code, regardless of language – especially for HTML. The fact that we encode it before pasting, means that all the dangerous characters that can confuse WordPress are removed right at the start. You can see in the “encoded” version, that the tool has replaced a lot of stuff.

Note that if you use code a lot on your site, you might want to add additional features like syntax highlighting, and easy tools for viewers to copy and paste. I’ll cover that functionality in another article, but for now, it’s enough to be able to paste code accurately into WordPress with proper indentation, and without messing up your formatting.

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA