• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials E-commerce, Templates

How to Create a Genesis Template for iThemes Exchange Invoices

January 21, 2014 Updated on January 21, 2014 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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.

genesis theme ithemes exchange invoice
Click for larger image

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.

invoice genesiswordpress theme default
Click to enlarge image

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.
    wordpress page templates
  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”.
    custom template selection
  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.

invoice genesis wordpress theme template
Click to enlarge image

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:

smaller invoice payment buttons
Click to enlarge image

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

Easy Tip to Upload Files

There is a WordPress plugin called WP Editor by Benjamin Rojas that you can use to upload the file directly from your WordPress Admin. Install and activate the plugin. You can edit the settings, but the defaults are fine. Click on Appearance > Theme Editor. In the upper right hand corner of the editor make sure your child theme is selected. Then in the Upload Files section, use Choose file to browse to where you saved invoice-template.php and click Upload.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!