Last Updated on by Michael Brockbank
There are several ways you can add a Buy Me a Coffee button to your WordPress website. The best method for you depends on what you want to see and how it fits your website’s theme. At any rate, it’s not all that difficult.
While I cannot guarantee that you’ll rake in the dough, it does give visitors easy access to support your work. And a lot of us creators can use all the help we can get.
Today, I’ll show you four ways of how to add a Buy Me a Coffee Button.
What is Buy Me a Coffee?
Buy Me a Coffee is a donation and tip platform that allows supporters to send you small amounts of money should they choose. In this case, someone can simply “buy” you a single cup of coffee from $3 all the way up to as much as they want.
The money is then directly deposited into your PayPal or Stripe accounts.
It’s a free system to use, outside of paying a small fee. For instance, a $3 tip will have something like a $0.15 processing fee from the system. This is in addition to other fees such as those from PayPal.
4 Ways to Add a Buy Me a Coffee Button to WordPress
In this tutorial, I’m going to assume you already have an account set up with Buy Me a Coffee. If you haven’t, it takes but a few moments to do so.
So, let’s take a look at the different ways to install a tip or donation button onto your website.
Method 1. Using the Buy Me a Coffee Button Plugin
The first method is the actual plugin for the platform itself. It’s probably one of the easiest and quickest ways to get the button on your site without much hassle.
From the WordPress dashboard, go to “Plugins” and click, “Add New.”
Search for “buy me a coffee” in the keyword field on the right.
Install and activate the plugin.
Once you click the “Activate” button, you’ll be taken to the Buy Me a Coffee settings page.
Setting Up Your Button
Input your username from the donation platform and click, “Save.” In my case, it’s “writersanctuary.”
Two new options will become available. You can turn on the Buy Me a Coffee widget to activate it, or you can customize your button. In this tutorial, we’re creating the latter.
Either of these options just makes it easier to add the platform to WordPress without copying and pasting coding directly from Buy Me a Coffee.
Click the “Customize Button” near the bottom.
From here, choose the options you want for the button on your website. You can change things like the background color, customize the text, or choose from two different fonts.
Click the “Save changes” button when you’re ready.
So, where is the button? It’s actually in the WordPress Widgets area. This will let you drag and drop the button anywhere you can use a widget in WordPress.
Go to “Appearance” on the left and click, “Widgets.”
Drag and drop the Buy Me a Coffee widget in an available area. For example, I can add it to the right sidebar, footer or other sections my theme has installed. Since I use ColorNews by Themegrill, I have a lot of options.
The widget is automatically saved and added to your website.
Method 2. Using Ultimate Shortcodes
If you don’t want to install the Buy Me a Coffee plugin, you can always go with something like Ultimate Shortcodes.
There are a couple of reasons why I like Ultimate Shortcodes over the Buy Me a Coffee button plugin…
- You get more than just buttons. Ultimate Shortcodes comes with a slew of features and tools that can be added virtually anywhere in WordPress.
- It has more customization options available. You can change the color of the button using hexadecimal numbers or the built-in color picker.
- You can add your own BMC icon. While you have many icons available in Ultimate Shortcodes’ buttons, it takes but a few seconds to add your own.
- Shortcodes can be used on almost any page and post in WordPress. You can even add them to various kinds of custom post types.
Let’s set up a button using this plugin. I’m going to assume you’ll already have Ultimate Shortcodes installed. If you need help, just follow the install steps above except you search for “Ultimate Shortcodes” when looking for the plugin.
For this part of the tutorial, we’re going to add a button to a post in WordPress.
Open any post you have published or create a new one.
Click the section of the post where you want to add the button. In this example, I’m just going to add it below the text in the post at the bottom.
Click the “+” icon in the WordPress editor.
Search for the “Shortcode” block. You might also see the block under the “Most Used” section of Gutenberg.
From here, you can just click “Shortcode” from the Widgets area of the WordPress editor.
Once the block is added, click the “Insert Shortcode” option.
Using Ultimate Shortcodes
A large list of options will open in a new window. These are all the things you can do with Ultimate Shortcodes.
Click the “Button” option from the list.
The window will change to a customization screen. From here, you can change colors, fonts, the style of the button, size and much more. For this example, I’m going to keep it quick and easy. However, you can customize this button how you see fit.
Input the URL of your Buy Me a Coffee profile page.
Change the “Target” to “Open in new tab.” This will make sure your website remains open in the browser while the visitor checks out your profile to donate.
Scroll down until you come to the “Icon” segment.
Now, this part is completely optional. You can choose to add an icon to the button if you’d like. Ultimate Shortcodes comes with an array of small images you can use, or you can upload your own graphic to the Buy Me a Coffee button.
An icon is just a small graphic that accentuates the text. You’ve probably seen something similar such as using a small disk image in a download button.
If you do want an icon, you can change its color using hexadecimal coding or the color picker. However, the Icon Color option does not work with the images you upload.
Scroll down to the “Content” portion of the button. This should be the last option available.
Input the text you want on the button. For this tutorial, I’m using, “Support the site and buy me a coffee.”
Once you’re done, click the “Insert shortcode” button.
The shortcode is then added to the post or page. All you have to do now is either update or publish.
Now, you have a button ready for visitors to click. In this example, I used the “Bubble” type of button, which is somewhat animated when someone goes to click it.
Advanced Settings and Options
You will notice a series of advanced commands for adding JavaScript, CSS, and link attributes. These are all optional, and you can adjust them as you see fit.
You can also copy this shortcode and add it to a Text widget for the sidebar, footer or anywhere else your theme allows.
Method 3. Using an Image You Make
And lastly, there’s nothing wrong with creating a button yourself. In fact, this might be ideal depending on the circumstances. For one thing, you can make a button large enough for someone to use their finger to tap on a smartphone.
Not only that, but you have full control over what the button looks like, especially if you have experience with graphic design and have an image editing app.
For this example, I’ve already made a button using Photoshop. It literally took me less than a minute to set it up. You can make it as extravagant or as basic as you wish.
In reality, all you’re doing is creating a Buy Me a Coffee button using a linked image.
In any post or page, add an image. And technically, you can also do this with a Text or HTML widget in the sidebar.
Click the “Upload” button to add the image to your library. Or, you can just click the Media Library if you already have it uploaded.
With the image selected and added to the post, click the link icon.
Paste the URL of your profile page. Again, I’ll use my own profile for Buy Me a Coffee.
Now, this next part is optional. I’m going to click the down arrow to open the link settings. I want the button to open the profile in a new tab. This way, my blog stays open while someone checks out my donation page.
From here, I’m going to click the switch to enable, “Open in New Tab.”
Click the apply button to save your Buy Me a Coffee Button.
NOTE: The link will not work if you do not click the apply button. All that will show is the image.
When you visit your post or page, you’ll have a perfectly working Buy Me a Coffee button you created yourself.
Method 4: Using Buy Me a Coffee’s Button Creator
And lastly, you can always use the Buy Me a Coffee button creator in your BMC profile.
Now, the only reason why I don’t show this method first is because it uses third-party images. This means it needs to download the graphic from BMC to show on your website.
Why is this important? Because any calls to resources outside of your web server is going to affect your blog’s performance.
However, they added a few bits to the creator that do make it more interesting.
From your dashboard in BMC, scroll to the bottom and click, “Generate Button.”
From this screen, you can change colors, choose fonts, change the text or add a new icon to the Buy Me a Coffee button.
I do like how they added the ability to select almost any color you want using the eyedropper tool. And you have access to change the coffee cup icon using a massive list of emojis.
After making the adjustments, you have three options. You can create a:
- Standard Button: This shows just the basic button you created in the previous step.
- Button + supporter count: Not only will it show the button, but you’ll also display the number of people who have supported you thus far.
- Overlay widget: This is the overlay that appears on your site. If you want to see an example of this, I have it enabled on the bottom left corner.
Pick the button style you want. For this tutorial, I’m going to choose the supporter count.
Click the “Generate button” button.
The coding will appear in the button’s preview window. Click the “Copy code” button and place it anywhere on your website.
Just remember that since this is HTML, you’ll need to use a Custom HTML widget or block.
Adding the Button as a Widget.
To add the custom Buy Me a Coffee button to a WordPress widget, just drag and drop the Custom HTML widget into a sidebar and paste the code above.
NOTE: WordPress will throw a warning. The little, orange exclamation point is stating that the image needs an alt tag. You don’t necessarily need one, but it helps search engines understand what the image is about.
To add this tag, insert alt=”your text” just after the last quotation marks before </a>. Change the “your text” to something that defines the image.
For this example, I’m going to add “Tiger BMC Donations.” Because, well, it’s a donation button with a tiger image on it.
alt=”Tiger BMC Donations”
As I said, though, the alt tag isn’t absolutely necessary for the button to work right.
When you’re done, just click the “Save” button on the widget, and your Buy Me a Coffee Button becomes live on your website.
NOTE: You can also use a Text widget instead of Custom HTML. Just make sure you’re viewing it as “Text” and not “Visual.” WordPress will convert the code in the visual editor and break the button.
Buy Me a Coffee Button or Widget?
The above are four easy ways to add a tip or donation button to your website. But what about the Buy Me a Coffee widget?
The widget is an element that sits on the bottom of the screen waiting for someone to click on it. At which point, it expands into the donation screen. It works much differently than the button variant.
The widget is perhaps the easiest way to add the donation form on your website. Just by making a few custom changes in the Buy Me a Coffee plugin settings, it will appear on every post, page, and custom post type in WordPress.
Deciding which is better for you is completely based on your preference.
Personally, I like the idea of being able to add the Buy Me a Coffee button anywhere within the actual content or the right sidebar. Based on heatmapping, I already know that the majority of users do not look near the bottom of the screen, which is where the widget rests.
However, your visitors might be more receptive to the widget. In any case, it’s worth having up to see if it makes a difference in bringing in donations, tips, or even views to your profile.
Placement Ideas for Your Button
As I mentioned earlier, the Buy Me a Coffee button is placeable in nearly any location of a WordPress website. But, you want it to be visible and easy to access. It would make little sense to put it in the footer, for example.
This is called being way below the fold, and not many visitors on average will scroll that far down.
Here are a few ideas to get you started:
- The sidebar of your website.
Keep in mind, though, that many mobile versions of themes shift the sidebar to the bottom under the actual content. So, it’s less likely mobile users will see the button. - Within or at the bottom of your content.
Adding the button within the post or page itself vastly increases the likelihood it will be seen by everyone. That is, as long as you write content people will want to read through. - As a menu bar item.
There’s nothing wrong with adding a menu item to the navigation bar to direct visitors to your Buy Me a Coffee profile. - In the footer as a link.
I know I said that it’s unlikely the footer will be seen by the majority of your visitors. But, it’s probably not a bad idea to add a link to your donation or tip page in the footer anyway, but as an addition to other methods.
Can You Make it a Banner?
Do you have to use a Buy Me a Coffee button to get tips and donations? Nope. With a bit of creativity, you can create a banner to place within your content.
Design it kind of how you would see ad banners from affiliate marketing or Adsense. Add a bit of flair, pizzazz, and color to get the attention of the visitor. A stellar banner can easily catch someone’s eye and pique his or her interest.
Just make sure you’re not misleading anyone and being honest about what someone is about to click.
In fact, when I have time, I’m going to design a Buy Me a Coffee banner for my site as well. Using something like Ad Inserter will let me include the banner within the different affiliate programs and Adsense codes automatically in WordPress.
Make it Look Nice
No matter how you slice it up, having a nice-looking Buy Me a Coffee button can really help drive tips and donations. But, it takes more than just a button on a page to get people to support you as a creator.
You’ll also need to deliver incredible content. Give people a reason to donate and many of them will.
- An Evening with Megan Grant On After Hours - May 14, 2024
- What Are the Pages in a Book and Why Make Them? - May 10, 2024
- An Evening with Christina Wallace on After Hours - April 17, 2024