In this guide, I will show you exactly how to add a Buy Me a Coffee button or floating widget to your WordPress website. We will generate the code in your Buy Me a Coffee dashboard, paste it into WordPress using the Custom HTML block, and position it neatly so it complements your content. At the end, you will also find links to more how-to videos and articles on this website.
Related guides on this site:
How to Enrol for Windows 10 Support for Another Year |
More WordPress How-To Posts |
YouTube and Video Workflow Tips |
Camtasia Editing Tutorials
Contents
- What is Buy Me a Coffee
- Prerequisites
- Part 1: Generate your button or widget code
- Part 2: Add the code to WordPress
- Part 3: Positioning and display options
- Enhancements and best practices
- Troubleshooting
- Frequently asked questions
- More how-to videos on this website
What is Buy Me a Coffee
Buy Me a Coffee allows your audience to support your work through quick, one-off contributions or memberships. The embed options make it easy to place a support call-to-action on your site without complex setup.
Prerequisites
- A Buy Me a Coffee account with your page set up and payments connected.
- Administrator access to your WordPress site.
- A clear idea of where you want the button or widget to appear (sidebar, footer, or floating).
Part 1: Generate your button or widget code
- Log in to your Buy Me a Coffee account.
- Open Dashboard → Buttons & Widgets.
- Choose either:
- Website Button for a static button you place in a widget area, or
- Website Widget for a floating button that follows users as they scroll.
- Customise the colour and text to match your brand.
- Click Generate and copy the code provided.
Part 2: Add the code to WordPress
A) Block themes using the Site Editor
- Go to Appearance → Editor.
- Open the template or template part where you want the button (for example, Footer or a sidebar template part).
- Click the + to add a block and search for Custom HTML.
- Paste the Buy Me a Coffee code.
- Click Save and view your site.
B) Classic widget areas
- Go to Appearance → Widgets.
- Select the sidebar or footer area where you want the button to appear.
- Click Add Block and choose Custom HTML.
- Paste the Buy Me a Coffee code and click Update.
- Refresh your site to confirm it is displaying correctly.
Tip: If you use a plugin that provides a shortcode, you can add a Shortcode block instead. The official HTML script is generally the most reliable.
Part 3: Positioning and display options
- Sidebar: Good for posts and tutorials; consider placing it higher up for visibility.
- Footer: Site-wide and unobtrusive; ideal if you want a gentle reminder.
- Below post content: Add a Custom HTML block under your article so readers see it just after finishing.
- Floating widget: Always visible as the reader scrolls; use sparingly alongside other sticky elements.
Re-ordering widgets
In Appearance → Widgets, use the up and down arrows on each block to move your Custom HTML block above or below other widgets such as Search, Recent Posts, or Categories. Save and refresh your site to verify the new position.
Enhancements and best practices
- Consistent wording: Use the same call-to-action across your site and videos to build recognition.
- Analytics: Consider linking to your Buy Me a Coffee page with UTM parameters from other places on your site so you can see which pages drive support.
- Accessibility: Ensure surrounding context makes the purpose clear. If you add a text link near the button, include descriptive wording such as “Support my work via Buy Me a Coffee.”
- Performance: The scripts are lightweight, but if performance is critical, place the button in the footer and ensure your caching is configured.
- Editorial fit: On longer tutorials, place the button after the introduction and again after the conclusion, or use one button plus the floating widget.
Troubleshooting
- Nothing appears: Confirm you used a Custom HTML block, not a Paragraph block. Check your
data-slugordata-idmatches your username. - Shows as raw code: Replace the block with Custom HTML and paste the snippet again.
- Changes not visible: Clear any caching plugin and CDN cache, then hard-refresh your browser.
- Duplicate buttons: Ensure you have not added the script in multiple places unintentionally.
- No sidebar in your theme: Use the footer, insert below post content, or use the floating widget option.
Frequently asked questions
Can I change the colour or text later?
Yes. Regenerate the button in Buy Me a Coffee and replace the snippet in WordPress.
Can I show it on certain pages only?
Yes. Paste the code only into the relevant template, or use a widget visibility plugin to target specific pages.
Will this slow down my site?
The script loads from a CDN and is small. Place it lower on the page if you want to prioritise above-the-fold content.
More how-to videos and posts on this website
- How to Enrol for Windows 10 Support for Another Year
- Browse all WordPress How-To articles and videos
- How-To: Create and Optimise YouTube Thumbnails (site search)
- How-To: Faster Edits in Camtasia (site search)
- Buy Me a Coffee setup and tips (site search)
Wrap-up
That is all you need to embed a Buy Me a Coffee button or floating widget on your WordPress site. Generate the code, paste it into a Custom HTML block, and position it so it supports your content without being intrusive. If you prefer to watch the full walkthrough, you can embed your accompanying video for readers right here on the page.