Tools | Wordpress Plugins

These plugins are designed to help non-profit organization raise funds for their daily operations, special campaigns, and special events. They are installed through the Wordpress administration menus, but the Buy-a-Brick plugin requires additional modifications to the theme files as well as basic knowledge of the PHP back end of Wordpress. I recommend that only experienced users use this plugin. Alternatively, you may contact me for questions about either of these plugins if you are experiencing difficulties.

XML Editor:

Description:

This plugin adds an XML editor to the Wordpress administration menu. It takes in an XML file you have created externally, parses it, and displays it within Wordpress as a form for editing and re-saving. The intended use of this plugin is as a method for specifying information about fundraising that then gets displayed elsewhere in the Wordpress site. Some examples of how this plugin have been used are dynamic Flash movies and the Buy-a-Brick plugin (see below).

Installation:

Install the plugin as normal through the Wordpress administration menus.

Use:

The plugin adds two new sub-menus to the Wordpress administration page, one located within the "Plugins" menu and the other located within the "Tools" menu. To use the plugin:
  1. Select "Plugins", then "XML Editor Options".
  2. Set the path and the filename of the XML file you wish to edit. If you do not have root access to your server, ask your system administrator to upload the XML file. Remember to mind your slashes when specifying the path to the XML file.
  3. Click "Save Changes" to update the path to the XML file.
  4. Select "Tools" then "XML Editor".
  5. The plugin will load the XML file if you have correctly specified the path to it. If the plugin displays a "Cannot load file" message, first check the path to the XML file. If you have correctly specified the path but the plugin still displays a "Cannot load file" message, check the permissions on the XML file to make sure Wordpress can open it.
  6. When everything is configured correctly, the plugin will load the file and display its contents as a form for editing.
  7. When you are done editing the file by entering information in the form fields, click the "Submit Query" button to re-save the XML file.

Download XML Editor


Buy-a-Brick:

See the Buy-a-Brick demo here

Description:

This plugin loads an XML file specifying different "bricks" used to make up a fundraising image map. The plugin parses this file and displays the data in the admin tools menu as a form for editing as bricks are purchased. Once edited, the plugin saves the edited file to the original location, overwriting the original file. The plugin then uses this XML file to dynamically create a CSS image map displaying the current fundraising status on any Wordpress page or post. This plugin requires the use of another Wordpress plugin that allow the execution of PHP code in pages or posts. All testing was performed with Exec-PHP, but this is only one example of such a plugin.

