Adding a Tip Jar To Your Site – The Basics

support_our_siteThe easiest and most common way to begin making, or at least seeking, monetary returns on a blog or other site is to add a “tip jar” or donation link.

This tutorial will consist of multiple posts, initially focused on beginners. Both of the first two installments will provide code usable as is, though you may of course choose to customize it further. All of the installments will also assume basic familiarity with open-source WordPress (available via and many web hosts), and will employ WordPress-related terms and concepts – such as WordPress’s sidebar widgets and Visual/WYSIWYG and Text/HTML editing panels – but the code will work on other HTML- and CSS-based platforms. It cannot be used on restrictively template-driven platforms like that do not allow users to edit their site code directly: If you don’t have that kind of access, but want more control over your site, you’ll have to move to an open source platform (which may not be as difficult or expensive as it may sound to the uninitiated).

The Objective

We want a visible appeal to users asking and enabling them to support our site monetarily. We want it to be quick, easy, and familiar, and we want people to feel confident, and for good reason, that their payment information will not be misused. Because we are asking for a donation, we don’t want to get in the way of anyone’s generosity, so we’ll leave it up to our supporters to determine the specific amount they want to offer.

For open source WordPress users in particular, there are many plug-ins that will do the job, and that are easy to set up: You can have a well-designed, more-capable-than-you-probably-need solution up and running well before you have finished the first part of this tutorial, much less the entire thing. That’s one of the benefits of WordPress – the availability for free of thousands of often very high quality plug-ins.

On the other hand, at least as WordPress modification projects go, this one is fairly simple. So, if you want to learn about modifying WordPress, it’s a good place to start. In addition, putting the solution together by yourself and fully understanding it, rather than simply adopting someone else’s plug-in, will give you something more to work with and build on. You’ll also find easily copyable and customizable code for a version of a simple button. Feel free to skip to the end whenever you like, but the point of this tutorial is “how-to” not “quick-fix.”

As for this project in particular, of all of the possible places where bloggers might add a Tip Jar, blogger biography (or “About”) pages and main sidebars are the most common. Since virtually the same code will work for both, that’s what we’ll focus on here. We’ll leave more unusual and complex ideas – advanced styling, fundraising drives, donor walls, paywalling, content-dripping, digital wallets, checkout and post-checkout landing pages, and so on – for later exploration as we work toward full-fledged monetization solutions adaptable for a wide range of sites, from part-time blog to major publishing and e-commerce enterprise.

A Form-Based Paypal Tip Jar

Like the overwhelming majority of the plug-ins that I mentioned at the outset, our solution will depend on Paypal. If you are committed to some other on-line payments processor or credit card gateway, much of the following will be irrelevant to you. Paypal rates as high on the familiarity scale as we are going to find. It also offers reasonable rates for credit card processing. Given WordPress’ international reach, we should also note here at the outset that users in different countries will of course encounter different questions and potential complications, even legal complications as well as practical ones, when it comes to asking for money on the internet. This tutorial will stick with US Dollars (“USD” in the code!) and Paypal options for US users. Non-U.S. users may have to adjust their approach to greatly varying extents, and may find certain options closed to them.

If you have a Paypal Personal account, but want to use the solution I’m going to recommend eventually and use Paypal’s button generator, you will have to upgrade from within Paypal to a Premier or Business account (via Profile). There are no direct fees for the upgrade, and, if you don’t know for sure that you need a Business account, you probably don’t, even if you happen to use Paypal for a small business. You do not however need to upgrade your account in order to add and use the code for the most basic Tip Jar I’ll be focused on in this post.

At Paypal, under Merchant Services, one of the featured items is Payment Buttons. You can also find numerous Paypal button code generators elsewhere, via a simple web search, but, since we’ll eventually want to familiarize ourselves with Paypal’s native features, we might as well go to Paypal’s own button generation page.


Paypal Button Creation – Under Merchant Services/Buttons

