Apr

2

Add an image to a text widget

Posted by Leave a Comment

Having images in your sidebars (text widgets) to accompany text is a great idea. It helps to break up the text and give your website a nicer design. You can also add images to your sidebars without text. As you can see, I have images and ads in my sidebar, all created using HTML in text widgets.

Step 1

Upload the image(s) you want to add to your text widget by clicking “Media > Add New” in your WordPress Dashboard. Once your image is uploaded, you’ll see a File URL below it. Copy this URL.


 

Step 2

Add a text widget to your sidebar. To do this, navigate to Appearance > Widgets in your WordPress Dashboard. Under “Available Widgets” simply drag a Text widget to the right and place it under your desired sidebar.

 

Step 3

Open the text widget and name it. Then add text to the widget (optional). For this example, I’m using the widget currently on my site called “Welcome to erinclark.biz!”

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 4

Now we’ll need to use a little HTML. Note: If you’re not good with HTML, skip Steps 4 and 5 and go directly to Hint.

I’m placing my photo on the left-hand side of my text at the very top of the widget. I want my photo width to be 72 pixels and the height to be 108 pixels. You can use this same HTML, just replace my File URL with your own (the one you copied earlier after uploading your image).

 

 

 

 

Step 5

Then, where it lists the width and height, adjust the size to suit your needs. Now is a good time to save your widget and preview your site. You may need to adjust the size settings a few times before they are just right.

 

Hint

If you’re having a hard time with HTML, I suggest you open a new page, place your image on the page (and link it if desired). Then view the page in HTML, copy the image code and delete the page you created. Navigate to your text widget and paste the code where you want the image to appear. Then all you have to do is adjust the size of the image without having to write any code.

 

If you’ve found this website helpful, please donate to show your support! It’s greatly appreciated.

 

Tags: , , , , , , , , ,

Category: Tutorials

About the Author ()

Erin Clark is a full-time news editor and part-time web and software developer who also works extensively in graphic arts. She helps individuals and businesses create, market and maintain profitable websites. She's also the author of the e-book Building Successful Websites. Learn more about Erin here, or connect with her on Twitter, Facebook and Google+.

Leave a Reply