Useful HTML codes for your WordPress website

WordPress is maybe the most popular website builder. With WordPress you can insert unlimited features to your website without the knowledge of HTML code. This is the power of WordPress! Since you probably don’t have the time to learn html code but you need many features to your website, then WordPress is the best solution for you.

Although, you can do many things with WordPress, there are some basic html codes that you may find very helpful if you want to customize your WordPress website. For example, when you create a wordpress post or a wordpress page, you may not use html code but this doesn’t happen in your WordPress sidebar. When you are about to customize your sidebar, then html knowledge is essential!

Sidebar is the left or the right comlun of your website. Depending on the theme you chose for your website, you may use the same html codes to customize your footer through the widget area

Wordpress sidebar width

In part 6 – WordPress Widget area I emphasize the use of the “Text” widget, as it is the most important widget you can use. Inside a text widget you can put the content you want, but you need to know some tips to create your own nice unique, custom text widgets.

The most powerful tip to add almost everything you want in a text widget

Case study

Let’s say that you want to add to your sidebar a text widget like this:

html codes for WordPress sidebarYou want the text “Click here to download a free ebook” to be clickable and when your visitor clicks to the text, to be able to download your free ebook. So, you need to create an html code and paste it to a “text” widget in your sidebar. ( More for wordpress widgets here )

How to create easily the html code you need for your widget?

Case study 1: Inserting a custom text to your sidebar

Step 1

Create a new post (without the purpose of publishing it) Inside the new post you will create the code.

Step 2

Type the content you want to be displayed in the sidebar doing all the custom changes you want. ( make the letters red, create a hyperlink linking to the link of the pdf ebook etc) To get the link of the pdf ebook, just go to your “Media” Library and add your pdf. Then copy the link that you see in the file url ( More info about media library here) Then select the text, click the “hyperlink button” and paste the url.

Don’t forget also to align the phrase. (For a more attractive appearance, it is recommended to align most elemts to the center, but it is up to you) So, you will create a post looking like this:

Click here to download
a free ebook.

Step 3

Click to the html tab and copy the code that exist there.

html tabIn this example, you will see an html code looking like this:

“<p style=”text-align: center;”><a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>Click here to download </span></a>
<a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>a free ebook.</span></a></p>”

 

Step 4

Paste the code into a text widget in the sidebar. Just drag and drop the “text” widget through your widget area to the sidebar you want this element to appear and put the html code there and click “save”. (More about wordpress widget area here!)

You are done! Then in your sidebar, you will see the element you want! Then you can erase the post you created since you don’t need it any more.

Case study 2: Inserting an image to your sidebar

Now, let’s say you want to put a small image above the text you just created.

The first thing you need to know before attempting to add an image to your sidebar is the width of your sidebar. The width is being mesured by pixels. You need to know how many pixels is your sidebar. Why? Simply because you need the same width for your image. For example, if you want to add a picture to your sidebar that is larger than the width of your sidebar you will see sth like this:

mesure your wordpress sidebar widthUgly, isn’t it? So, you need to know the exact width of your sidebar in order to be able to put an image to your sidebar that doesn’t exceed the width of your sidebar. For example if the width of your sidebar is 200 px, you need to put an image that has width no more than 200px. In this case, your image will appear properly inside your sidebar!

How to find the width of your sidebar?

To find the width of your sidebar, just go to your “Editor” through the “Appearance” inside your dashboard. There, you can see to the right column the files of your theme. Click to the file “style.css” (if it isn’t already selected”) and click ctrl+f then put the word “sidebar” and you will find somthing like this:

How many pixels is your sidebar

These elements show you the width of each of your sidebars:

}
.sidebar-right {
padding-left: 0;
width: 280px;
}
.sidebar-left {
margin-left: 5px;
width: 165px;

This html code, shows the width of the right sidebar is 280px and the width of the left sidebar is 165px

You can do all the process below using the same method, by creating a new post, do the changes there and then copy the html code to your text widget. Although, since these html codes are very important, we get into more analysis in order to be able to write yourself these simple html codes.

So, let’s say you want to add the image to your left sidebar, you need to upload an image through your WordPress “Media” – – – > “Add new” button. The image should be less than 165 pixels in order to appear properly.( If the image you want to add is more than 165 pixels, you can easily resize it through Microsoft Office Picture Manager or through Photoshop or through a very nice free software “paint.net

After adding the new image to your media library, then you get the file url. In order to make the image appear in your column, you just need to add this html code to the widget of your sidebar:

<img src=”http://….(the url of the file)” >

In this example, to have the image being displayed above the text, you have to add this html code to the text widget.

<img src=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/html-code1.png” ><p style=”text-align: center;”><a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>Click here to download </span></a>
<a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>a free ebook.</span></a></p>

After adding this html code, your sidebar will look like this:

html code for wordpress image

As you can see, the image is already inside the sidebar, but it is not aligned in the center and this doesn’t look well. You can put an html code before and after the code of the image in order to have the image aligned in the center. You simply put <div align=”center”> before the code of the image and </div> after this code, so the html becomes:

<div align=”center”><img src=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/html-code1.png” ></div><p style=”text-align: center;”><a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>Click here to download </span></a>
<a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>a free ebook.</span></a></p>

Let’s say that you want the image to be clickable, so when a visitors click to the image, to be able to download the ebook. Then you need to add this code first:

<a href=URL of the ebook><img src=URL of the image</a>

So the html code is this:

<div align=”center”><a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><img src=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/html-code1.png” ></a></div><p style=”text-align: center;”><a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>Click here to download </span></a>
<a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>a free ebook.</span></a></p>

Now the html code will show you this sidebar to your website

html final code1If you want to add more line spaces between the image and the text, you can use the “&nbsp;” code between the code of the image and the code of the text:

<div align=”center”><a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><img src=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/html-code1.png” ></a></div>&nbsp;<p style=”text-align: center;”><a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>Click here to download </span></a>
<a href=”http://www.buildwebsiteguide.com/wp-content/uploads/2012/07/htmlminicourse.pdf”><span style=”color: #ff0000;”>a free ebook.</span></a></p>

Case sturdy 3 Inserting Google Adsense code to your sidebar

Since you want to make money from your website by having Google Adsense advertisements inside your website, you just get the appropriate code from Google Adsense and you paste it into a text widget. The complete process to get the html code is described here: Making money with Google Adsense.

While getting the code, take care to get the code of the right dimensions that will fit to your sidebar. The dimensions of your ad are displayed in the ad size field. The first number is the width of the ad and the second number is the height of the ad (in pixels)

Google Adsense html code

After getting your Adsense code, you need to paste it to a “text” widget inside your widget area. Then you simply paste the code to your widget. But sometimes, the width of your sidebar will not fit exactly the width of the Google Ad. For example your sidebar width may be 280px but while getting the html code from Google Adsense, you have to choose between 250px width and 300px width. Of course, you will get the code with 250px width but if you paste it directly to your sidebar, the Google ads will be displayed like this:

google adsense not aligned codeAs you can easily observe, the Ad is not being displayed properly (the Hostgator ad here) It should be aligned to the center of the sidebar. This change can be done ONLY by inserting the div we put in the previous case study. This div should be put manually and not through a post. So you simply put: <div align=”center”> before the Google Adsense html code and this: </div> after the adsense html code. Then the ad will be displayed corrrectly aligned to the center.

adsense html code aligned center

Conclusion

These are the main html codes you may need while customizing your sidebar. Of course, depending on what exactly you want to add to your sidebar, you may need to know more and more html codes.

If you think that we missed an important html code, don’t hesitate to leave a comment below

Leave a Reply