I wanted the Total Donations Plugin for WordPress to show the 9 suggested donation levels in a nicer arrangement, PLUS I wanted there to be a 10th button for “Other Amount”. Furthermore, I only wanted to see the input for the “Other Amount” to display when appropriate. So here’s how to make that happen with just a few lines of jQuery…
First… some styling. Add the following to your CSS. These lines do the following: (1) set the default button width to 18%. Note: not 20% (5 columns), because there’s some padding around them to take into account. (2) Center the numbers inside each button. (3) Reduce the amount of padding on the actual numbers because it’s really TOO generous, imho. (4) When the screen gets small, reduce from 5 columns to 3, and then to 2 columns.
.bootstrap-wrapper .form-horizontal .form-group.mg_giving-levels:first-of-type .radio-inline { width:18%; text-align:center; }
.bootstrap-wrapper .form-horizontal .form-group.mg_giving-levels:first-of-type .radio-inline label.migla_amount_lbl { padding-left:5px; padding-right:5px; }
@media only screen and (max-width: 680px) {
.bootstrap-wrapper .form-horizontal .form-group.mg_giving-levels:first-of-type .radio-inline { width:32%; }
}
@media only screen and (max-width: 420px) {
.bootstrap-wrapper .form-horizontal .form-group.mg_giving-levels:first-of-type .radio-inline { width:48%; }
}
Second… deal with the less than optimal handling of the “other amount”. Add the following javascript / jQuery code. Make sure you modify with the correct values for YOUR site — see notes below the code.
<script>
jQuery(document).ready(function() {
/* start Customize Total Donations plugin */
if (jQuery(“body”).hasClass(“page-id-102“)) {
var blob = jQuery(“.mg_giving-levels:first-of-type .col-sm-12:nth-of-type(2) div:nth-of-type(9)“)[0].outerHTML.replace(/miglaAmount8/g,”miglaAmountX”).replace(“5000″,”other”).replace(“5,000.00″,”Other”);
var otherButton = jQuery(blob).appendTo(jQuery(“.mg_giving-levels:first-of-type .col-sm-12:nth-of-type(2)”));
jQuery(otherButton).addClass(“other-amount”);
jQuery(“.other-amount span”).remove();
jQuery(“.radio-inline”).on(“click”,function(e) {
console.log(jQuery(this).attr(“class”));
if (jQuery(this).hasClass(“miglaCustomAmount”)) {
} else if (jQuery(this).hasClass(“other-amount”)) {
e.stopImmediatePropagation();
jQuery(“label[for=’miglaCustomAmount9‘]”).click();
jQuery(“.mg_giving-levels:nth-of-type(2)”).show();
jQuery(“#miglaCustomAmount”).focus();
} else {
jQuery(“.mg_giving-levels:nth-of-type(2)”).hide();
}
});
jQuery(“.mg_giving-levels:nth-of-type(2)”).hide();
}
/* end Customize Total Donations plugin */
});</script>
NOTES:
- page-id-102 — this is a class name found on the <BODY> tag of the page your form is on. Make sure it matches.
- nth-of-type(9) — I created 9 suggested donation levels and I’m making a copy of the 9th button to use to create a new “Other” button. Change the 9 to match the number of the last suggested donation level button on your own site.
- replace(/miglaAmount8/g,”miglaAmountX”) — change the 8 to be the number of suggested donation levels you have on your own site minus one. So if you have 9 buttons, you put an 8 here.
- replace(“5000″,”other”) — change the 5000 to be the $ figure you have for your last suggested donation level… no formatting.
- replace(“5,000.00″,”Other”) — change the 5,000.00 to be the $ figure you have for your last suggested donation level… with formatting.
- miglaCustomAmount9 — change the 9 to equal the number of suggested donation levels you have on your own site.
Yeah, I’m sure I could make this all much more generic… but generic doesn’t pay the bills. 😉
Hope it helps!