How to Add a Button with Grab Code in WordPress

How to Add a Button with Grab Code | The Blog Maven

Example of a button with grab code | theblogmaven.com

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.

Upload your image into WordPress, taking note of the URL

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:

Switch to the HTML Editor to add your code | theblogmaven.comAdding 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.

[box style=”note”]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.[/box]

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!

Leave a Comment:

21 comments
Brenna says

You just saved me! I was co-hosting a blog hop for the first time and couldn’t figure out why the button and text box kept messing up. I spent way to long switching around the code and finally read your post about not switching back to visual mode. Thank you! Thank you!

Reply
    Jeni says

    Glad it worked out for you, Brenna. I hope that’s something WordPress gets figured out in the coming versions…but for now, the HTML editor is the safe place to be. 🙂

    Reply
Jennifer @ Celebrating Everyday Life says

Hi Jeni! Thank you so much for this helpful post! I got it to work but have one little problem. On my website when I click on the button code to highlight it, that little screen goes blank… strange. Any ideas why that might be happening?

Reply
    jeni says

    Hi Jennifer, I just went over to your site and…I’m completely stumped. It’s like the browser is reading that CSS as an input area, rather than a readonly textarea. I checked your HTML and it’s all in there fine. I’m wondering if it’s a CSS issue in your theme? Anyway – very frustrating. I’m sorry to not be of more help. :/

    Reply
Miche says

I want to add this in my sidebar so people can copy and paste it right there and every time I hit save in the widget it changes the HTML and just turns it into two images, any ideas on why?!

Reply
Kiah says

Thank you so much. You save me a lot of time and money. I have been wanting to learn about blog DIY and you have helped a lot. Great directions!

Reply
Miranda @ Tempest Books says

I’m trying to use this to add my button to my own sidebar…but it’s not working. I’m not sure what I’m doing wrong, because I feel like I followed all of your instructions. Does this only work for in a post and not in a sidebar or something?

Reply
    jeni says

    Hi Miranda, I took a look at your blog but didn’t see your button there. If you’ll try putting what you have in your sidebar, I can check out your HTML and see what’s going wrong.

    Reply
      Miranda @ Tempest Books says

      Okay, I put it back how I had it! It’s still not working…After I put your html into the “text/html” widget and filled in all of the information and clicked “save,” it deleted part of your code (the stuff at the end, I think?) from what was originally in the widget, as you’ll probably see. Just wanted to let you know that that wasn’t me who messed up, it’s WordPress that decided to get rid of it haha. Thank you so much for helping me out with this!

      Reply
Tutorial: How to Make Your Own Logo/Button | Strung Out On Books says

[…] The code was found on The Blog Maven, who also shares some great tips and ideas for creating your own […]

Reply
Jen says

Sweet! Thanks for sharing!

Reply
Takiela says

Great information! I was surprised at how easy it was to apply…thank you!

Reply
Liam Dang says

Here is the good way, but some people advised me to use shortcode to add the button to site. Do you know how to use shortcode?

Reply
Haley @ Haley's Vintage says

You are a life saver! I have tried everything to fix this! I since I clone my post for our weekly linkup I will have to add fresh code each time?

Reply
    Jeni says

    Hi Haley,

    You can try cloning it as-is, but here’s the deal: If you switch back to the Visual editor on the post (at any time!) it will mess up your code. Try to stay only in the code editor so you don’t have to redo your work. Hope this helps!

    Reply
Alastair says

Hello,
Thanks for this information. I was wondering if you know how to add the same functionality to a post page alongside social media buttons? My website is http://www.darrow.org.uk.

Many thanks

Reply
Kristine Weiner says

Thank you so much! This was a fabulous tutorial, and the best one I could find.

Reply
Abby says

Thank you so much for a quick, easy-to-follow tutorial! I’m kind of ashamed I put of adding my button for as long as I did. You made it such a breeze!

Reply
Juan says

Just FYI, the “form” tag is not needed since you’re not submitting data to any website… you’re just displaying code. If you were to have a button (e.g. “Submit”), then yes, you would definitely need a “form” tag.

Hope this helps.

Reply
Add Your Reply

close

Stop blogging.
Start running a smarter business.

Get my tips straight to your inbox, and make profitable products + services that SELL.