Ever wonder how to include HTML or other code in WordPress posts? For example, if you want to make a word bold, you type <strong>bold</strong>. So the question is, how then did I write <strong>bold</strong> without the word becoming bold? The other question I’m often asked is, “How the heck did you do that indentation?!”, or “How do you show blocks of code in a post?!”
How to Format Text in WordPress?
The magic behind formatting a post is actually very simple. Writing a post in WordPress is a simplified way of inserting a few paragraphs of HTML text into a web page. When you make a word bold or add a link, the text is surrounded by tags which will tell the browser how to format it’s appearance on the screen. HTML tags always begin with “<“, so as soon the browser encounters this symbol, it will check to see if it is a valid HTML tag, and if so, take the appropriate actions. If you actually just want to display the “<” symbol on screen and have the browser ignore the possibility that it could be HTML code, then you need to instead write the ASCII entity name.
Don’t grumble at the thought of ASCII entity names, I promise it really is very easy! All you need to know is that some characters have an ASCII entity name which you can type to display the character. For example, the ASCII character name for < is:
Try it out! Open up wordpress and type the above ASCII character. When you preview the page, you will see that the character < is displayed instead. The new mystery then is, how did I write the ASCII character above without it being turned into “<“? hmmm…!
How to Indent Text in WordPress?
The next question was related to indentation in posts. The first thing I did was put my code within a blockquote. If you are using WordPress, you can simply highlight text, then click the “b-quote” button to do this. This indents a whole paragraph of text, commonly used for quoting references by bloggers. Next, I surrounded my blockquote with a tag called <pre></pre>. This tag is used to define preformatted text which means that the text enclosed between the tags will be displayed as it is typed. In a nutshell, if you are typing a post in WordPress and hit the spacebar 20 times between each word, when you hit preview, it will still only show a single space between each word. However, if you use <pre>text to be preformatted here</pre> in your post, then all text between the tags will display your text as it was written, meaning multiple spaces can be displayed.
Try it out. Copy/Paste the below into WordPress and preview it to see the effect:
<pre>
This is the first line, with no indent.
This line has 5 spaces in front of it!
This line has 10 spaces in front of it!
</pre>
Enjoy!
