How to Add a Button with Grab Code in WordPress

Example of a button with grab code

So you’ve got your well designed blog button and you’re ready to add it to your sidebar.  Rather than making your readers “Save As” and create their own links to your blog, you can give them the code straight from your sidebar or post.

Not only does this make your button infinitely easier for a reader to add to their blog, it also gives you control over SEO information like the Alt text and image title – both of which are used by Google to send more readers your way.

The Code

The HTML code for this isn’t too complex.  First, you’ll be entering the code to display the image itself.  Note that when you’re creating a link for use on other websites, it’s good practice to go ahead and enter the Alternate text (the text that pops up when you hover over an image) and the image title – it’s good practice for your Search Engine Optimization (SEO). That’s the extra information you see in the code below.

The second half of the equation is creating the box with the grabbable link text inside:

To add both elements at the same time, I wrap them in a <div> tag to group them together, and I usually want them to appear centered in my sidebar or in my post, so I’ll align them inside the <div> tag.  The whole thing, together, looks like this:

Using WordPress to add a Button with Grab Code

In WordPress, you’ll start by uploading your image into your Media Library, taking note of the Image Location.  You may want to copy and paste this URL into Notepad.

Then, depending on the location where you want your button to appear, you’ll use either a Text Widget or open up the HTML editor for your post.  I’ll show you how to do both of these.

Adding your button with grabbable code in the sidebar:

To add this button into your sidebar, you’ll go to Appearance > Widgets and add a text widget to whichever widget area you want it in.  Then paste the code (above) into your text widget, replacing the variables I indicated (in CAPS) with what corresponds to your image and link.  Hit “Save” at the bottom of the widget and go preview your pretty new button!

Adding your button with grabbable code inside a post:

Adding these grabbable buttons inside a post is a little trickier, and it’s because WordPress doesn’t display them well in the Visual editor.  Before you add your button, make sure you’ve finished the rest of your post and have it looking exactly like you want it.  Then switch over to the HTML view and find the right spot for it in your post.  Copy and paste the code (above) into the post, replacing the variables (written in CAPS) with your correct information.

Once you have added the button code, DO NOT return to your visual editor. WordPress will mess it up and you’ll have to switch back to the HTML editor and do it over again.

Once you save the draft of this post, go preview it and make sure it looks right before you hit Publish.

Easy, right?

If you have trouble with any of these steps, please give me a shout out in the comments below.  Now, go share your buttons!