How to Add a Give Button to Your WordPress Sidebar


blue rectangle giveIt’ll take you less than 30 minutes to add a “give” button to your WordPress blog.

Here’s how to add a give button:

  1. Go to this  button image  and download it to your computer (or find some different color buttons using a Google search… make sure they aren’t copyrighted).
  2. Upload the button image to your Media Library in WordPress.
  3. Edit the button image in the library and you’ll see in a grayed area on the right the “File URL.” You’ll need this for your text box widget code. Leave this open in a tab so you can grab it when you do steps 6 and 7.
  4. Go to your Dashboard / Appearance / Widgets.
  5. Drag a text box to the sidebar location where you’ll want your “give” button.  I recommend the “top of the fold,” that is, put your button where it will be seen when your website opens, not lower down where your reader will need to scroll to find it.
  6. Notice the code in my text box at the bottom of the post. You’ll want to replace 0124650 with your staff account number. Also replace the URL for your button image (see step 3).
  7. You can paste this dummy code and tweak it to look exactly like the code in the box below (remember to put in the giving and image URLs where I used blue): <a href=”your cru.give.org URL” target=”_blank”><center><img src=”URL for your uploaded give-button.png” align=”middle” width=”100px”></center></a>
  8. Hit “save”.
  9. Test the button to see if it works.
  10. If your new give button doesn’t work, it could be because of pasting the quote marks. HTML computer code is particular about the types of quote marks.  Just highlight the quotation marks and type over them within the text box.  Repeat steps 8 and 9.
  11. It’s optional to have a title for the text box. Try the text box with and also without a title to see which you like better. Repeat steps 8 and 9.
  12. You can also experiment with different widths for the button to see what you like better.  Try 60px, 100px, and 300px. Repeat steps 8 and 9.
  13. Great job! You did it! Add a link to your website in the comments below so I can see your site and “give” button.

Widget Give button code

UPDATE (02/05/2014): I’ve saved the original round button image for this article if you’d like to use it. However, after I posted this week on the importance of the size, shape, and placement of your give button for a mobile device, I switched the give button to a rectangular one. I highly recommend you read this article because half of your readers are using a phone to read your blog posts and emails. 

2 thoughts on “How to Add a Give Button to Your WordPress Sidebar

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s