From the initial menu of choices, we’ll be interested in the “Donation” or “Buy Now” options. Neither will be perfect for our purposes as generated, but we’ll use the “Donate” version in this example, since, if you take it “as is,” without custom imagery or text or other alterations, and you don’t expect to be earning more than $10,000 from cumulative donations anytime soon – or, in the United States, represent an official 501(c)(3) organizations – it will do the trick, and look right to the casual observer.

“Buy Now” may seem at first an inadequate alternative, both because the default text and selection of buttons seem to refer to purchases rather than to contributions, and because it is not immediately obvious that Buy Now button can be used for “no-set-amount” transactions. Our more advanced Tip Jars (beginning with the next post in this series) will, however, involve modification of a “Buy Now” button, since it turns out that we can use it not only for no-set-amount transactions, but for ones in which the donor can fill out the amount before getting to Paypal. Paypal’s Donation buttons are not set up to facilitate the latter.

Basic Tip Jar

Following the simple directions for Paypal button creation, either at Paypal or using some off-Paypal button generator, you can easily create the code for a Donation button.

If and when you generate your own code for different types of buttons, you’ll want to pay close attention to the differences between “hosted” and “non-hosted” buttons (the former created under the “Save Your Buttons at Paypal” tab), between using your Merchant ID or a Paypal payments email address, and between using an encrypted or non-encrypted button (the former are really for high-volume sellers), but you don’t need to worry about that now: Since we’re focusing here on a solution that anyone can adapt directly, we’re using the code for a non-hosted, email-address-enabled, non-encrypted button.

The following code is what Paypal’s own code generator and many off-site generators will give you:

If you have a Paypal account – even the most basic Personal account – you can use the above code, substituting your Paypal-enabled email address for [YOUR PAYPAL EMAIL ADDRESS] and your own slogan or other description for Support Our Site!. Pasted into your site’s HTML – for example in a WordPress About Page or Text Widget – the above code will, after a few additional alterations, produce the following:

You could add some text before and after the button/image explaining to people why your site deserves their support. For now, go ahead and click on it if you want – it won’t put you in any immediate financial danger. As you will see, after being overwhelmed by your sympathetic pitch, and clicking the button, a user will be taken to a page like the following:

Generic Donation Button Checkout

Generic Donation Button Checkout

The generic “Buy Now” checkout differs slightly, and checkout aesthetics and operations can be further customized at Paypal, but that’s a subject for some other time. We’ve got other, more urgent matters to attend to first.

Solving Some Formatting Glitches

I emphasized “a few additional alterations” above because, though the code will mostly work fine, you will likely encounter some initial formatting problems after copy-pasting it, whether you get it from a button generator or from my example.

Pasted into the Visual editor, when you’re working on a Post or Page, the code won’t work at all. Pasted into the Text editor, it will produce a bunch of white space due to the way that the WordPress Text editor handles line-breaks (it adds <br> tags for each new line). The first is not a problem, exactly: It’s just a fact of WordPress life. You’ve got to paste most code (with the exception of “shortcode”) into the Text editor, not the Visual editor.

To deal with the second problem, or the real problem, you can either delete the empty line-break spaces in the Visual editor, or delete line breaks (making all of the code run together as though in a single “sentence”) in the Text editor. The result would be jammed together, all on one line, in the Text editor:

There’s nothing wrong with doing that: It’ll even speed up reaction time by a nanosecond or two.

If you look very closely to the jammed-together version of the code, you may notice something else that’s different, or something missing – the line that reads <img alt="" border="0" src="" width="1" height="1"> in the generated code. I’ve gone ahead and deleted the line because it’s not necessary, and it tends to produce another minor formatting problem: extra empty space below the button both in pages and in widgets. Depending on your theme and placements, and your degree of perfectionism, the results may strike you as somewhere between no-big-deal to horrifying. (It usually horrifies me, so I pluck it out with extreme prejudice.)

