“Buy Us a Coffee” – How to Set Up a Ko-fi Donation Button in WordPress: A Step-by-Step Guide

A Hands-On Case Study with Ko-fi, PayPal, PHP – and a Touch of Trademark Law

You want to add a donation button to WordPress without subscription models, without ads, without technical hassle? This guide shows you step by step how to integrate Ko-fi into WordPress: from creating your account and connecting a payment method to a fully working button on your website. We’ll also explain why Ko-fi is the better choice over Buy Me a Coffee, what you need to know about trademark law, and how the button automatically works in multiple languages.

To make this guide easier to follow, three characters accompany you throughout: the typical office archetypes — the competent IT colleague, the self-proclaimed expert, and the honest beginner. Tanja is the IT expert. She knows how things work, explains patiently and methodically. Bernd is the enthusiastic amateur. He’s already found three solutions before the problem has even been defined. Ulf is the honest beginner. He asks the questions everyone else is secretly wondering about.

And… Action!

Why Have a Coffee Button at All?

Bernd waves a crumpled piece of paper: “Already sorted it. I just copied my PayPal link into the footer. Done. Costs nothing, been working since 2011.”
Tanja looks at him: “Since 2011. Mobile-optimised?”
Silence.
Tanja: “And if someone donates €3 – how much do you actually keep?”
Bernd glances at the paper: “…PayPal handles that, doesn’t it?”
Tanja: “PayPal charges fees. Buy Me a Coffee takes another five percent on top. And your link from 2011 looks like a phishing page.”
Ulf raises his hand: “What even is a donation button?”
Tanja: “Great question, Ulf. Imagine you run a blog, a website – you produce content that people find useful. You don’t want to run ads. A subscription model feels like too much overhead. But every now and then, someone would happily donate a small amount. A donation button makes that possible – in a single click, without friction, without commitment.”

For foundic.org – a platform focused on AI news, training and hands-on projects – that was exactly the starting point. Stay independent, stay ad-free, and still be financially sustainable long term. The path there first went through a clear-eyed platform comparison. And that comparison had a surprising recommendation.

Ko-fi vs. Buy Me a Coffee: Why Ko-fi Is the Better Choice

Bernd says: “Buy Me a Coffee sounds great. I know them. Done.”
Tanja opens a spreadsheet: “Here. Five percent platform fee on every donation. Plus only Stripe as a payment method.”
Bernd: “Stripe is fine.”
Tanja: “For credit cards, yes. But most of your readers pay with PayPal.”
Ulf blinks: “Is that like when the club only accepts cash but everyone does their banking online?”
Tanja: “Exactly.”

Platform	Fee on one-time donations	Payment methods
Buy Me a Coffee	5%	Stripe only
Ko-fi	0%	Stripe + PayPal
Patreon	5–12%	Stripe
Gumroad	10%	Stripe

Ko-fi charges zero percent on one-time donations. Over months and across many donors, the difference is substantial. Ko-fi also supports PayPal, which is a decisive advantage in German-speaking markets. And donors don’t need to create their own Ko-fi account to donate.

The decision for foundic.org was clear: Ko-fi.

A Minor Trademark Issue – and Its Elegant Solution

Bernd says: “I’d just call the button ‘Buy me a coffee’. Sounds friendly. Everyone knows the phrase.”
Tanja sets down her coffee cup. Very slowly. “That’s a registered trademark.”
Bernd: “Seriously.”
Tanja: “USPTO, registration no. 6503375, since September 2021. Scope of protection: software and websites that help creators monetise their work. Using that phrase as a button label is legally risky.”
Bernd: “But everyone uses it.”
Tanja: “That doesn’t make it legal.”
Ulf raises his hand: “So what do we write instead?”
Tanja: “Something that expresses the same thing without being the trademark. Ko-fi offers a default text – ‘Support me on Ko-fi’ – but that’s equally generic. Better: your own wording. Friendly, clear, trademark-free.”

