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:



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



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:



Which creates the following output:



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:



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!

Updated on: 10/10/2024