Get this week's FREE printable now!
I know it’s scary. You started using a CMS (Content Management System) like WordPress because you were told you could easily change and add content without needing any code, and here I am telling you there’s code to learn. Well, look…you can type something into a program like Microsoft Word without knowing any formatting and it works, right? But then you start to want to make things fancier, adding colors, making headlines, etc. Those are extras. You don’t have to know how to do them, but they make things prettier.
Same with blogging.
Now, I usually recommend writing all posts/pages in Text mode instead of in Visual mode. The reason for this is somewhat the same as why I do not recommend Visual Builders for website themes – code bloat, and general messiness. That said, the visual mode that comes native to WP is fine. The following codes though are intended to help you fine-tune your posts. They’re super easy and you’ll probably memorize most of them in no time at all!
WordPress makes it really easy to add images. Just click the “Add Media” button at the top and choose an image. However, sometimes you may want to link to an image that lives somewhere other than your website. This is a very basic bit of code that’ll always serve you well:
<img src="http://www.url-of-your-image">
Notice that “img” stands for “image”, and “src” stands for “source”, which is where the image lives/is saved – this way you can start to understand what the codes actually mean.
Say you want to link a specific word or image to another page. Here’s the code you would use for that:
<a href="http://linkhere">stuff that should be linked...</a>
In this code “a” stands for “anchor”, and “href” stands for “hyperlink reference”. This is the code you use to link pretty much anything. And by “link”, I mean “send someone to another location/website. So in this case, “href” serves a different purpose than “src” from the image code above.
Notice how the code has an opening and closing element? Everything in between those opening and closing elements is what will be linked.
Super simple codes to add emphasis to your text.
<strong>text to be bolded</strong>
<em>text to be italicized</em>
Note that all of these have opening and closing tags. If you don’t close the tag, it’ll remain in effect until it finds a closing tag on the page, which could mess up the look of everything from that point on down. So always check to make sure you’ve closed your tags.
This code is generally used to indicate something that is misspelled. It is no longer considered standard html markup. But if you really really MUST underline something (that’s not already surrounded by a link code), here’s how to do that:
<u>text to be underlined</u>
I think most of those are pretty self-explanatory, but “em” stands for “emphasized text”.
New Line and Paragraph are actually a bit different from each other. A new line will simply put the next text on a line immediately beneath the text prior. Usually there will be no style formatting. A paragraph will almost always have spacing before and after it. It is not recommended to insert 2 breaks in order to create a new paragraph. WordPress automatically inserts paragraph markup so it’s not usually necessary to code it. But if you do have need of either for any reason:
<br />And then the text for that next line
<p>paragraph text here</p>
Are you starting to see some sense to the naming conventions of these tags? “br” stands for “break”, and “p” stands for “paragraph”.
This is an addition to your paragraph code. You have several choices: left | right | center | justify
<p align="center">This text will be centered. Change "center" to "left", "right", or "justify" to modify the alignment</p>
Knowing just these basic bits of html will get you a long ways towards having an attractive blog page. And don’t forget to comment below to let me know if you have any others you think are essential, or if you have questions or difficulties. I’m always happy to help.
4 MISTAKES You’re Making on Your Website that are Costing You MONEY!
