RSS

How To Create A Widget For Your WordPress Blog

December 5, 2013

By Carol Amato

Have you ever wondered how I get those really cool pictures and affiliate products on the side of my blog? 

Today I’ll show you how I do it in this step-by-step video.


 



Code for Widget: Remember – Change what is in red, and if you don’t want a line break at the bottom, remove the “<br></br>”

<center><a href=”http://www.carolamato.com/leadpages” target=_blank><img src=”http://www.carolamato.com/images/LeadPagesEasiestWay-300×250.jpg” border=0  alt=”lead pages“></a></center>
<br></br>

As always, if you have any questions – let me know in the comment section below. Enjoy!

Take Care,
Carol

See Transcript below:

Hi, this is Carol Amato from CarolAmato.com, and today I would like to demonstrate how to put a widget on the sidebar of your WordPress blog. As you can see my blog CarolAmato.com has two columns, my main is on the left and my side bar is on the right.

And I have different graphics – this is the testimonial from Eric Holmlund recommending me. This is a book from Connie Ragen Green, Huge Profits With a Tiny List; this is on Amazon, and I have a graphic here linking to it on Amazon, this is my affiliate link.

Here I have a LeadPages banner, and I’ve got this linked with my affiliate link. And this is another widget linking to popular post on my blog.

So it may be technical, but I’m going to take you step-by-step, very simply how to get this done, and you can slow down this video. There are controls that you can use to pause it anytime – to take action… so let’s dive right in.

Say you are a customer and have a certain product that you find great value in. For example I’m a customer of LeadPages, I use LeadPages, and I’m an affiliate. They are a company that provides graphics to their affiliates to promote for them so they make it so easy.

Here I’m logged into the affiliate portal for my LeadPages account. They provide several dimensions of graphics, many different types of pictures, and you can simply pick one. Here’s the 300 x 250, this is width by height.

You can get the code by clicking here and this code will pop up. If you hover over this little button, it says copy to clipboard. I’m going to do that so I’ve copied this code to my virtual clipboard.

Let’s bring up Notepad and paste it right here. So I can, in effect, very easily use the tools that my companies provide me. Many companies provide tools: graphics and code to make it very easy for you to put a banner on your website. I’m going to copy this code and go to the dashboard in WordPress.

Make sure you’re logged into your dashboard. Go to appearance, widgets and then you’ll want to look for something that says ‘text, arbitrary text or HTML.’

Click on it and hold your mouse down to drag it to your sidebar. I’m going to put it at the very bottom and release my mouse, so that the widget has been placed from here onto the sidebar. Now this box opens up by default. I go ahead and paste in the code that I just copied. I save it by clicking the SAVE button.  

I put it right at the bottom – it’s below the Popular Posts widget. Now let’s go to my website, I’ll refresh the page on my browser to get the most recent content, you’ll see that I have now placed a LeadPages banner below the Popular Posts widget.

Now when you hover over the banner, you will see in the bottom left hand corner – my affiliate link. This long raw affiliate link is quite ugly, and I usually make a Pretty Link out of my affiliate links. In other words, I brand my affiliate links so this would say CarolAmato.com/leadpages.

Here you will see on this previous banner that’s exactly what I’ve done. So I’m going to delete this particular widget, but I did want to show you how to create a widget using tools that other company provide. Many companies do, but some don’t…

Now in order for a picture to show up on the Iinternet, it must be uploaded to your server or you could upload the image to the WordPress media library.

In this case I created this banner myself so I have a version of it on my desktop here. I am going to show you how to add an image to the media library. I want to add new, so I click on the add new link.

You can drop files right on that ‘drop files here.’ So I am going to drag it to this area, drop, and it’s starting to upload: erics-testimonial.png. Now I have the new image in the library.

I’m going to go ahead and click edit and add an ALT Tag. I always add alt text, then click update so that the picture is updated.

And if you will notice, underneath the ‘File URL’ is the complete URL of this uploaded picture. So if we use Control A on the PC, or Command A on the Mac to select all; command or control c to copy. Let’s open up notepad and just paste it here for safekeeping.

That is the complete URL of the image. Now if you notice it’s on CarolAmato.com/wp-content/uploads/… the month, the year and the name of the picture. So this URL does not have to be confusing. You will understand each section and why it is in the URL.

So let’s take this URL, just plug it into another tab on out browser to just view the image alone. There you have it, this looks great now. I don’t know why it’s a transparent image. But anyway let’s go back to the media library.

We’ve taken the URL we’ve saved it into Notepad, that is the very first step.

The next step I’d like to show you is this little bit of code. If you have something you want to put on your sidebar, and it’s not an affiliate product from a company that provides the code or the pictures, or perhaps you know you want to put a picture of something that maybe leads to another page in your blog or just another website, you can do much with this little bit of code. Let go through it step-by-step.

