Adding a Tip Jar to Your Site – The Basics (2)

Substituting a URL for the Button Form

As noted in Part 1 of this Tip Jar tutorial, there’s a simpler code for the button form, or for achieving the same functionality as with the button form, that you can get from within Paypal. Log in to your account, go to “Profile/Selling Tools/Paypal Buttons,” choose “update,” and, this time, when you create your button, check the box under Step 2 to “Save button at Paypal.” (This menu up until quite recently was easier to reach via “Merchant Services” – and may soon be again, for all I know: If you have trouble finding it, you can just site-search Paypal for “Payment Button,” and the page should be among the first results.)

Creating a Hosted Button at Paypal

Creating a Hosted Button at Paypal

…after you’ve filled in whatever other pertinent details – don’t worry about them too much right now unless you feel you know what you want – you finish by clicking “Create Button.” On the next page, choose NOT to encrypt the code (something relevant for big e-commerce sites, not really for you and me I don’t think).

You’ll get code like the following as a first option for adding to your site…

When inserting the above in the middle of a post or page, you’ll have the same problems as with the raw form example in the prior tutorial – extra white spaces and other inconveniences – but an easy and flexible alternative is simply to use the URL you’ll find under the “Email” option – the alternative tab you’ll find after you’ve finished the button design process. When you click on the tab, you will get something like this:

saving_paypal_buttongiving you something like

…with your own unique hosted_button_id number instead of the one bolded above. As you can see, the result is just a URL with a little bit of extra code.

A non-hosted version (which you would have gotten if you didn’t check the box under Step 2) is much longer, but also consists of just one URL (I’ve removed my merchant ID from the bracket portion – you could substitute yours if you wanted):[merchant-ID]=US&item_name=Unsaved%20BN&item_number=usb&button_subtype=services&no_note=0&cn=Add%20special%20instructions%20or%20message%3a&no_shipping=1&currency_code=USD&weight_unit=lbs&bn=PP%2dBuyNowBF%3abtn_buynowCC_LG%2egif%3aNonHosted

Sticking with the prior version – not least because it’s shorter – we could create a simple text link:


Please support us, we’re starving to death!

But you can also use the same link to produce a button identical with the one produced by the form in initial appearance, and completely identical in functionality:

In the code below, instead of showing the same Paypal credit card image again, I’m using it to link to the image-button I put together for part one of this tutorial.

You could insert the above, replacing the Button ID number with your own, when editing your “About” page (while in the “Text” editing panel), and get something like this:

SOS - Support Our Site

You could then center and otherwise style the image ( in the above) using the Visual Editor or, for more advanced effects, CSS. In the code sample, I’ve already added CSS class selectors (“sos_link” and “sos_img”) to aid in future styling. If you are handy with CSS already, you can also wrap the above in <div> tags, of course, and add whatever appropriate styling, after inserting it.

Alternatively, you can use the WordPress Media Library to upload your own button image, set the image to link to the email link/URL, and further format it (center it, re-size it, etc.) as you would any other image. If you want to use that image in your sidebar, you could just copy the code that appears on your Text Editor panel, and paste it into a Text Widget.

A Paypal Donation Button Tip Jar

Here’s a ready-to-use version that you can insert in a sidebar text widget or in an About page via the Text Editor, as is, and probably get pretty good results. It’s styled to be centered, and to take up up to 100% of the area afforded for it. Of course, if you want it to make donations to your site instead of to mine, you’ll have to create your own Paypal button, and substitute your own Button ID number.


SOS - Support Our Site

If you want it smaller or larger relative to the width of the widget area, adjust the percentage after max-width. If you don’t want it centered, delete everything from margin to block;. If you want more or less space above and below, adjust the number of pixels (px) or just zero them out (“0” is preferred, not “0 px”). Personally, I’m too shy to put a button that large in my sidebar – so the solution I will later implement for widget areas will be meeker – that is, smaller. You may be able to or feel you need to go bigger.

If you’re deeply concerned about display on ancient versions of Internet Explorer, then you’ll need a more advanced tutorial.

Now, there’s a lot more you can do with this code, now that you’ve started. There’s also a lot more you can do to customize what the User sees after clicking and after canceling or completing the routine (much of it to be handled via Paypal). We’ll leave such possibilities for some other time or your own imagination.

But what if we want users to fill in the amount first?

