HTML to Know for Editing Content in WordPress
Written by TJ Marsh Wednesday, 26 December 2012
WordPress is one of the most popular blogging platforms used today. It is beginning to be used widely for regular websites as well, so it is more than just a blogging platform. You can easily use it to create almost any type of website you desire. Installing and setting up WordPress is fairly simple and many hosting providers will even do it for you. Often times, the toughest part of running a WordPress blog or website is creating high quality content. Sure, anyone can cut and paste text and articles into a WYSIWYG editor and have a somewhat decent WordPress website, but it’s not going be enough to compete in today’s online market. You need original and eye-catching content to really make a WordPress site popular. In order to create the type of content you need to build a successful WordPress website, there are a few simple HTML techniques that you should familiarize yourself with. In this tutorial we will cover some of the basic HTML knowledge you should possess as a WordPress entrepreneur.
Why Use HTML in WordPress
There are several reasons for using HTML in WordPress. The first and foremost reason is to make more attractive content. Imagine a case where you need to make something look exactly like you want it to. Sometimes you have to use HTML in conjunction with CSS style to make something look just like you want it to. There are some special tags such as the code and pre tags that can be used within the WYSIWYG editor’s regular view, but other tags need to be inserted in the HTML view tab of the editor. So first let’s go over how to use the most common tags that can be used in the regular view of the WYSIWYG editor.
Using the code Tag
The code tag is one of a few that can be used in regular posts. What I mean is that you don’t have to switch to HTML view in the WYSIWYG editor to use the code tag. The code tag looks like this:
<code> monospaced text will go here</code>
The main purpose of using the code tag in WordPress posts or pages is to convert text to monospaced type. The advantage of this is normally to display code snippets in your site. Say you have a web development site and you would like to show your visitors a code snippet. Use code tags to make the code look like it would if it were typed in at a command prompt. It looks more professional that way.
Showing Code Snippets using the code Tag
Another technique you will need to know in order to show code in your WordPress posts or pages is to make WordPress recognize the opening and closing tags or the less than and greater than signs to most. If you just use the greater than and less than symbols in a post it will break the flow of the page because WordPress will recognize them as the start or end of an HTML tag. Therefore you need to use the character entities for the less than and greater than signs rather than the actual symbols themselves. Here are the correct entity codes to use for each:
Less than symbol: <
Greater than symbol: >
I personally remember these easily because “lt” stands for less than and “gt” stands for greater than, so all you have to remember is to put the “&” symbol in front of them and a semi-colon at the end and you have your two most important entity codes memorized.
Using the Pre tag in WordPress
Another very widely used HTML tag in WordPress the pre tag which looks like this:
<pre>text that you want to keep the format of Including line breaks
Notice I put a line break in the middle of the sentence to demonstrate the pre tags ability to recognize the carriage return as a line break. The pre tag is often used in conjunction with the code tag described above to display HTML snippets in WordPress because it causes the text to keep the line breaks in place if you copy and paste code into a post or page in the WYSIWYG editor of your WordPress admin area.
Using HTML tags in the WYSIWYG Editor:
In the image below the tabs say “Visual” and “HTML”. These are the tabs that switch you back and forth from visual to HTML editing. Visual is what it actually looks like and HTML is the code behind what makes it look like what it does. So you can add little attributes to your HTML tags easily by clicking on the HTML tag and editing the HTML code directly.
You can easily switch between the two tabs of the editor to edit HTML as you wish. There are some things that WordPress does not agree with, so only use the simplest you can get by with to achieve your goal and always test the page to see if it displays properly before committing to the change. You can always undo the last thing you have changed, but if you make several changes before checking the page, you will have to undo many changes to find the one that messed up your page.
A nice feature of the HTML editor is that it lists the tags that are meant to be used in the tool bar when you use the HTML tab of the editor. Therefore, to be safe, you should stick to the tags listed. You can add tags using the toolbar as opposed to doing it manually too. Simply highlight the code you would like to add an HTML attribute to and while it is highlighted, click on the tag in the toolbar you would like to add.
Adding more advance code in WordPress
While reading this tutorial and looking at the tags you can use in the WYSIWYG editor’s HTML tab, you have probably figured out that the HTML capabilities are somewhat limited. There are some plugins that you can install if you need more HTML capabilities.
More advanced usage of HTML
There is a more advanced way to edit HTML you should at least know about if you are a WordPress user. It is the way that coders and gurus do it. To really get the full featured HTML that some sites require, you have to actually edit the theme’s files that you are using.
In this tutorial you should have learned to use simple HTML snippets in your WordPress blog as well as how to display snippets of code. There is a lot to know and only a few pages to cover it, so be sure to read more tutorials to get a full grasp of using HTML in WordPress.
Good luck with your next WordPress endeavor and keep reading and learning. You won’t go far without knowledge!