These tags may be very overwhelming to you, it’s confusing… but if we take it step-by-step and break it down, you will see the different elements.

You don’t have to understand it; you don’t have to be able to write code, but I just want to show you how you can use these few lines of text to be very powerful and create any type of sidebar widget that you like.

So I want to share this with you the first part, which is simply saying that you want the content centered. The open center tag and the close center tag. This stops where you will see the close tag with the slash line before it – meaning the end of the centering is right here. After here, the things won’t be centered anymore.

This is simply a line break and then end break.

This very first URL in between these quotes – this is what you are going to replace. This is where someone will go when they click on the image.

So they click on my banner over here – they are going to the Mastermind Circle on Carol Amato. That’s the page that I would put here.

I’m going to take this no follow tag out; it’s not necessary for our demonstration.

Now the target equal underscore blank, ( target=”_blank” ) – this is a code the simply indicates whenever they click on this URL, they are going to be opened in a new tab or you browser.

They are going to be taken to that page in a new browser or window so that your website or blog is not covered up, and they know how to get back to your blog. It’s a lot easier for folks who don’t know how to navigate as well.

So this is where you want folks to go when clicking, and this next URL is the image. You will see ‘img’ for image. This is the source of the URL for the image/picture.
Now we’ve already uploaded this particular image to the media library so let’s copy this first.

What I’m going to do is very carefully, just between the quotes, delete this entire URL and paste my picture URL now for where I want to folks to go.

I’m going to change the LeadPages to a Pretty Link – to ‘mastermind-circle.’ And let’s change the ALT tag to mastermind circle and that is it. Now we can copy the code in it’s entirety to our clipboard.

Let’s go to the dashboard, make sure you are logged into the WordPress dashboard and click appearance, widgets. Grab the particular widget, hold down with your mouse and don’t let go.

Just drag it and push it up until you see the double dotted line, where you’re going to finish and drop your widget, so keep holding your mouse until you see where it goes and you are happy with where you are placing it.

I’m going to release my mouse and this box opens up. So the widget places itself under the Popular Posts text. Got that content, place it to my clipboard so let’s paste it in, then save it.

Now we want to go back and refresh the browser to reflect the most current content.

And here is the banner; that’s fantastic. Now I’m noticing the picture is stretched wide. That was a mistake I made and I’m glad this happened because this previous code had width and height in there.

And I want to take that out simply by…let me show again what I did. I just highlighted the width equals 200 and height equals 250 and took that out.

Now I’m going to make sure the sample is going to be without that. So no worries, you’re going to get this code here without the dimensions of the picture to distort anything for you. I will make sure that it’s fixed.

I want to save that, come over here to my blog and refresh. That picture should be correct at this point. There we go, perfect! Because it will default to the original width and height if you don’t have any parameters in there. So that was my mistake for keeping those in.

Now you can download this code and you have a lot of power. All you have to do is replace this URL with where you want folks to go, and you know how to upload a picture to your media library.

Just replace this URL with the image you want to show and of course, an appropriate ALT tag name.

There you have it, and I hope that helps.

  • Adrian Gonzales

    Awesome video showing how to create widget in WordPress. This will be great help to others. Thanks Carol

    • http://carolamato.com Carol Amato

      Thanks, Adrian – your kind words are much appreciated!

      Have a good evening.

      - Carol

  • http://chickoryonline.com Patricia Haag

    Hi Carol – Great post. I could have used it a couple of weeks ago when I was trying to do something like that. I figured it out, but only after a lot of frustration.

    • http://carolamato.com Carol Amato

      I’m sorry the timing wasn’t good for you… This video was created as a result of someone emailing a question about how to do it…
      - Carol

      P.S. There are probably lots more tutorials on YouTube similar to mine – did you search there when you needed help?

  • http://geririchmond.com/do-you-know-about-these-free-tools Geri Richmond

    Hey Carol,

    Thank you for tutorial. You did some extra steps with the code that will come in handy down the road a piece.
    I Appreciate your dedication in helping us.

    Thank you,
    Geri

    • http://carolamato.com Carol Amato

      Hi Geri,

      So glad – I know you’re good at code, but am pleased you learned a little something. :)

      Have a great weekend.
      - Carol

  • asgonzales

    Struggling creating widget on your wordpress blog. This will help you creating it. Appreciate it Carol. =)

    • http://www.carolamato.com/ Carol Amato

      yep, step-by-step is always the best – you’re welcome!

Copyright © 2014 · www.CarolAmato.com · All rights reserved · Legal · Google+ · Power Your Site · Leave a Voice Message . Sitemap

x

Over 40 & Need Help Getting Started?

"Techie Carol" Will Send You: