How to Create a Blog Button in WordPress
- By: Gregg
- 23 Comments
For whatever reason, WordPress automatically changes every quotation mark to a fancy quotation mark or a “smart” quote. Those don’t work in code. Be sure to change he fancy quotation marks to plain old quotation marks before copying and pasting your code into a widget, page, post, or whatever. You can even do a simple find and replace in NOTEPAD that will accomplish this. Good luck.
Here are seven easy steps to creating your own blog button in WordPress. Hopefully, you will find this helpful.
1. First, you need to create an image file and that means you need a graphics editing program. You can use Photoshop, Fireworks, or Paintshop if you have them. Or, you can try a freeware version of GIMP which you can download from here and which works much like Adobe Photoshop if you don’t have your own graphics editing program.
2. You need to limit the color pallet as much as possible. This will make your button load faster via the web. Try to stick with “web safe” colors in your graphics editing program.
3. You need to limit the size of your button. Most buttons are 125 pixels x 125 pixels square. Some are 150 x 150 square. The 125 x 125 is the best size because that fits most blog sidebars and works instantly with most “ad” tools if someone wants to put your button on a scrolling banner or whatever.
4. Save your image to your hard drive.
5. Now, upload your image from your hard drive to your website. I would not recommend uploading it to Picasa, Flicker, or Photobucket because doing so will consume bandwidth. You can post it to your own blog website by posting it in a post, or on a page on your blog; or by uploading a new media file. If you are savvy, you can use FTP to put it in any of your content folders you choose. A good freeware FTP application is Filezilla which you can download from here and you will need to get an FTP account and the ftp information from your ISP.
The important thing is that you will need the URL of where the file is uploaded.
6. Time to create the code. You need to know 5 things.
A) Your Website URL
B) Text Message in case the Image doesn’t load
C) Mouseover Message
D) URL to your button image file
E) How many rows tall you want your code box to be
NOTE: This assumes that your button is 125 x 125 pixels. If it isn’t then change the 125 to whatever the actual pixels are to avoid distorting your button.
7. Replace items “A” through “E” above into the code. Make absolutely certain you don’t delete any quotation marks or greater than or less than symbols.
Here are our values on this website:
B) Hallee the Homemaker Blog
C) Hallee the Homemaker
And here is the button code for the Hallee the Homemaker blog button:
8. Create a test page or test post for your button code. Select the HTML tab. Copy and paste the code into it. Now look at it in Visual and see how it looks. Change the values around if you like to see if adding more or less rows gives you the look you want and so on. Once you have it perfected, copy and paste the code into a text widget and you are all done.
Hope this helps.
Comments are closed.
Awesome WordPress tutorial Gregg! I didn’t realize that was the platform you guys were running here. I used to use a wordpress platform with my blog and it is amazing the things you can accomplish with it. For readers who are not entirely Photoshop savvy, just an FYI that you can actually select a web-supported color pallette in Photoshop. It gives you a decent range of colors and ensures that your blog button will appear the same to everyone viewing it. :)
Thanks, but it looks way too complicated for me. I might have to hire Gregg to do one for me. I will get back to you about it sometime if I can’t find another way. Thanks, Hallee.
Give me your A through E and I will send you your code as a text file.
What a great tip. Do you know who to create one for Blogger? I am thinking of switching to wordpress. I am just not sure yet. Do you use WordPress? if so, can I ask you a few questions about it? Thanks Carol
I don’t know blogger. I’m sorry.
Yes, I use wordpress. Ask away!
This posting is very helpful. I have the image created. and know all of the “A through E”. Now, where do I enter this code on WordPress to get it to work?
You can copy and paste it into a widget, into a post, or onto a page. Try creating a draft post and pasting it in under HTML view then preview it.
Thank you so much for this tutorial! I searched all afternoon for one that would work & this was the first one that actually did! I am hosting a new weekly link up & needed to make this for the button I made for it! Thank you, thank you, thank you!
Just what I was looking for. Thank you!
I tried this out, and the JPG appears, but the fun HTML that people can copy and paste (in the scrolling box) is not loading. Thoughts?
I’m having no luck…what am I doing wrong ugh!
I’m having the same problem as Kristina, I’m getting two logo buttons instead of the box with code.
Can you email Gregg a text file of your code?
gregg (at) halleethehomemaker (dot) com.
Can you email Gregg a text file of your code? gregg (at) halleethehomemaker (dot) com.
Sure! Thank you!
I’m getting two spaces that should be logos, but they’re just red x’s. I’ve also got the code box, but there’s nothing in it. Suggestions?
Ok, it looks like I got rid of one of the logo spaces, but the actual logo isn’t showing…still just the red x. And nothing showing in the code box.
Hi Gregg and Hallee,
I’ve been looking around for a good explanation for how to create a button using the wordpress format and I think I’ve have found it here. Thanks!
Now, if you could just give a directions for creating an image in photoshop I’ll be all set.
I have been working on this all morning in WordPress, following the directions exactly and it is not working. The directions are pretty simple, but when I go in to WP to do a test page here is what happens:
I enter the HTML just exactly as it is laid out here (5 or 6 times now). Each time I go back to check the Visual, WordPress has added the fancy quotes and completely rearranged the code. All I am getting is either two duplicate images with no html code box or just underlined code with no images.
Making the button is the easy part. Getting it to show up in my blog widget is a whole different story. I am now going to skip the whole test post step and enter it directly into the widget and hope for the best. Let me know if you can think of anything I’ve missed because I’m not a stupid person and I’m following the steps exactly. I know this is going to be one of those situations where I feel really stupid that I didn’t think of whatever it is that I am overlooking.
Nope, entering it into the widget didn’t help, either. I’m just getting a string of code with no image.
Copy and paste it into a Notepad – that should strip the html. WordPress is always messing things up adding those fancy quotes.
The problem is usually that WordPress automatically changes the quotations marks to “fancy” quotation marks. You have to copy your code into a TEXT file like notepad then COPY and PASTE the code from there into the HTML editor. Let me know if that works for you.