Helpful WordPress HTML + Other Extremely Useful Coding Hacks

You can do a lot of things with HTML.

Resizing text, adding hyperlinks to comments, and centering an item are just a few. In today’s post I’m showing you some useful WordPress HTML codes that you can add to your blog posts, pages, and sidebars! I’ve included some other design tips that don’t include coding. I encourage you to try at least one of these lines of code, coding can be really easy and really fun!

Please remember that with HTML, for every opening tag, < >, you must have an equivalent closing tag, < />. If you don’t put a closing tag, your formatting can get really messed up!

__________

WHERE TO INPUT HTML

This is pretty basic, although some people don’t know where to find the HTML input. It’s right beside the “visual” tab on the right task bar in a post. Always insert the code in the HTML layout, then switch back to the Visual and it will transcribe the code.

There’s also the HTML code input in the sidebar/footer widget areas. Just search for either the HTML widget or the Text widget.

Okay! Now that you know where to put the coding, let’s explore what we can do with it!

__________

HOW TO CENTER AN ITEM [E.G. IN A WIDGET]

I figured this out recently, and it is so great! Centering texts and images makes the whole setup look clean and lined up, especially in sidebars.

<p style=”text-align: center;”>text here</p>

HOW TO INSERT A HYPERLINK IN A COMMENT

These are useful if you want to link to something without having all the messy link attributes… numbers, hyphens, slashes, etc. Use in comments or sidebars!

<a href=”URL HERE“>text here</a>

HOW TO CUSTOMIZE THE “READ MORE” TAG

Instead of the basic “read more” text on the tag, you can customize it with your own text, such as “Continue Reading.”

<!–more text here–>

HOW TO RESIZE FONTS

This is so helpful! You can resize a section of a paragraph to make it smaller or larger. To resize the font, just type in the desired number instead of 12.

<span style=”font-size: 12pt;”>text here</span>

HOW TO CREATE A CUSTOMIZED BUTTON

This one is super great if you want a customized button. It will adapt to your theme’s button style.

<a class=”button” href=”http://example.com”&gt;text here</a>

An example of this button:

Click This Button!

BOX TEXT

You can change the color using a hex #, adjust the thickness of the edges, and adjust the space between the edges and the text.

<p style=”padding:6px; color: grey; background-color: white; border: black 2px solid”>TEXT HERE</p>

Here’s an example of boxed text.

This is boxed text.

__________

That concludes the portion of HTML lines of code. I wanted to add this amazing design trick that I learned a little while ago.

HOW TO: GOLD FONT

This makes fonts look so… golden! And it only takes a few minutes to create 😉

First, download a gold foil image, preferably from a free stock photo website so you don’t have to give credit.

Next, go into a photo editor such as PicMonkey (this will not work in Canva), and type up your desired words. It’s preferable that you type in a thicker font, but it’s not necessary.

Then, upload your gold foil image as an overlay.

Go to the overlay options under blend mode and select the “lighten” mode.

Resize the overlay to fit over the text, so that it is fully covered in gold. Re-position the overlay if needed. Tada! You can also use this for different textures and colors.

____________________

Wow, that was a lot! I hope these HTML and design hacks help you. I know some of these are pretty basic and easy to figure out, but if you haven’t seen one of these lines of code before, let me know.

Like these kinds of posts?

Going to use one of these lines of code?

Have a fabulous rest of your week, friends!

“It is of the Lord‘s mercies that we are not consumed, because his compassions fail not.” Lamentations 3:22-23