Installation:

  1. Create a fund-raising image sprite consisting of the fund-raising image you wish to use and another version of the image above it with opacity applied. For example:

    Write down the width and height of the UNDARKENED image only (i.e., the bottom half of the image). Mine was 480px wide and 500px high.
  2. Create a button image that will pop up when the user mouses over the image map. For example:

    Write down the width and height of this image. Mine was 160px x 20px. I suggest a PNG image with transparency if you would like to use rounded corners on the popup image, as I have here.
  3. Create the XML file that will be read by the Buy-a-Brick plugin. If you will be linking to Paypal from your image map, you must use the code santizer form. Please view the tutorial video to help you. The XML file you create must have the following structure:

    <?xml version="1.0" encoding="utf-8"?> 
    
    <bricks> 
    
    <item id="item-id" product_name="message-that-appears-in-popup" link_brick="url-that-popup-links-to" width="width-of-this-brick" height="height-of-this-brick" top="upper-bound-of-this-brick" left="left-location-of-this-brick" type="2-if-purchased-1-otherwise" raised="total-raised-so-far-first-item-only" />
    
    </bricks>
    

    Below is an example file. It is included in the buyabrick.zip file.

    <?xml version="1.0" encoding="utf-8"?> 
    
    <bricks> 
    
    <item id="mc1" product_name="Purchase your Brick now $5000" link_brick="http://www.yoursite.org/store/products-page/bricks/bricks4" width="99" height="49" top="0" left="0" type="1" raised="$ 3.700.00"/>
    
    <item id="mc2" product_name="Mr. Testing Bricks" link_brick="http://www.yoursite.org/store/products-page/bricks/bricks4" width="99" height="49" top="0" left="100" type="2" />
    
    <item id="mc3" product_name="Purchase your Brick now $5000" link_brick="http://www.yoursite.org/store/products-page/bricks/bricks4" width="99" height="49" top="50" left="0" type="1" /> 
    
    <item id="mc4" product_name="Mrs. Testing Bricks" link_brick="http://www.yoursite.org/store/products-page/bricks/bricks4" width="99" height="49" top="0" left="200" type="2" />
    
    </bricks>
    

  4. Modify the brickstatic.css file included in the plugin .zip file as necessary to match your popup image. CSS attributes editable in this file include:
    • Drop shadow on the popup image
    • CSS radius on the popup image labels
    • Padding of text in popup labels
    • Colors of active and visited links text in popup labels
    • Font characteristics of popup labels, including size, style, and color
    but of course you can add whatever CSS properties you wish to this file.
  5. Replace the existing CSS file in the .zip file with the file you edited.
  6. Upload the fund-raising image sprite and the popup image to the site and write down the full paths to these files.
  7. Upload the XML file you created in step 3 to your server. If you do not have root access to your server, ask your system administrator to upload the XML file. Remember to mind your slashes when specifying the path to the XML file. Write down the full path to this file.
  8. Install and activate the Buy-a-brick plugin as normal through the Wordpress administration menus. Note that the XML Editor plugin above cannot be used simultaneously with the Buy-a-Brick plugin. You must uninstall the XML Editor plugin if you wish to use Buy-a-Brick, and vice versa.
  9. Select the Buy-a-Brick Options under the Settings admin menu and fill out the form with the correct information, using the information you wrote down in steps 6 and 7. If you are linking to Paypal, you must enter the link returned from the "Options" section of the Code Sanitizer.
  10. Install, activate, and configure exec-PHP or another plugin that allows the execution of PHP code in Wordpress posts and pages.
  11. Edit the header.php file for the Wordpress theme you are using. Add the following lines somewhere above the </head> tag:

    <link type="text/css" href="<?php echo home_url().'/wp-content/plugins/buy-a-brick/brickstatic.css'; ?>" rel="stylesheet" media="screen">
    

    <?php 
    	if (is_page('[PAGE_SLUG]')) {
                require_once(ABSPATH.'wp-content/plugins/buy-a-brick/buyabrick-header.php');
            } 
    ?>
    

    where [PAGE_SLUG] is the slug of the page you wish the image map to appear on. You can also use any of the other conditional tags in Wordpress if you want the image map to appear elsewhere in the site (with a specific page template, in a post, etc.). See the Wordpress conditional tags Codex page for more information.
  12. In the page, post, etc. where you want the image map to appear, add the following code:

    <?php
    	require_once(ABSPATH.'/wp-content/plugins/buy-a-brick/buyabrick-page.php'); 
    ?>
    
The image map should appear. If it does not or it looks incorrect, check the steps above and carefully check for syntax errors in your code (wrong quotation marks, missing brackets, etc.). You may also contact me if you are experimenting difficulties getting the plugin to work.

Use:

The plugin adds two new sub-menus to the Wordpress administration page, one located within the "Plugins" menu and the other located within the "Tools" menu. To use the plugin:
  1. Select "Tools" then "Buy-a-Brick Editor".
  2. The plugin will load the XML file if you have correctly specified the path to it. If the plugin displays a "Cannot load file" message, first check the path to the XML file. If you have correctly specified the path but the plugin still displays a "Cannot load file" message, check the permissions on the XML file to make sure Wordpress can open it.
  3. When everything is configured correctly, the plugin will load the file and display its contents as a form for editing.
  4. When you are done editing the file by entering information in the form fields, click the "Submit Query" button to re-save the XML file. The changes will be reflected the next time you reload the page containing the image map.

Download Buy-a-Brick