How to Create a Genesis Template for iThemes Exchange Invoices

If your small business provides services, such as coaching, design, copy-writing, or even cleaning, you will want to be able to send invoices to clients. You can use Quickbooks or Freshobooks, or Paypal to create invoices.

Now there is also iThemes Exchange, an ecommerce solution for your small business website that offers membership and invoices, as well as physical and digital products. You can accept payment by check or use PayPal or Stripe to accept credit cards. This tutorial will help you set up an invoice template to use with Genesis WordPress themes; I’m using the Genesis Sample 2.0.1 theme.

Brief Installation of Exchange and Invoices Add-on

You can install iThemes Exchange like any other plugin from the WordPress plugins repository when you are logged into the Admin area of your WordPress website. If you need help (and even if you don’t!), iThemes offers short, easy-to-follow videos in their Tutorials section that are really worth watching.

The Invoices Add-on is a premium product (on sale at iThemes until January 31, 2014). Your purchase will be a zipped download that you can upload on your Add New Plugins page. Install and activate it. Then from the WordPress plugins page, under “iThemes Exchange – Invoices Add-on”, click on License to add your iThemes account login. Again, you can watch the iThemes Exchange videos for details.

Then in your WordPress Admin menu, click on Exchange and Add-ons. The settings for any installed Add-ons is on this page; look for the gear icons. There are other free Add-ons that you may want to activate. Also there is a list of all the premium Add-ons under the Get More tab.

Briefly Add an Invoice

The details for adding an invoice are all in the video “Exchange Add-on: Invoices” on the iThemes website. To add an invoice, from your WordPress Admin, click on Exchange and then on either Add Product or Add Invoice; this will depend on what product options you have selected in the Quick Setup page. Then you can add the details of your invoice. You will also need to create a User for the client you are billing.

View the Invoice with the Default Template

Now you can view the invoice. It will look like this using the default Genesis Sample template.

It blends in with the Genesis Sample theme, but there is a lot of text that will be a distraction for the client, so let’s remove it. We can remove the sidebar, the breadcrumbs, the post info, the post meta, and the footer widgets. We can keep the header, navigation, and footer, mostly for branding or anchoring, so clients will know where they are.

If your Genesis child theme has a landing page template (usually called page_landing.php), and you like the way it looks, you could use that instead of creating an invoice template. If you are using the landing page template, you can skip the code sections and go to “How to Use the Invoice Template” below.

The invoice template you are about to create will work for many Genesis child themes. So let’s get started. If you just want the code, it’s available as a GitHub gist – Invoice Template for iThemes Exchange.

Create an Invoice Template for the Genesis Sample Theme

Step 1. Open a text editor like Notepad or Textmate. Save a new file in your Genesis child theme directory, and name it invoice-template.php.

Step 2. At the top of the newly saved invoice-template.php, start it with <?php, and add a Template Name of Exchange Invoice (This name can be whatever you like; it’s the name you will choose when you select the invoice template.)

<?php
/**
 *
 * Template Name: Exchange Invoice
 *
 */

Step 3. You don’t really need to add a custom body class because Exchange already adds single-it_exchange_prod. If you want another body class you can use this to add a body class of gs-exchange-invoice.

// Optional Add a custom body class gs-exchange-invoice on single invoice
add_filter( 'body_class', 'gs_invoice_add_body_class' );
function gs_invoice_add_body_class( $classes ) {
   $classes[] = 'gs-exchange-invoice';
   return $classes;
}

Step 4. Make the invoice template full-width to remove the sidebar.

// Force full width content layout on single invoice
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Step 5. Remove the breadcrumbs.

// Remove the breadcrumbs on single invoice
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

Step 6. Remove the post info.

// Remove post info on single invoice
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );

Step 7. Remove the post meta. Note that normally you would remove the genesis_footer_markup_open and genesis_footer_markup_close, as well, but they are not in the source code for the single invoice when using the default theme, so you don’t need to remove them.

// Remove the entry post meta on single invoice
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

Step 8. If you’re using an author box on your posts, you will want to remove it, as well.

// Optional Remove the author box on single invoice
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );

Step 9. Remove the footer widgets.

// Remove footer widgets on single invoice
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

Step 10. End with genesis()

genesis();

How to Use the Invoice Template

1. You can save invoice-template.php to your Genesis child theme directory.
2. Next you can use FTP to add it to your hosting server in your Genesis child theme folder or see the “Easy Tip to Upload Files” below.
3. Then you can tell Exchange that you’re using your own template. In your WordPress Admin, click Exchange > Add-ons.
4. On the Add-ons page, find the WordPress Page Templates Add-on. Click the gray Disabled button, so that it turns green Enabled.
   
5. Go back to your WordPress Admin. Click on Exchange > All Products. Find your invoice in the Products list and click to edit it.
6. At the bottom of your Edit Invoice page is an Advanced section that now has a Page Template tab with a drop down that probably says “Default Template”.
   
7. Click the drop down and choose Exchange Template (or choose your landing page template or whatever you named your template).
8. Update the invoice and click View Invoice.

Your invoice will look much less distracting now.

Add Some Optional Styles

If you think your invoice is too wide (1140px), you can add some CSS to your style.css, either by editing it directly or in your Custom CSS Editor.
If editing style.css, you can add a new section at the bottom of the Plugins section. This will limit the width of the invoice to 960px which is a nice width for an invoice.

/* iThemes Exchange 
--------------------------------------------- */
.single-it_exchange_prod.full-width-content .entry {
    margin: 0 auto 40px;
    max-width: 960px;
}

If you also think that the red UNPAID box is too large (like I do!), you can also reduce the font size of the PAYMENT value and the UNPAID box. And if you prefer that the pay buttons are smaller than full-width, then you can also reduce the width of the UNPAID and the payment buttons to 50%. If you think they are too small on mobile devices at 50%, you could make them 70% instead.

.it-exchange-invoice-payment-amount .value,
.it-exchange-invoice-payment-status-block {
    font-size: 24px !important;
}

.it-exchange-invoice-payment-amount,
.it-exchange-invoice-payment-status,
.it-exchange-super-widget .payment-methods-wrapper input[type="submit"] {
    width: 50% !important;
}

And if your Description text all runs together, instead of staying on separate lines, as in my example images, you can add this to your style.css or custom css editor.

.it-exchange-invoice-description-block span.value {
	white-space: pre-line;
}

With the extra CSS, the payment section looks like this:

So now you have a nice invoice for billing your small business clients!