The problem is that Paypal’s code contains a 1-pixel by 1-pixel pseudo-image, literally the tiniest of digital dots, that serves a purpose for Paypal (tracking), but serves none I know of for bloggers. Though it’s a microscopic image on its own, it may be assigned margins or padding (and maybe more!) by your theme’s image styles. On the bright side, Paypal describes use of the image as “optional,” so no need to worry or go out of your way to exclude it from your blog’s image styles: You can just delete the last line before </form> , as I already have done for you in the run-on version of the code.

You will also, incidentally, encounter this problem with widget and link code from Amazon and other firms, especially ones that have been in big business on the internet since the turn of the millennium. I’ve been vaporizing these pseudo-images for years, and neither Amazon nor Paypal has ever sent me a cease and desist order. I urge you to do the same, at least until the day they handle the problem from their side.

We’ll have some alternatives that are more easily and fully customizable in the next installment in this tutorial, but for now we’ll stick with the basic, form-based button, with one additional optional alteration and just a little bit of extra formatting…

Replacing the Donate Button

Paypal’s basic button images do not appear to have changed at all in ten years or more, but you can also easily replace a Paypal button image with an image of your own.

It makes no difference in functionality whether you use Paypal’s images or your own. When I was just starting out with this stuff, I wasn’t sure. Though it may seem strange to an experienced user and certainly reads strange to me now, I wondered if there might be some code or other special digital magic hidden in Paypal’s image.

Don’t worry about it. Whether or not you add a link to your own image on the Paypal button creation page, or when pasting the code into your widget or page, there are no invisible strings connecting Paypal’s or any other image to the results. So, hack away!

If you’re handy with a graphic arts program, you can steal the Paypal and credit card logos – or find other versions on-line easily enough – and add them to your own imagery or artwork compositing your own Donate or Contribute or GIVE! or whatever-you-choose button.

One popular theory is that people are more likely to interact with (or donate to) someone who seems real to them, and that a photograph will be more real to them than an abstraction. So, if you buy this line, you could…

  1. locate or scan or download a nice snapshot-sized portrait of yourself (or maybe your personal avatar if you have and use one – even if it happens to be your dog, cat, child, or political statement);
  2. add some explanatory text and symbol overlays in Photoshop or GIMP or other image/graphic editor;
  3. save it as a GIF, JPG, or PNG file;
  4. upload the result via the WordPress Media uploader or some other site;
  5. copy the URL; and
  6. substitute it in the code for

Or you can also steal the sample image-button that I created for this post for your multi-author blog or community site. I’ll even make it easy for you below (but please let me know on the off chance that you do use it – or if you get anything else out of this tutorial!).

The Amazing Grabbable Usable Customizable Support Our Site Button Code, or End of Part 1