The task: formulate a button label that works in German and English, that feels personal rather than generic, and that’s legally clean. The solution came naturally from the context: foundic.org is a team project. So the “us” is entirely appropriate.

• German: “Lade uns auf einen Kaffee ein”
• English: “Treat us to a coffee”

The “us” is deliberate. It emphasises the team behind foundic.org and makes the invitation feel more personal. It’s legally clean. And it works naturally in both languages.

Step 1: Create a Ko-fi Account

Bernd has already opened a tab: “Already registered. Username: ‘DerBernd1967’.”
Tanja: “And your Ko-fi link would be…?”
Bernd: “ko-fi.com/DerBernd1967.”
Tanja: “That’s what’ll appear on your professional website.”
Bernd: “…I can still change that.”
Tanja: “Yes. Do that.”

Head to ko-fi.com. The homepage greets you with the promise “Love what you do and make money too” and a prominent “Get started” button.

Registration

The sign-up form is refreshingly lean: Display name (the name visitors to your Ko-fi page will see), email address, and password. Alternatively, you can register via Twitter, Google or Apple – this saves manual data entry. For foundic.org, we used email registration to keep the account independent of any social platform.

Choosing the Right Username

Ko-fi asks for a username immediately after registration. This username becomes your permanent page URL: ko-fi.com/yourusername. This URL will appear on your website and anywhere else you share your donation link – so it needs to match your brand. Important: Ko-fi allows you to change the username later, but the old URL will no longer work. Anyone who bookmarked the old link will land on a dead page.

For foundic.org, the choice was straightforward: the username is foundic – short, clean, and consistent with the brand.

Categories: Visibility on the Explore Page

Ko-fi asks you to select your content categories – this determines where your page appears on Ko-fi’s Explore page. It doesn’t affect your button or the donation process. Since foundic.org covers multiple areas (education, tech writing, design, technology), we selected the five most fitting categories.

The Profile: Name and Bio

The “About you” page is the first impression for anyone who clicks your Ko-fi button. Two fields matter: Display name and Bio. The display name is what appears prominently on your Ko-fi page. The bio is a short text explaining what you do and why a donation makes sense.

For foundic.org: Display name set to “FOUNDIC” (later updated to “FOUNDIC.org”), bio in English:
“FOUNDIC.org – AI news, training and hands-on projects. Making artificial intelligence accessible and practical.”

Step 2: Confirm Your Email

Ko-fi requires email verification before your page goes live. This isn’t bureaucratic friction – it’s a security standard: without confirmation, anyone could register an account using someone else’s email address.

A four-digit code is sent to your registered email address. Enter the code in the form – or click the link in the email directly.

Didn’t receive the email? Check your spam folder. Ko-fi emails sometimes land there because they’re sent from automated systems and spam filters can overreact.

Step 3: Your Page Is Live

“Your page is live! foundic” – Ko-fi is generous with success messages, and rightly so. Your profile page at ko-fi.com/foundic is now genuinely live.

Ko-fi immediately opens the payment method dialog – no detour through settings, no buried submenu. That’s exactly right: without a payment method, no one can donate.

Step 4: Connect a Payment Method

Bernd: “I’ll just use my company credit card.”
Tanja: “Bernd. Ko-fi pays donations into your receiving account. You need to connect your PayPal or Stripe – not your credit card.”
Bernd: “I don’t have PayPal.”
Ulf: “That’s like the club: if you don’t have an account at the right bank, the transfer won’t go through.”
Tanja: “Exactly.”

Ko-fi offers two payment methods: PayPal and Stripe.
PayPal is the most widely used online payment service in German-speaking countries. Accepts payments from around the world, fast payouts, no technical setup required.
Stripe supports credit and debit cards (Visa, Mastercard), Google Pay and Apple Pay. Slightly more technical to set up, but ideal for international audiences.
Recommendation: connect both. More payment options means more potential donors.

For foundic.org: PayPal was connected first. Ko-fi redirects you to PayPal, you grant permission, done. Confirmation comes immediately.

