5 Ridiculously Useful HTML Codes for Wordpress You Might Not Know
Informative Articles

5 Ridiculously Useful HTML Codes for WordPress You Might Not Know

While you don’t need to know how to code to create a good WordPress blog post, some HTML knowledge can come in handy. This blogging how to will get you off on the right foot.

5 Ridiculously Useful HTML Codes for WordPress You Might Not Know
Photo by Christopher Gower on Unsplash

I’ve created (and deleted) various blogs on WordPress since 2006. (I had some phases, okay?) Since then, there have been significant changes in features, code implementation, and UI.

For example, here is the “classic” post editor:

Visual Editor:

5 Ridiculously Useful HTML Codes for WordPress You Might Not Know

Code Editor:

5 Ridiculously Useful HTML Codes for WordPress You Might Not Know

Even this basic editor has changed over the years— especially when Medium opened up shop.

However, I prefer to use the Admin Editor.

Visual Editor:

Code Editor:

5 Ridiculously Useful HTML Codes for WordPress You Might Not Know

Lately, when I make new blog posts, I find myself searching for the same kinds of code over and over and over again. So, this post is one part selfish attempt to have everything all in one place, one part helping my fellow bloggers out. Win-win, right?

If you’re a beginner and have never dabbled with any code before, you should read this post by WordPress.com.

Okay, so here are the:

5 Ridiculously Useful HTML Codes for WordPress You Might Not Know1.

Function: Hide photos inside a blog post.

Why it’s useful: You can include variations of your blog post images without crowding up your post. This allows you to do some A/B testing on which kinds of photos your readers share more. And you can share images that are tailored for specific social media sites (vertical for Pinterest, square for Instagram, etc.)

Code: <div style="display;none">YOUR IMAGE HERE</div>

More Info: This post by Pinch of Yum


2.

Function: Center iframe

Why it’s useful: Some affiliate programs give you bits of iframe code to embed in your blog and promote their products. These are automatically left aligned which sometimes makes them look really out of place. *Note* If you have a free WordPress.com blog, you will not be able to use iframes. However, self-hosted WordPress.org blogs AND Business Plan blogs hosted on WordPress.com can use iframes.

Code:
<iframe class="aligncenter" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="YourAffiliateLink.com">
</iframe>

All you have to do is add the bolded text. 🙂 It took me ages to find this one. Scraped it off of an IT forum I only half understood and doubt I could find again if I tried.

.

.

.
Yep, just tried. Had absolutely no luck. Although, apparently “align=middle” works, too. I haven’t tested it out yet, but it’s an extra option in case the first one doesn’t pan out for you.


3.

Function: Create columns in a blog post

Why it’s useful: You can create rows of iframes and images without turning your post into a tower of doom (reducing bounce rate).

Code:
<div style="width:30%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1</div>
<div style="width:30%;padding:0 10px 0 0;float:left;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
<div style="width:30%;padding:0 10px 0 0;float:right;">
Your content for your column #3
Your content for your column #3
Your content for your column #3
</div>
<div style=”clear:both;”></div>

I will admit, this is the code that always ends up the wonkiest for me. Sometimes it works really well but the images for some reason wind up a little high or low, and it drives me batty. If you’re not nit-picky about details (because really, they are VERY minor) this should work really well. There are also several free plugins available that do the coding for you. I use Advanced Wp Columns which you can see in action in this post.

More Info: This post by Elegant Themes


4.

Function: Break up a blog post into different pages

Why it’s useful: Reduce scrolling tower of doom syndrome, present information to your readers in manageable chunks (hmm, I probably should have paginated this post).

Code: <!--nextpage-->

Some people use this as a way to “cheat” and keep readers on their site longer. But excessive pagination can be irritating to readers, so please use this tag with moderation.

More Info: This post by Jannah Docs


5.

Function: Show code

Why it’s useful: Allows you to insert code that “looks” like code. In case you want to make your “Useful Blog Codes” post. 🙂

Code: <code>YOUR CODE HERE</code>

Here’s the fun bit. Any section of YOUR code between the <code> tags that has a less than (<) or greater than (>) sign needs to be replaced with &lt; and &gt; respectively. At least that’s how it works on my site. If you run into trouble with this here’s some…

More Info: This post by WordPress.org

 

PS: Want to find more ways to improve your blog? Check out the Busy Writers’ Room.

Tell us what you think!