Although WordPress if very intuitive and user friendly (perfect for a beginner), there are still times when the average user may need to know a little HTML. When you create/edit a post or page you have a toolbar that helps you bold words, create links, add images, center text all with only a few simple clicks. However, when you are working with a widget, you don’t have this same luxury so knowing some basic HTML will enable you to create the look and functionality of the widget you want.
Let’s dive right in with the most basic rule for HTML code:
- Every HTML rule opens with a less-than and greater-than sign with the tag in between. Sample: <div>
- Every HTML rule closes with the same less-than and greater-than sign with the tag in between but it also has a forward slash proceeding the tag. Sample: </div>
The end tag tells the page when to stop applying the formatting. Without the end tag, the webpage doesn’t know what part of the text to format. Here is a list of the most common tags used in widgets (for those of you looking to just print off a handy reference sheet). I will go into details further in the article with samples.
Common HTML Tags
<p>This is the tag that opens a paragraph </p>
<br>This is the tag that forces a new line</br>
<a href=>This is the tag to create a link</a>
<img src=>This is the tag to display an image</img>
<div>This is the div tag and defines a section of your text</div>
<h1>This is the tag to make the font one of the default header sizes</h1> (or 2, 3, 4, 5, or 6)
<strong>This is the tag to bold the text</strong>
If you want to create a link in your widget …
If you want to create a word that links to another page, post or website, you can write HTML very easily. For this, we will use the <a tag. Don’t forget the space between the a and href and the quotation marks around the url.
The HTML code for this is: <a href=”http://www.yourlinkhere.com”>Type the text here that will be the link</a>
Sometimes you would like to link to an email. The tag below is a link to an email address so it sends the email from the users email client.
<a href=”mailto:email@example.com”>The text here you want people to see like the email address or simply Send Mail</a>
If you want to put an image in the widget …
Putting an image in a widget is a common practice. Here on my website the picture of the blond cutie is a simple image in a widget.
The HTML for this is: <img src=“http://www.yourwebsite.com/wp-content/uploads/2014/01/julie-roesntal2345.jpg“></img>
A common mistake people make is that instead of the image URL, they put the image file name and then don‘t know why it doesn’t work. To find the image (file) URL, you want to first open the image from your library by clicking EDIT. The link URL is located on the right hand side of the image labelled File URL. Copy this link and paste it into you’re your widget.
If you want to center text or an image in the widget …
To align the text or image in your widget, you would use the tag, <div together with align. You would put between the start and end tags anything that you want to change the alignment for. You can use center, left and right align.
The HTML code for this is: <div align=”center”>The text written here will be centered</div>
If you want to do a combination: center an image and link it to a webpage …
You can also use a combination of the tags we just reviewed. For example, if you want to put a Facebook icon centered in your widget and have it link to your Facebook page you would use the following:
<div align=”center”> <a href=”http://www.yourfacebooklinkhere.com”> <img src=“http://www.yourwebsite.com/wp-content/uploads/2014/01/facebookicon2345.jpg“></img></a></div>
You want to have the <div tag first (to align it), then the <a tag, which tells it where to link to, and finally the <img tag to reference the image. I hope this little summary has given you a little more confidence to get creative with your widgets. I would like to leave you with a handy dandy trick to setting up your widget.
Handy Dandy Shortcut Alert!
Let’s say you have some text you want to put into a text widget, but you want it formatted with a certain color and make it bold. If you are intimidated about writing code, go into your dashboard and click on posts. Click add new. Type out what you’d like (and even add an image if you want).Get it looking just the way you want it to, then click on the text tab when you’re done and grab all the html code from the beginning to the end. Paste that into the widget and it will be coded properly!