• 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 Insert A HTML Design In WordPress Without Modifications

Bhagwad Park

Published on: August 22, 2018

Categories: WordPress 1

The original design of WordPress was for posts and pages with text and image-based content. It didn’t really envision that people would want to create complex HTML inside their content. Of course, we have the “Text” or “HTML” tab into which we can directly write HTML code, but it isn’t ideal.

For one thing, the WordPress editor makes its own changes to code before generating the page. This often has unintended side effects like an extra <p> tag somewhere that can mess things up. Second, it usually doesn’t render properly in the visual editor so it’s distracting while writing. And third, your code formatting and other elements can vanish when switching between the visual editor and the text editor.

In this tutorial, I’ll show you how to smoothly insert any HTML code into a WordPress post so that it displays exactly as intended. But first, an example.

Example of HTML Code Gone Wrong

Let’s say I want to display a box with a border and two lines inside it with HTML. Here’s the code:

<div style="
    border: solid;
">
<div>This is some text</div>
<div>This is another line of text</div>
</div>

I can insert it into a WordPress page via the “Text” editor like this:

Inserting HTML Into the WordPress Editor

Unfortunately, the page doesn’t render quite as intended. Here’s the output.

Additional Elements are Inserted by WordPress

You can see in the screenshot, that WordPress inserts an additional “<p></p>” tag between two divs that wasn’t there in the original code. It might not look like much, but it changes the final look of the box entirely. Similarly, you can’t predict where WordPress will mess around with your code.

Moral of the story: Don’t paste HTML snippets into the post editor.

Solution: Create and Use a Shortcode Instead

One of my earlier tutorials was about how to insert a shortcode into WordPress. That’s what we’re going to use here. It involves inserting custom code into your functions.php file or a custom PHP plugin. For the HTML snippet above, here is the code we’re going to use:

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' );

Replace the section in bold with your snippet. A warning. Make sure you don’t change the indentation of the last “EOT;” statement. The standards require it to be on its own line with nothing else – no tabs or spaces.

This creates a new shortcode called “html”, and we use it in the WordPress editor like this:

Using the Shortcode

Which creates the following output:

Exactly as Inserted

As you can see, the additional paragraph “p” tag between the div elements has vanished and the code renders exactly as expected! Using a shortcode like this is the ideal way to place custom graphics or HTML snippets into WordPress.

Adding Parameters to the Shortcode

If you need to customize the HTML for a given page, we can use attributes as parameters as explained in the shortcode tutorial. For example, say we want to change the first and second lines in the HTML. We change the code to this:

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

  $atts = shortcode_atts( array(
		'first_line' => 'Sample first line',
		'second_line' => 'Sample second line'
	), $atts, html);
	
	$first_line = $atts["first_line"];
	$second_line = $atts["second_line"];

    $html_code = <<<EOT
<div style="
    border: solid;
">
<div>$first_line</div>
<div>$second_line</div>
</div>
EOT;
return $html_code;
}
add_shortcode( 'html', 'html_func' );

And now, pass the first and second lines as an argument:

[html first_line = "This is the first line" second_line="This is the second line"]

And this gives us the following output:

Insert an HTML Design in WordPress

As you can see, we’ve managed to customize the output. So you can reuse this design over and over in your pages and still customize them depending on the situation!

Now you can insert any kind of HTML design in WordPress without worrying about reusability or breaking it!

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
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • 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
  • 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