We’ll cover some more sophisticated and more easily customized approaches, featuring, ahem, client-side amount specification and more up-to-date CSS3 stylings, in Part 2 of this tutorial. For now, here’s “Support Our Site!” code in grabbable form. I’ve added a couple of CSS selectors to help those with CSS skills in formatting it further, and I’ve cheated with some in-line CSS at the very beginning (after “style” on the first line – if you don’t want it centered and always 250 pixels wide, delete everything from style to 250px/").

…which, prior to any additional formatting, yields this:

Oh, except I made one other change: That button works just fine if you want to tip me. Please be my non-hosted guest!

Home Page  Public Email  Twitter  Facebook  YouTube  Github   

Writing since ancient times, blogging, e-commercing, and site installing-designing-maintaining since 2001; WordPress theme and plugin configuring and developing since 2004 or so; a lifelong freelancer, not associated nor to be associated with any company, publication, party, university, church, or other institution.

Posts in this series

One comment on “Adding a Tip Jar To Your Site – The Basics

Commenting at CK MacLeod's

We are determined to encourage thoughtful discussion, so please be respectful to others. We also provide a set of Commenting Options - comment/commenter highlighting and ignoring, and commenter archives that you can access by clicking the commenter options button (). Go to our Commenting Guidelines page for more details, including how to report offensive and spam commenting.

  1. I was wondering if you ever thought of changing the layout of your site?
    Its very well written; I love what youve got to say. But maybe you could a little
    more in the way of content so people could connect with
    it better. Youve got an awful lot of text for only having one or 2 pictures.
    Maybe you could space it out better?

2 Pings/Trackbacks for "Adding a Tip Jar To Your Site – The Basics"
  1. […] or the proportion that goes to charity, one easy thing to do among others would be to provide a direct donation link apart from Cent-Up’s, but proudly displayed along with it. Likewise, if I want to help out […]

  2. […] noted in Part 1 of this Tip Jar tutorial, there’s a simpler code for the button form, or for the same functionatlity as the button […]

Commenter Ignore Button by CK's Plug-Ins

Leave a Reply

Your email address will not be published. Required fields are marked *



Noted & Quoted

TV pundits and op-ed writers of every major newspaper epitomize how the Democratic establishment has already reached a consensus: the 2020 nominee must be a centrist, a Joe Biden, Cory Booker or Kamala Harris–type, preferably. They say that Joe Biden should "run because [his] populist image fits the Democrats’ most successful political strategy of the past generation" (David Leonhardt, New York Times), and though Biden "would be far from an ideal president," he "looks most like the person who could beat Trump" (David Ignatius, Washington Post). Likewise, the same elite pundit class is working overtime to torpedo left-Democratic candidates like Sanders.

For someone who was not acquainted with Piketty's paper, the argument for a centrist Democrat might sound compelling. If the country has tilted to the right, should we elect a candidate closer to the middle than the fringe? If the electorate resembles a left-to-right line, and each voter has a bracketed range of acceptability in which they vote, this would make perfect sense. The only problem is that it doesn't work like that, as Piketty shows.

The reason is that nominating centrist Democrats who don't speak to class issues will result in a great swathe of voters simply not voting. Conversely, right-wing candidates who speak to class issues, but who do so by harnessing a false consciousness — i.e. blaming immigrants and minorities for capitalism's ills, rather than capitalists — will win those same voters who would have voted for a more class-conscious left candidate. Piketty calls this a "bifurcated" voting situation, meaning many voters will connect either with far-right xenophobic nationalists or left-egalitarian internationalists, but perhaps nothing in-between.

Comment →

Understanding Trump’s charisma offers important clues to understanding the problems that the Democrats need to address. Most important, the Democratic candidate must convey a sense that he or she will fulfil the promise of 2008: not piecemeal reform but a genuine, full-scale change in America’s way of thinking. It’s also crucial to recognise that, like Britain, America is at a turning point and must go in one direction or another. Finally, the candidate must speak to Americans’ sense of self-respect linked to social justice and inclusion. While Weber’s analysis of charisma arose from the German situation, it has special relevance to the United States of America, the first mass democracy, whose Constitution invented the institution of the presidency as a recognition of the indispensable role that unique individuals play in history.

Comment →

[E]ven Fox didn’t tout Bartiromo’s big scoops on Trump’s legislative agenda, because 10 months into the Trump presidency, nobody is so foolish as to believe that him saying, “We’re doing a big infrastructure bill,” means that the Trump administration is, in fact, doing a big infrastructure bill. The president just mouths off at turns ignorantly and dishonestly, and nobody pays much attention to it unless he says something unusually inflammatory.On some level, it’s a little bit funny. On another level, Puerto Rico is still languishing in the dark without power (and in many cases without safe drinking water) with no end in sight. Trump is less popular at this point in his administration than any previous president despite a generally benign economic climate, and shows no sign of changing course. Perhaps it will all work out for the best, and someday we’ll look back and chuckle about the time when we had a president who didn’t know anything about anything that was happening and could never be counted on to make coherent, factual statements on any subject. But traditionally, we haven’t elected presidents like that — for what have always seemed like pretty good reasons — and the risks of compounding disaster are still very much out there.

Comment →
CK's WP Plugins


Extraordinary Comments

CK's WP Plugins