One of the neat things about a WordPress website or blog is that you don’t need to have any coding skills. Whether you’re running a simple blog or a business website, you can get by just fine without knowing code. The array of built-in features and customization options that come with most plugins and themes enable you to create a site that makes you look like a programming whiz.
However, although working with WordPress to maintain a site or blog with zero coding skills is entirely feasible, you are limited by the features and options built into the theme and plugins you use. So, what happens when you need or want some functionality that your plugins don’t provide? Or something isn’t displaying how you want it to? This is where knowing some basic html is helpful.
Here are seven html tags that I use frequently in the WordPress sites we create and that might come in handy for you.
1. Manually insert images
[pk_box width=”0″] <img src=“imageURLhere”>[/pk_box]
You should use this tag when you need to add images or buttons to your sidebar or post. To find the URL of your image in WordPress all you have to do is go to your Media > Library and click on the image you want to use. The URL of that image is shown on the right side of the screen. You can also format an image by using other tags around the <img src> tag, such as adding a hyperlink to it so that it directs your user to related content (more on that below.)
2. Hyperlinks
A text hyperlink:
[pk_box width=”0″]<a href=”linkURLhere”>This text is linked</a>[/pk_box]
An image hyperlink:
[pk_box width=”0″]<a href=”linkURLhere”><img src=”imageURLhere”></a>[/pk_box]
In WordPress it’s easy to add a link in a blog post with that little chain link icon, but what if you need to manually add one in your sidebar? Anything that is written in between the <a href> and </a> tags will be hyperlinked. The “anything” can be an image or plain text. To make it more fun, you can also style and format the text that is within the <a href> and </a> tags, such as make it bold or italicized like this. (More on that below.)
3. Tables
[pk_box width=”0″]<table>
<tbody>
<tr>
<td><img src=”URL of image”></td>
<td><img src=”URL of image”></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>[/pk_box]
Tables are an important tool to sort and present data in an understandable format and they make for a nice clean look. The “tr” is your row and the “td” is your column. Start your row first, and list all your columns. Then close that row and start on the next one. Unless otherwise specified, the image in each cell dictates the size of the cell, which means if you want a nice even row or column, the images should be the same size. Otherwise, you’ll see random blank spaces where one image doesn’t quite meet up with another. You can also use text within the cells.
4. Line breaks
[pk_box width=”0″]<br />
<br />[/pk_box]
OR
[pk_box width=”0″] [/pk_box]
Unfortunately, sometimes in WordPress just pressing the Return key doesn’t create a line break or return. By using one of the methods above you can force a line break and even add extra spacing between paragraphs.
5. Bulleted lists
Unordered list:
[pk_box width=”0″]<ul>
<li>list item will have a bullet in front of it</li>
<li>list item</li>
</ul>[/pk_box]
Numbered list:
[pk_box width=”0″]<ol>
<li>list item number 1</li>
<li>list item number 2</li>
</ol>[/pk_box]
6. Text syles – Center, Bold, Italic
Centered:
[pk_box width=”0″]<center>Text/image to be centered</center>[/pk_box]
Bold:
[pk_box width=”0″]<strong>Text to be bold</strong>[/pk_box]
Italic:
[pk_box width=”0″]<em>Text to be italicized</em>[/pk_box]
7. Text styling – Color
[pk_box width=”0″]<font color=”blue”>Text</font>[/pk_box]
OR
[pk_box width=”0″]<font color=”#00ff00″>Text</font>[/pk_box]
The main thing with all of these tags is to try them out! Don’t be afraid to play around and experiment and see what works best for your specific purpose.
~ Bethany Howell, art director
P.S. — If you really want to get fancy and style things more extensively in your sidebars or footer, you can use the WordPress editor to write the code for you. Just open a new page in your site. Name it “temporary page” or something that will help you remember to throw it away when you’re done. Put the text you want to style (or images you want to size or align) into the main editor of the page. Style it, bold what you like, color what you like, size and link your images. Then click on the “Text” tab in the top right corner of the editor window where there are two tabs, one for “Visual” and one for “Text.” Click open the “Text” tab and voila! you have code. Then just copy the code and paste it into a footer or sidebar text widget. The styles you set will be visible!
