In the first part of this mini-series titled, "Collecting Donations With WordPress", you'll learn how to write a WordPress plugin which allows users to send you a donation via PayPal. The plugin uses its own backend settings panel, and is highly customisable. So, let's get started!
Initialising the Plugin
Step 1
In the wp-content/plugins directory of your site, create a new folder called paypal-donations.
Step 2
Now, within that folder, create a file called paypal-donations.php.
Step 3
Finally, you need to add the Plugin Header information, which will tell WordPress that your new plugin actually exists on your server. You can change these details to whatever you wish, though they should typically be in that order with a minimum of that information.
<?php /* Plugin Name: PayPal Donations Plugin URI: http://code.tutsplus.com Description: Simple PayPal donation plugin. Version: 1.0 Author: Sam Berson Author URI: http://www.samberson.com */
Step 4
You'll now see your new plugin showing up in the Plugins page of the WordPress admin. Go ahead and Activate the plugin, though you won't see much happening just yet.
Adding the Shortcode
You'll be able your donate button by using a simple shortcode in any posts or pages you create. Essentially, a shortcode is a small piece of text, wrapped in square brackets, that allows you to call any function or action from a plugin or theme, in the Post Editor.
In this plugin, the shortcode will be, [donate], and this can be added anywhere in your posts or pages.
Step 1
To add the shortcode to WordPress, you need to use the add_shortcode function, and within it, define what the shortcode will be (in this case, 'donate'), and then you'll define the form fields for the donate button, and the image information for the button.
// Adds [donate] shortcode
add_shortcode('donate', function() {
$donate_options = get_option('donate_plugin_options');
// Deafult Button Image
$url = 'https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif';
// Checks Which Image To Use
switch ($donate_options['button']) {
case 'small':
$url = 'https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif';
break;
case 'medium':
$url = 'https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif';
break;
case 'large':
$url = 'https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif';
break;
}
return '<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div class="paypal-donations">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="'.$donate_options['paypal_user_id'].'">
<input type="hidden" name="rm" value="0">
<input type="hidden" name="currency_code" value="'.$donate_options['currency'].'">
<input type="image" src="'.$url.'" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</div>
</form>';
});
Step 2
At this stage, you can add the new shortcode to a post or page, though it won't look quite right, and will likely throw up a few errors onto your site.
Callbacks & Form Functions
You'll now define the callbacks required to make the plugin work, as well as the form for the settings panel in the WordPress admin.
Step 1
You should now add an empty callback, which is needed to ensure that the plugin functions correctly. It's simply defining a new WordPress function, opening it, and then closing it again.
function donate_plugin_cb() {
// Optional Callback
}
Step 2
Next, you're going to add a function which generates and input field in the admin settings form for your PayPal email address.
// Generate INPUT Field form form settings [EMAIL]
function paypal_user_id_html() {
$donate_options = get_option('donate_plugin_options');
echo "<input name='donate_plugin_options[paypal_user_id]' type='email' value='{$donate_options['paypal_user_id']}'/>";
}
Step 3
Now, you'll generate an input field for the admin settings with radio buttons, so you can select which find of button you'd like - more on that later.
// Generate INPUT Field form form settings [RADIO]
function paypal_donation_button_html() {
$donate_options = get_option('donate_plugin_options');
?>
<p>
<label>
<input type='radio' name='donate_plugin_options[button]' value='small' <?php if($donate_options['button'] == 'small') { echo 'checked'; } ?>>
<img src='https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif' alt='small' style='vertical-align: middle;margin-left: 15px;'>
</label>
</p>
<p>
<label>
<input type='radio' name='donate_plugin_options[button]' value='medium' <?php if($donate_options['button'] == 'medium') { echo 'checked'; } ?>>
<img src='https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif' alt='medium' style='vertical-align: middle;margin-left: 15px;'>
</label>
</p>
<p>
<label>
<input type='radio' name='donate_plugin_options[button]' value='large' <?php if($donate_options['button'] == 'large') { echo 'checked'; } ?>>
<img src='https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif' alt='large' style='vertical-align: middle;margin-left: 15px;'></br>
</label>
</p>
<?php
}
Step 4
Finally, we'll generate another input field with lots of drop down items, so you can select the currency in which your PayPal donations will be processed, by adding a PHP array.
// Generate INPUT Field form form settings [DROPDOWN]
function paypal_currency_html() {
$donate_options = get_option('donate_plugin_options');
$currency = array(
'AUD' => 'Australian Dollars (A $)',
'BRL' => 'Brazilian Real',
'CAD' => 'Canadian Dollars (C $)',
'CZK' => 'Czech Koruna',
'DKK' => 'Danish Krone',
'EUR' => 'Euros (€)',
'HKD' => 'Hong Kong Dollar ($)',
'HUF' => 'Hungarian Forint',
'ILS' => 'Israeli New Shekel',
'JPY' => 'Yen (¥)',
'MYR' => 'Malaysian Ringgit',
'MXN' => 'Mexican Peso',
'NOK' => 'Norwegian Krone',
'NZD' => 'New Zealand Dollar ($)',
'PHP' => 'Philippine Peso',
'PLN' => 'Polish Zloty',
'GBP' => 'Pounds Sterling (£)',
'RUB' => 'Russian Ruble',
'SGD' => 'Singapore Dollar ($)',
'SEK' => 'Swedish Krona',
'CHF' => 'Swiss Franc',
'TWD' => 'Taiwan New Dollar',
'THB' => 'Thai Baht',
'TRY' => 'Turkish Lira',
'USD' => 'U.S. Dollars ($)',
);
?>
<select id='currency_code' name='donate_plugin_options[currency]'>
<?php
foreach($currency as $code => $label) :
if( $code == $donate_options['currency'] ) { $selected = "selected='selected'"; } else { $selected = ''; }
echo "<option {$selected} value='{$code}'>{$label}</option>";
endforeach;
?>
</select>
<?php
}
Hooking It All Up
Now you've generated your shortcode and form fields, you need to connect it back up to the WordPress admin, so that the plugin is functional.
Step 1
Let's begin by registering all the settings, and their fields with WordPress, and then adding the action to the admin.
// Register All Settings And And Setting Fields as Used in wordpress
function register_settings_and_fields() {
// $option_group, $option_name, $sanitize_callback
register_setting('donate_plugin_options','donate_plugin_options');
// $id, $title, $callback, $page
add_settings_section('donate_plugin_main_section', 'Main Settings', 'donate_plugin_cb', __FILE__);
// $id, $title, $callback, $page, $section, $args
add_settings_field('paypal_user_id', 'PayPal ID: ', 'paypal_user_id_html', __FILE__, 'donate_plugin_main_section');
// $id, $title, $callback, $page, $section, $args
add_settings_field('button', 'Select Button: ', 'paypal_donation_button_html', __FILE__, 'donate_plugin_main_section');
// $id, $title, $callback, $page, $section, $args
add_settings_field('currency', 'Currency: ', 'paypal_currency_html', __FILE__, 'donate_plugin_main_section');
}
add_action('admin_init', 'register_settings_and_fields');
Step 2
You're now going to generate the HTML of the main options page in WordPress, by setting up a div with the class of wrap, and then opening up the form and importing the settings fields.
// Generate HTML of main options page
function options_page_html() {
?>
<div class="wrap">
<h2>Plugin Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
<?php
// $option_group
settings_fields( 'donate_plugin_options' );
// $page
do_settings_sections( __FILE__ );
?>
<p class="submit">
<input type="submit" class="button-primary" name="submit" value="Save Changes">
</p>
</form>
</div>
<?php
}
Step 3
Next you'll add the plugin's settings page into the WordPress admin, by using the options_init() function, along with the add_options_page function.
// Admin Menu Action Hook
function options_init() {
// page_title, menu_title, capability, menu_slug, function
add_options_page('Donate Plugin Options', 'Donate Plugin Options', 'administrator', __FILE__, 'options_page_html');
}
add_action('admin_menu', 'options_init');
Step 4
The very last step, is to add the activation hook, and to check if the settings already exist. If they do, great - if not, the plugin will register the defaults.
// Activation Hook. Check if settings exists, if not register defaults.
function donate_activate() {
$defaults = array(
'paypal_user_id' => get_option('admin_email'),
'button' => 'small',
'currency' => 'USD'
);
if(get_option('donate_plugin_options')) return;
add_option( 'donate_plugin_options', $defaults );
}
register_activation_hook( __FILE__, 'donate_activate' );
Final Source Code
Your plugin should now be fully functional, by adding the [donate] shortcode to your posts or pages! Here's the full source code for the plugin:
<?php
/*
Plugin Name: PayPal Donations
Plugin URI: http://code.tutsplus.com
Description: Simple PayPal donation plugin.
Version: 1.0
Author: Sam Berson
Author URI: http://www.samberson.com
*/
// Adds [donate] shortcode
add_shortcode('donate', function() {
$donate_options = get_option('donate_plugin_options');
// Deafult Button Image
$url = 'https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif';
// Checks Which Image To Use
switch ($donate_options['button']) {
case 'small':
$url = 'https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif';
break;
case 'medium':
$url = 'https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif';
break;
case 'large':
$url = 'https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif';
break;
}
return '<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div class="paypal-donations">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="'.$donate_options['paypal_user_id'].'">
<input type="hidden" name="rm" value="0">
<input type="hidden" name="currency_code" value="'.$donate_options['currency'].'">
<input type="image" src="'.$url.'" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</div>
</form>';
});
function donate_plugin_cb() {
// Optional Callback
}
// Generate INPUT Field form form settings [EMAIL]
function paypal_user_id_html() {
$donate_options = get_option('donate_plugin_options');
echo "<input name='donate_plugin_options[paypal_user_id]' type='email' value='{$donate_options['paypal_user_id']}'/>";
}
// Generate INPUT Field form form settings [RADIO]
function paypal_donation_button_html() {
$donate_options = get_option('donate_plugin_options');
?>
<p>
<label>
<input type='radio' name='donate_plugin_options[button]' value='small' <?php if($donate_options['button'] == 'small') { echo 'checked'; } ?>>
<img src='https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif' alt='small' style='vertical-align: middle;margin-left: 15px;'>
</label>
</p>
<p>
<label>
<input type='radio' name='donate_plugin_options[button]' value='medium' <?php if($donate_options['button'] == 'medium') { echo 'checked'; } ?>>
<img src='https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif' alt='medium' style='vertical-align: middle;margin-left: 15px;'>
</label>
</p>
<p>
<label>
<input type='radio' name='donate_plugin_options[button]' value='large' <?php if($donate_options['button'] == 'large') { echo 'checked'; } ?>>
<img src='https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif' alt='large' style='vertical-align: middle;margin-left: 15px;'></br>
</label>
</p>
<?php
}
// Generate INPUT Field form form settings [DROPDOWN]
function paypal_currency_html() {
$donate_options = get_option('donate_plugin_options');
$currency = array(
'AUD' => 'Australian Dollars (A $)',
'BRL' => 'Brazilian Real',
'CAD' => 'Canadian Dollars (C $)',
'CZK' => 'Czech Koruna',
'DKK' => 'Danish Krone',
'EUR' => 'Euros (€)',
'HKD' => 'Hong Kong Dollar ($)',
'HUF' => 'Hungarian Forint',
'ILS' => 'Israeli New Shekel',
'JPY' => 'Yen (¥)',
'MYR' => 'Malaysian Ringgit',
'MXN' => 'Mexican Peso',
'NOK' => 'Norwegian Krone',
'NZD' => 'New Zealand Dollar ($)',
'PHP' => 'Philippine Peso',
'PLN' => 'Polish Zloty',
'GBP' => 'Pounds Sterling (£)',
'RUB' => 'Russian Ruble',
'SGD' => 'Singapore Dollar ($)',
'SEK' => 'Swedish Krona',
'CHF' => 'Swiss Franc',
'TWD' => 'Taiwan New Dollar',
'THB' => 'Thai Baht',
'TRY' => 'Turkish Lira',
'USD' => 'U.S. Dollars ($)',
);
?>
<select id='currency_code' name='donate_plugin_options[currency]'>
<?php
foreach($currency as $code => $label) :
if( $code == $donate_options['currency'] ) { $selected = "selected='selected'"; } else { $selected = ''; }
echo "<option {$selected} value='{$code}'>{$label}</option>";
endforeach;
?>
</select>
<?php
}
// Register All Settings And And Setting Fields as Used in wordpress
function register_settings_and_fields() {
// $option_group, $option_name, $sanitize_callback
register_setting('donate_plugin_options','donate_plugin_options');
// $id, $title, $callback, $page
add_settings_section('donate_plugin_main_section', 'Main Settings', 'donate_plugin_cb', __FILE__);
// $id, $title, $callback, $page, $section, $args
add_settings_field('paypal_user_id', 'PayPal ID: ', 'paypal_user_id_html', __FILE__, 'donate_plugin_main_section');
// $id, $title, $callback, $page, $section, $args
add_settings_field('button', 'Select Button: ', 'paypal_donation_button_html', __FILE__, 'donate_plugin_main_section');
// $id, $title, $callback, $page, $section, $args
add_settings_field('currency', 'Currency: ', 'paypal_currency_html', __FILE__, 'donate_plugin_main_section');
}
add_action('admin_init', 'register_settings_and_fields');
// Generate HTML of main options page
function options_page_html() {
?>
<div class="wrap">
<h2>Plugin Options</h2>
<form method="post" action="options.php" enctype="multipart/form-data">
<?php
// $option_group
settings_fields( 'donate_plugin_options' );
// $page
do_settings_sections( __FILE__ );
?>
<p class="submit">
<input type="submit" class="button-primary" name="submit" value="Save Changes">
</p>
</form>
</div>
<?php
}
// Admin Menu Action Hook
function options_init() {
// page_title, menu_title, capability, menu_slug, function
add_options_page('Donate Plugin Options', 'Donate Plugin Options', 'administrator', __FILE__, 'options_page_html');
}
add_action('admin_menu', 'options_init');
// Activation Hook. Check if settings exists, if not register defaults.
function donate_activate() {
$defaults = array(
'paypal_user_id' => get_option('admin_email'),
'button' => 'small',
'currency' => 'USD'
);
if(get_option('donate_plugin_options')) return;
add_option( 'donate_plugin_options', $defaults );
}
register_activation_hook( __FILE__, 'donate_activate' );
In Summary
You've now learnt how to develop a totally new plugin, which allows users to donate via PayPal. You can now initialise a plugin, use shortcodes, and add a settings page to your WordPress admin.
In the next - and final - part of this mini series, you'll learn how to write a similar plugin, allowing users to donate using Bitcoins, instead of a conventional currency with PayPal.
If you have any questions, please feel free to leave a comment below, and I'll be sure to help you out!
Comments