Step 5: Create the Button

Under Settings → Buttons & Widgets you’ll find Ko-fi’s widget builder. Several integration options are available:

For WordPress, the Ko-fi button is the best fit. It generates an embed code – a small piece of JavaScript (JavaScript is a programming language that runs in the visitor’s browser and controls the dynamic rendering of elements on a webpage) that you insert directly into WordPress.

In the widget builder, everything can be customised: the button text (freely editable), the button’s background colour, and a live preview shows the result. Here the generic “Support me on Ko-fi” becomes your own wording – with the colour set to FOUNDIC blue (#2563eb):

Ko-fi displays the ready-made embed code directly. For foundic.org it looks like this:

<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
<script type='text/javascript'>
  kofiwidget2.init('Treat us to a coffee', '#2563eb', 'G2G11X96H2');
  kofiwidget2.draw();
</script>

No need to panic about the code – you don’t need to understand it, just copy it. But for those who want to know: kofiwidget2.init() initialises the button. The three values in the parentheses are: the button text, the colour (as a hex code), and your Ko-fi account ID.

For the German-language version, you only swap the text:

kofiwidget2.init('Lade uns auf einen Kaffee ein', '#2563eb', 'G2G11X96H2');

Step 6: Add the Button to WordPress

Bernd is already navigating through the WordPress backend: “I’ll just go into the file editor and add it to the footer.php.”
Tanja jumps up: “Stop.”
Bernd: “What? I know what I’m doing.”
Tanja: “Do you know what happens if there’s a syntax error in footer.php?”
Bernd: “…It shows an error?”
Tanja: “Your entire website goes blank. White screen. No admin area. Nothing. That’s called a White Screen of Death.”
Bernd: “That sounds bad.”
Tanja: “It is bad. We’re using the Code Snippets plugin instead.”

The Tool: Code Snippets Plugin

The Code Snippets Plugin is a WordPress extension (a plugin is an add-on app for WordPress that adds new functionality without touching the core of the system). It lets you add custom code without directly editing theme files. Three key advantages:

• Safety: A mistake in a snippet only affects that snippet, not the entire website
• Persistence: The code stays in place even if you switch themes later
• Clarity: You can see at a glance which code is active and which isn’t. Analogy for Ulf: Code Snippets is like the coach’s tactics board on the touchline. The tactics are in there, but they don’t overwrite the official rulebook. When the coach changes, he takes the board with him – the rulebook stays.

The Goal: Language-Dependent Button on All Category Pages

For foundic.org, the goal was specific: the Ko-fi button should appear automatically on all archive pages (category pages such as “AI News”, “Topics”, “Projects”) – right-aligned next to the page heading, and language-dependent:

• On German-language pages: “Lade uns auf einen Kaffee ein”
• On English-language pages: “Treat us to a coffee”. foundic.org uses the Polylang plugin for multilingual support. Polylang provides a function called pll_current_language() that returns the active language – “de” for German, “en” for English. The button text is automatically selected based on this.

The PHP Code – and What It Does

PHP is a programming language in which WordPress itself is written. It runs on the server and generates the HTML that the browser displays. The PHP snippet below does exactly three things: it loads the Ko-fi JavaScript library, renders the language-appropriate button, and positions it correctly on the page.

Part 1: Loading the Ko-fi library

The Ko-fi widget is a JavaScript component hosted on Ko-fi’s servers. Before the button can be displayed, the browser needs to load this script via WordPress’s built-in mechanism.

add_action('wp_footer', 'foundic_kofi_enqueue_script', 5);

function foundic_kofi_enqueue_script() {
    if (!is_archive()) return;
    wp_enqueue_script(
        'kofi-widget',
        'https://storage.ko-fi.com/cdn/widget/Widget_2.js',
        [],
        null,
        true
    );
}

wp_enqueue_script is the WordPress-standard way to load external scripts, ensuring the Ko-fi script is only loaded once per page.

Part 2: The button itself

add_action('astra_archive_header', 'foundic_kofi_archive_button', 20);

function foundic_kofi_archive_button() {
    if (!is_archive()) return;
    $lang = function_exists('pll_current_language') ? pll_current_language() : 'de';
    $text = ($lang === 'en') ? 'Treat us to a coffee' : 'Lade uns auf einen Kaffee ein';
    $color = '#2563eb';
    $id = 'G2G11X96H2';
    echo '<div id="kofi-archive-btn"></div>';
    echo '<script>kofiwidget2.init(' . wp_json_encode($text) . ', ' . wp_json_encode($color) . ', ' . wp_json_encode($id) . '); kofiwidget2.draw("kofi-archive-btn");</script>';
}

add_action attaches the function to astra_archive_header, a hook in the Astra theme called on category pages. is_archive() checks whether we’re on a category page. wp_json_encode handles safe output of values.

Part 3: The CSS for positioning

CSS controls the appearance and arrangement of elements on a website. Here, the heading container is switched to Flexbox – a modern CSS layout model that places elements side by side.

add_action('wp_footer', 'foundic_kofi_move_button');

function foundic_kofi_move_button() {
    if (!is_archive()) return;
    echo '<script>
    document.addEventListener("DOMContentLoaded", function() {
        var btn = document.getElementById("kofi-archive-btn");
        var header = document.querySelector(".ast-archive-description");
        if (btn && header) {
            header.style.display = "flex";
            header.style.justifyContent = "space-between";
            header.style.alignItems = "center";
            header.appendChild(btn);
        }
    });
    </script>';
}

This JavaScript snippet waits until the page has fully loaded (DOMContentLoaded), then moves the button to the correct position within the heading area. Analogy for Ulf: like the ball boy running to his spot after the kick-off – it still works, because the game has only just started.

The Result

This is what the AI News page on foundic.org looked like after the button was integrated:

And on other category pages – without any additional configuration, automatically:

Because the code checks for is_archive() – which covers all WordPress archive and category pages – the button automatically appears on all eight category pages (four in German, four in English), each with the correct language text. No manual embedding page by page.

Step 7: Enhance Your Ko-fi Profile Page

Bernd has already uploaded his profile picture – it’s a holiday photo from 2019 at a theme park: “Already taken care of.”
Tanja: “That’s a photo of you in front of a Ferris wheel.”
Bernd: “That’s still me though.”
Tanja: “It should be your website’s logo.”
Bernd: “…I think people can still recognise me.”

Clicking the Ko-fi button on your website takes visitors to your Ko-fi profile page. This is the first thing a potential supporter sees – and it deserves a little care. Three changes make the biggest difference:

1. Update the Display Name
Under Settings → Profile, set the display name to your full brand name. “FOUNDIC” becomes “FOUNDIC.org” – the name visitors know and trust.

2. Upload Your Logo
Under Settings → Profile → Profile image: upload your website logo. Not a personal photo. Not a stock image. Your logo. This is the image donors see when they land on your Ko-fi page.

3. Write a Clear Bio
Two sentences are enough. For foundic.org: “We cover AI news, run training sessions, and build hands-on projects. Your support keeps us independent and ad-free.”

Making the Button Work: Text, Positioning and A/B Testing

Bernd says: “I’ve now got the button on 40 pages. Header, footer, sidebar, after every paragraph, as a popup…”
Tanja: “And how many donations have you received?”
Silence.
Bernd: “…People have to get used to it first.”
Tanja: “That’s not how it works.”

That the button works technically is one thing. That it actually generates donations is another. Two levers have the greatest impact: the button text and the positioning on the page.

Button Text: Emotion Beats Description

The generic Ko-fi text “Support me on Ko-fi” is technically accurate and emotionally inert. Good button texts combine an emotional component with a concrete benefit – they explain why a donation makes sense, not just that one is possible.

Testable variants in German:

“Lade uns auf einen Kaffee ein”	Inviting, personal	Sympathetic, low-threshold
“Unterstütze unsere Arbeit”	Direct, clear	Serious, but little emotion
“Hilf uns, unabhängig zu bleiben”	Benefit-focused	Explains the value of donating
“Gefällt dir das? Unterstütze uns”	Reactive, conversational	Speaks directly to the reading moment

Testable variants in English:

“Treat us to a coffee”	Inviting, evocative	Warm, low-threshold
“Support our work”	Direct, neutral	Clear, but little emotion
“Keep this project alive”	Urgency, significance	High engagement, but risks pressure
“Like what you read? Buy us a coffee”	Reactive, conversational	Connects to the reading moment

Positioning: Where the Button Sits Determines Conversion

Conversion describes the moment when a visitor takes a desired action – in this case: clicks the button and donates. Research on creator platforms points to a clear hierarchy:

Position	Conversion impact	Recommendation
End of article	★★★★★ Highest conversion	Essential – readers are most engaged here
Floating button	★★★★☆ High, but risky	Only use if it can be dismissed
After 2/3 of article	★★★★☆ High	Good for long articles (>1,500 words)
Archive pages	★★★☆☆ Medium	Good for repeat readers – as implemented on foundic.org
Sidebar	★★☆☆☆ Medium	Often ignored (“banner blindness”)
Header	★☆☆☆☆ Low	Too early – readers haven’t read anything yet

Concrete recommendation for WordPress:

• End of article → highest priority. Integrate via Code Snippets plugin using the the_content hook or directly in the theme template
• Archive pages → already implemented (as described in Step 6)
• After 2/3 of article → optional, for very long articles, achievable via the “Advanced Ads” plugin or a custom shortcode

Conclusion: Small, But Effective

Ulf leans back: “So in summary: I sign up, connect PayPal, build a button, put the code into this snippet thing and then the button automatically appears on all category pages?”
Tanja: “Exactly.”
Ulf: “That actually sounds manageable.”
Tanja: “It is manageable.”
Bernd: “I’ve already submitted a feature request to Ko-fi for a fireworks animation when someone donates. I called it ‘Celebration Mode’.”
Silence.
Bernd: “…People have to enjoy donating first.”
Tanja: “People first need to donate. Full stop.”

What stands at the end of an April workday: a fully functional donation button on a WordPress website. Integrated without risky changes to theme files, without trademark issues, language-dependent for two languages, using the website’s own primary colour.

Here’s the complete route at a glance:

• Platform choice: Choose Ko-fi – 0% platform fee, PayPal + Stripe
• Button text: Write your own wording – legally clean
• Create Ko-fi account: Username = brand name, fill in display name and bio
• Confirm email and connect payment method (PayPal, Stripe or both)
• Configure button: Set text and colour in the widget builder, copy embed code
• Add to WordPress: Via Code Snippets plugin, language-dependent, on all archive pages
• Enhance profile page: Logo, correct display name, clear bio

The technical effort was manageable. The conceptual groundwork – platform comparison, trademark check, finding the right wording – took more time than the actual implementation. That’s usually the case. And usually the right order of things.

What Comes After the First Button?

The button is in place. PayPal is connected. The first coffee is theoretically orderable. What now?
Tanja would say: “Wait four weeks. Check in Google Analytics which pages are generating clicks to ko-fi.com/foundic. The page with the most clicks gets the next button – directly at the end of the article.”
Ulf would nod: “Like match analysis. First look at what happened. Then adjust the tactics.”
Bernd will have removed the button from 40 of the 47 pages by now, because “the conversion rate isn’t right”. He’s been using the term “conversion rate” since this afternoon.

The next sensible steps after this guide:

• Add button at the end of articles – the highest-converting position, not yet implemented
• Analyse Google Analytics data – which pages are generating Ko-fi clicks?
• A/B test button text – four weeks per variant, then compare
• Add Stripe – for readers without a PayPal account

Data only comes when you start. And then look at what happens.