The last Tip Jar we’ll look at will allow users to fill in the donation amount “on the front side” – at your site, before clicking to Paypal. For this implementation, however, we’ll have to use a form, which means we’ll also have to deal in one way or another with the aforementioned formatting vagaries. It doesn’t hurt to have BOTH styles – simple donation URL and fill-in-the-amount form –  available, however.

You may also want to note – and it may be relevant to you if you’re going “beyond the Tip Jar” to more advanced implementations – that you do not need to use the Paypal “Donation”-style button (selected during “Step 1” of “Button Creation”) in order to create a fill-in-the-amount form like this one. If you generate a Buy Now or other button and want to make it “fill in the amount,” on the line in the code where a dollar amount is specified, empty it – instead of, say, "$5.00" it will be double quotes or "", and, if you want to put a suggested or example amount in the empty text box, you can add it on the same line.

In our examples here, the critical line looks like this: <input style="width: 90px;" name="amount" type="text" value="" placeholder="$xx.xx" title="Confirm or not on next page..." alt="Input amount" />

The style sets the width of the input box, which otherwise will tend to be set generically by your stylesheet, and often will take up all of the space available. The result will tend to look silly for a dollar amount – unless you happen to have mostly multi-billion dollar contributors. In addition to the placeholder, I’ve also added a title that will display when the user hovers over the input field with a mouse, and the “alt” “Input Amount” that will tell the visually impaired what’s there when their screen-readers pass over the content.

Beyond the nuts and bolts and into aesthetics, there are a number of ways, as ever, to achieve the final effect we want. For this version I’ve stretched the main image vertically (in an image editor) to open up some space, and am setting the image itself as a background with CSS, rather than placing it normally: It looks just the same, of course, at least when it exactly fills the space for it, something I’ve pre-set with height and width commands. Since it’s a background in a space (div) of known exact height and width, we can position the input form over it without relying on advanced CSS overlay functions and having to worry about cross-browser and cross-platform issues: It’s just simpler this way.

First, here’s the code:

It gets you something like:
I say “something like” because the code, even with a lot of in-line CSS formatting – everything in parentheses after the word “style” – will display differently in different WordPress themes or with different stylesheets, which may be a good or a bad thing, but in either case will not be the same thing. The above is a non-functional image of what the button looks like when coded on this blog, in an up-to-date (as of this writing) browser. On this blog, for instance, I also use some CSS3 formatting to style input buttons like the “Do It” button, and I frequently find myself finagling with micro-adjustments trying to get the button as right as I can in different spots. All of the necessary code could probably be written “in-line,” but the code block would be even longer, a lot longer, and it’s already a bit much.

Also note that all of the usual warnings about switching between the WordPress Visual and Text editors will apply here: When you create code for a button like the one above, you need to add it in the Text editor, and you may lose key portions of it if you switch to the Visual editor, then save the post, now or in the future. There are various fixes for this problem – such as permanently disabling the Visual editor – but I’ve never found one whose defects didn’t outweigh its advantages.

Moving a little beyond the basics: Going to the Stylesheet

If you want your button to look exactly like my button, or as close as possible given browser variations, you may want to add code to your theme’s Stylesheet or, if you have it, to a separate application for adding CSS like Jetpack’s CSS Editor.

Adding CSS to your theme probably still qualifies as a beginner’s level task, if not a “beginning beginner” one. So, for moderately advanced beginners, here’s the code for a version that ought to look like the image above.

I’ll first provide the code for the button. The only change you’ll have to make is to substitute your Paypal email or Merchant ID number where indicated (with, of course, no [ ] brackets, just the email address or Merchant ID). It includes CSS selectors (“classes”) in place of in-line CSS. Then I’ll provide my styling:

The Button:

The CSS1:

If you’re an advanced CSS’er, you may know of a variety of ways either to write the above better or to tweak it. (On the other hand, if you’re an advanced CSS’er, what are you doing here? This is for moderately advanced beginners!)

Fancier versions – combining and rotating multiple images, and adding further effects – may require different approaches, and another tutorial – culminating in the version I intend to implement on this site.


  1. Corrected []

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

0 comments on “Adding a Tip Jar to Your Site – The Basics (2)

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 Pings/Trackbacks for "Adding a Tip Jar to Your Site – The Basics (2)"
    1. […] 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 […]

    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