In this article, I’ll teach you how to add a ‘buy me a coffee’ button to your WordPress website.
Monetizing your website is a popular way to have a side income. Some of the most popular ways to earn from your online business are by integrating ads and selling products, courses, or support.
Not offering any of the options above doesn’t mean you can’t make money or be appreciated by your visitors.
Moreover, in the last few years, there has been a new great way to be granted for the hard work you put in: letting your customers get you a coffee as a reward for your effort and content.
Adding the ‘buy me a coffee’ donation button is a friendly, non-aggressive way to ask your followers to help with your ongoing costs.
This tutorial will integrate the Buy Me a Coffee and Ko-Fi services with our WordPress website. So let’s start first with Buy Me a Coffee.
Add the Buy Me a Coffee Button to WordPress
The first step of the process is creating an account with the Buy Me a Coffee website.
If you already have an account, skip the following few paragraphs.
However, if you need to create one, navigate to the Buy Me a Coffee website, enter your desired account name, and click the Start my page button.
Next, please enter your email and password, click continue with email, and fill in the code they sent to your inbox.
Then, you’ll need to choose between two ways to receive your money. The default way will require your account to have a minimum withdrawal, while the second way requires a stripe account.
Once done, you’ll be redirected to your account dashboard to view your donation link and the total earned.
After setting up the account, we can add the buy me a coffee button to WordPress, with or without a plugin.
Method #1: Generate the Button Online
In this first way, we will generate the button from the Buy Me a Coffee website and add the code manually.
First, navigate to Settings -> Buttons & Graphics, and select your button’s option.
Change the donation button’s colors and font to match your website design, and click on Generate button.
Then, copy the image code button to the clipboard. We will need to use it shortly.
In your WordPress dashboard, navigate to the desired page or post where you want to add the donation link and an HTML block.
Then, paste the image code we copied in the last step, and save the changes.
Once saved, revisit the page and ensure that the Buy Me a Coffee button was added successfully.
You can then use the generate widget option in the same way and add it to the desired location.
If you want to add the button or widget to all pages on your website, you’ll need to manually insert the script code into the footer file of your child theme or use the dedicated plugin.
Method #2: Use the Buy Me a Coffee WordPress Plugin
A plugin is a more straightforward way to add the buy me a coffee button to your website.
First, navigate to Plugins -> Add New, and install the Buy Me a Coffee plugin.
Once activated, add your username inside the plugin’s screen and save the changes.
Now you can customize both the widget and the button inside the dashboard, similar to how we did on the Buy Me a Coffee website.
When ready to add the button to all pages, navigate to the widgets screen and add the dedicated plugin’s block to the desired location.
By default, the price per coffee is $5. However, you can change the price of a coffee to an amount of your choice by navigating to Donations -> Settings and choosing a different price.
As mentioned above, the Buy Me a Coffee service is only one of the two options. Ko-Fi is a great alternative; we will learn how to integrate it with WordPress in the following section.
Add Ko-Fi Button to WordPress Websites
Ko-Fi is another excellent option for accepting donations and support from website visitors.
Moreover, some of the advantages of Ko-Fi over its alternatives are the ability to sell memberships, products (physical or digital), and custom goods (like drawing or painting).
Like any other SAAS, you’ll first need to choose your desired username and signup with your email and password.
Once inside your dashboard, navigate to Settings -> Payment, and connect the gateway you want to get paid with.
Then, scroll down the current screen and customize your donation button. Some of the things you can change are the button’s mode, text, unit price, and the Thank You message.
Similar to the Buy Me a Coffee website, this service will also enable you to integrate a couple of options button types on your website:
- Ko-fi button
- Ko-fi donation widget
To manually generate and implant the codes on your WordPress website, navigate to the Buttons & Widgets tab and select between buttons or widgets.
Please modify the widget or the button appearance to match your website by changing its color and text and clicking Copy.
Add a new Gutenberg HTML block and paste the code to insert the button into your website’s pages or posts.
After saving the changes, revisit the page to ensure the button or widget was added successfully.
The Ko-Fi WordPress Plugin
Ko-fi haș a WordPress plugin we can use to display the donation box or floating button on every page on our website.
Although we can insert the code in the footer file of our child theme to achieve the same results, using the dedicated plugin will simplify the process and ensure it works even if changing the theme.
Inside the WordPress plugins screen, search and install the Ko-fi Button plugin.
Once activated, navigate to Settings -> Ko-fi Settings window, and enter your username ID.
You can also customize the appearance by changing the text and the color of the widget or the button.
To activate the floating donation button, change the Default Display to Show on all pages and save the changes.
Please visit any of your pages to ensure the button appears at the bottom left corner.
Placing the Ko-fi widget in your sidebar is also a wise move. It can improve conversions and encourage fans to donate by being more visible.
To add the Ko-fi box to the sidebar, open the Widgets screen, and add the Ko-fi widget to the desired location.
Save the changes and revisit your website to run tests to verify it’s working as expected.
Conclusion
This article showed you how to add a Buy Me a Coffee button or widget to WordPress in two different ways.
As business owners, we always seek additional opportunities to monetize our website. Donations are an excellent way for our readers to show appreciation to us.
The Buy Me a Coffee and the Ko-fi services are excellent and classy options to achieve that without being too pushy.
Please leave us a comment and tell us which one of the services you chose to achieve this task.
Also, make sure to subscribe to our YouTube channel and like our page on Facebook.
