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”>text here</a>
An example of 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!
Super helpful! Thanks for such an awesome post, Rebekah!
-Christina
LikeLiked by 1 person
You’re very welcome, Christina! Thank you for reading! ❤
LikeLiked by 1 person
This is a great post! Thanks for the tips! 😄
LikeLiked by 1 person
Thank you, Julia! Of course 😀
LikeLiked by 1 person
This was awesome!! Great post!
LikeLiked by 1 person
Thank you so much!
LikeLiked by 1 person
Wow, this is super helpful, Rebecca! I will definitely pin this page for future reference. 🙂
LikeLiked by 1 person
Thanks, Allison! That’s a great idea 😉
LikeLiked by 1 person
Thaankks!! I’ve learned basic HTML + CSS so using it is fun
LikeLiked by 1 person
No problem! Yes!
LikeLike
Thank you so much! 🙂 I’m not very good with coding/computer stuff, so this will help me out so much. It was so nice of you to make this!
LikeLiked by 1 person
No problem! ☺️
LikeLiked by 1 person
Woah, these tips were awesome! And I didn’t even knew you could Box Letters. Thanks, Rebecca! (I might forget them but it’s ok)
LikeLike
Thanks! Neither did I. 😀
LikeLiked by 1 person
Haha in school I’m learning HTML coding, too. Great post!
LikeLiked by 1 person
Oh, cool! Thank you 🙂
LikeLike
AAAHHH, THANKS SO MUCH FOR THESE! ❤
LikeLiked by 1 person
You’re so welcome! ❤
LikeLiked by 1 person
Wow, this is so helpful! I especially loved the button and the box around the text. And I wish I had known about the link one! My self-hosted widget allows links but that would have been SO helpful! 🙂
LikeLiked by 1 person
Thank you! I love it too XD
LikeLiked by 1 person
Awesome hack, didn’t know about html edit for sidebar and footer.
You can also use self closing tag <br/>
LikeLiked by 1 person
Thanks! Yeah, you can. 😉
LikeLiked by 1 person
Hehe, I love using HTML. Had no idea about the buttons and boxed text tho! My theme must be just super mean ’cause it’s not letting me do the button. Hmph. XD Thanks for all these awesome hacks!
LikeLiked by 1 person
Yeah! Hm… it may have been messed up in my post… sorry about that!
LikeLiked by 1 person