Getting Attendee Names on Woocommerce New Order Email with Event Tickets Plus

Attendee name on order for Event Tickets

UPDATE: This has been fixed in the latest version of Event Tickets Plus. You still have to install an extension called Add Attendee Information to Woocommerce Emails.

We have all had that one client. You know who I am talking about. Before I learned to write iron-clad proposals (thank you Troy Dean) I had this year and a half long project.

It drug on because of “Oh one more thing….” The site sold products and “tickets” to classes. The obvious choice was to use Woocommerce and The Events Calendar Pro with Events Ticket Plus. I honestly want to say I love TEC but their support drags on for days if not weeks if you have issues which I always seem to have.

Long story short the biggest and last hurdle ended up being the client wanted the class attendee name in the new order email so he didn’t have to log into the website to see the list of attendees for a given class. Sound simple right? TEC event has an extension that does just this. It is named “Additional Email Options“. However, I couldn’t get it to work. In fact, it caused an error when purchasing non-ticket items.

Undefined variable: quantity in …/wp-content/plugins/event-tickets-plus/src/Tribe/Commerce/WooCommerce/Main.php on line 696

Note: You can’t use any other plugin to control Woocommerce emails and get this to work. (Conditional emails or Pretty emails plugins)  Been there, done that.

After literally over a month trying to work with support to get the Additional Email Options extension to work it never did. Instead, I found another way around it thanks to a post by Simon on The Events Calendar Forum.

 

 

I hope this helps someone else looking for a solution to this problem.

Add The Events Calendar to Another Page

In a recent website redesign project for small business that does mainly in person CPR training we needed to replace paypal buttons with a more professional onsite checkout system.  Since his classes were calendar based (past events automatically fall off the event page) we decided on Woocommerce for his store (75 products) and The Events Calendar with Events Ticket Plus to sell “tickets” to his classes which are limited to 9 students. This involved some customization. Although I knew upfront that The Events Calendar did not use shortcodes and generated the event page as a virtual page it did what I need most of all and that was integrate with woocommerce. The rest I would figure out.

I thought I would share how I did one of the more vexing issues which was to put the class event list on a page underneath the existing content. My client had a SEO rich landing page which generated a lot of his conversions. We need to keep this page and have the events show below the content.

My plan was to utilize the list widget that already existed but I wanted the sidebar lists to just be the class name and the date and time information. I knew I could add the event content so it needed to be conditional to just the page I wanted the information to appear on.

My Plan of Attack:

  1. Copy the files to be edited to my theme folder.
  2. Edit the list-widget.php file to show content conditionally.
  3. Create a custom widget area to appear below the content on the “Open Class” landing page.
  4. Hook that custom widget area to that page.
  5. Add the list widget to the widget area.
  6. Apply any necessary style changes via CSS.

Step by Step Detail

I wanted to share how I did it. (I use Genesis Framework so the hooks mentioned are from Genesis)

1.The first step was to copy the needed files into my theme folder. I created a folder named “tribe-events” in my theme folder. Inside that I created another folder named “widgets” . I copied the file list-widget.php from the plugin folder to the widgets folder I just created via FTP. Whatever changes you make in this file will override the plugin file. See The Events Calendar Themer’s Guide.

2. I opened the list-widget.php file from the tribe-events/widgets folder in my theme folder. Down around line 55 the code ends for the event duration (date and time). I added the code for adding the content along with the code to make it conditional – only show on one page. I still wanted the list widgets in my sidebar to the title and duration only. I showed the code before and after so you can see the placement of the code in context. My code starts on line 4 and ends on line 11.


3. In my themes function.php file I created a widget area.

4. Added a conditional hook to add the widget area to the specific page after the content. This is also in the functions.php file.(97 refers to the page ID). If you are not sure how to do this I suggest you google it or look here.

5. Added the The Events Calendar List Widget to the new sidebar under Appearance > Widgets.

Screen Shot 2016-03-15 at 5.00.33 PM

6. Styled the button with css.

In this case I just needed to add some code to style the link to buy tickets.

Here is the result:

Screen Shot 2016-03-15 at 5.04.25 PM

Rev Up Your Design Cycle With DesktopServer

I always love sharing great programs that allow me to work more efficiently and that is why I chose to present a session on DesktopServer from ServerPress at the 2015 WordCamp Atlanta. Let’s just face it I am a time management control freak. Since I work on multiple projects at any given time I want to either automate or speed up repetitive tasks.

splogoFor the past two years I have kept a “Base Site” in a sub folder of my website. This base site has the latest version of WordPress, all the standard plugins I use, and the Genesis Framework installed. When I needed to spin up a new dev site I would use BackUp Buddy to generate a copy and with that and the install script I would create my dev site in another sub folder or sub domain. This process would take about five minutes including creating a new empty database in the cPanel.

Now five minutes doesn’t sound like a lot of time but times that with the fifty or more dev sites I create in a year. Then add the time to keep the base site up to date plus the theme and additional plugin installs for each site it just keeps adding up. (Infinite WP!!! is a must).

What if I said you can spin up a dev site complete with plugins in seconds and you can work locally even without an internet connection? Enter DesktopServer.

Desktop Server by ServerPress (referral link)  is an application that allows you to host as many WordPress sites as you want directly on your computer. It works by creating a web server environment on your computer that you can access through your web browser. You can host as many WordPress dev sites as you want. This is done through the application called XAMPP that’s bundled with DesktopServer.

I used to use MAMP at times (Windows has WAMP) but not very consistently. I still had to create the database and it really wasn’t a time saver. ServerPress has a nice comparison matrix for the different applications that allow you to run a web server locally.

Installing DesktopServer

Download the program from ServerPress.com. The free limited version allows you to run up to three dev sites and is great for trying some of the features. In this demonstration I will be using the Premium version ($99.95 – 20% off Coupon Code: wcatl15 until the end of April)

It is important to note that if you are running MAMP, WAMP, or any other web server application you must uninstall it (backup your sites and/or databases) before installing DesktopServer.

Mac Users using Mavericks or Yosemite you may get a warning when trying to install DesktopServer similar to the one below:

109831

It is easy to give permission for this to be installed by going to System Preferences > Security & Privacy and clicking Open Anyway.

open-third-party-apps-from-unidentified-developers-mac-os-x

Here is a video covering the installation process:

Installing DesktopServer from melanie adcock on Vimeo.

Creating Your First Dev Site.

  1. Create a new development site.
  2. Give the site a name.
  3. Choose the blueprint (i.e. WordPress)
  4. Choose location (default is the Website folder in your documents – I prefer the Sites folder)
  5. DesktopServer will spin up the dev site.
  6. You will need to finish the WordPress install just like a regular install by giving the site a name, user, and password.

 

DesktopServer Blueprints

The true power of Desktop Server is in the blueprints. Remember I said I kept a base site that I used for dev deployment. Now I can have several sites of blueprints. One for e-commerce, one for blogs, one for churches, etc…I can deploy a dev in seconds containing the themes, plugins, etc I need for that type of site.

Creating A Blueprint

  1. Create the prototype site.
  2. In DesktopServer choose Export, import, or share a website.
  3. Export or deploy a website.
  4. Choose your dev website and your export name.
  5. Leave the default: Export to a website archive (.zip file)
  6. Leave all the database info blank.
  7. Change Output folder to the blueprint folder of DesktopServer (For Mac users this is Applications > XAMPP > Blueprints and for Windows users this is Programs >XAMPPLite > Blueprints) This will allow the blueprints to show in the drop down list when deploying a new site.

Watch the video on creating a blueprint.

Deploying to a LIVE site.

At the time of this writing I have tried this five times with success on four of them. The one that didn’t deploy was large. I ended up using BackupBuddy to deploy but I could have used the quick deploy method.

  1. Install WordPress on Live Site (if needed). If the site is already a WP install back it up prior just in case.
  2. Install the DesktopServer plugin available in the WP repository.
  3. Export the Site from DesktopServer.
  4. In DesktopServer choose Export, import, or share a website.
  5. Export or deploy a website.
  6. Choose your dev website and your export name (the name of the live website).
  7. Select Direct deploy to an existing server.

Importing a Site From Backup Buddy

One of the great side benefits of using ServerPress is importing a backup of a live site to DesktopServer to test updates prior to “pushing the button” on the live site. I put Backup Buddy on all my clients sites to automate backups. I can either take a recent backup or create a new one and download it. I can import this back up into DesktopServer and then go ahead and make plugin or WP updates to see if everything is working. DesktopServer can use backups from Duplicator, BackWP Up, BackUp WordPress, InfiniteWP & ManageWP.

Once I have the copy on DesktopServer I generally keep it just for update testing purposes.

I hope you found this helpful.

Here are the downloads of this presentation:

PDF | Keynote | Powerpoint

Genesis Extender: Customizing Your Child Theme

Genesis has long been know as one of the best developer frameworks. Customizing or creating a Child Theme is easy if you know PHP, HTML, or CSS. Finding a theme that fits 100% of your needs rarely happens. For example: You find the perfect blog theme but your client wants a slider on the homepage or you need four widgets areas across on the homepage instead of three. If you know code you can jump into the functions.php file and the style.css file and make those changes. But how about everyone else? By using Genesis Extender Plugin (affliate link) you can quickly and easily create Custom Widget/Content Areas, Custom Page Templates, and customize CSS with little to no hand coding. The built-in CSS builder tool allows you to see your changes live before you make them. Combine the CSS builder with Firebug and you can change style and save them all in your browser…no FTP needed.

I admit I know CSS, I know HTML, and I can copy and paste functions and code snippets with the best of them but I wanted and NEEDED to do more. I am currently working on a large church website. This church has many satellite campuses. Currently they are all separate WordPress installs but I wanted an integrated solution under one domain without using a WordPress Multi install. I needed to easily change header (logo) images on different campus pages and I needed a custom homepage template for each smaller campus that looked just like the main homepage. I turned to Genesis Extender to this for me.  I could have easily used Dynamik Website Builder as well.

What exactly is the difference between the Dynamik Theme and Genesis Extender Plugin. To put it simply Dynamik Theme is a Genesis Child Theme with all the superpowers of Genesis Extender plus the custom design features. If you own the Genesis Framework and a few child themes (or you are thinking about using Genesis and your CSS skills aren’t where you would like them to be) Dynamik is for you. What if you already own the Developer Pack and have access to all the child themes but just want the ease of customizing what you already own then Genesis Extender may be for you. Of course you could purchase both and cover all the bases which is what I did.

For this WordCamp session we are just going to cover the Genesis Extender Plugin. So, what does Genesis Extender actually do?

The Genesis Framework is excellent but for many it is missing an easy no coding solution for:

  • custom widget or content areas
  • adding custom functions
  • customizing styles
  • front end CSS builder

I’ve included two videos by Cobalt Apps …an Intro to Genesis Extender and a video that explains what it is NOT.

Genesis Extender Plugin Introduction from Cobalt Apps on Vimeo.

Or better yet…what it doesn’t do

 

Let’s Customize….

Rather than make my own videos I’ve included the ones from Cobalt Apps that I found very helpful when learning Genesis Extender.

 

Create a Custom Static Homepage

Genesis Extender EZ Static Homepages from Cobalt Apps on Vimeo.

Adding a Slider to the Home Page

Adding A Home Slider To Your Genesis Child Theme Using Genesis Extender from Cobalt Apps on Vimeo.

Using the Front End CSS Builder

Using The Genesis Extender Front-End CSS Builder (Part 1) from Cobalt Apps on Vimeo.

Using The Genesis Extender Front-End CSS Builder (Part 2) from Cobalt Apps on Vimeo.

Using The Genesis Extender Front-End CSS Builder (Part 3) from Cobalt Apps on Vimeo.

The Power of Labels and Conditionals

Using Custom Templates And Labels To Customize Page Content from Cobalt Apps on Vimeo.

Custom Page Templates

Create A Widgetized Custom Page Template Using Dynamik Or Genesis Extender from Cobalt Apps on Vimeo.

Genesis and More Tag Issue

more tagI wanted to post this because I know there are others out there who may find themselves in the same predicament I did over the weekend. I upgraded a client that was using Studiopress Education Child Theme to Genesis 2.0. It sort of “broke” the front page. At the bottom of the home page is the loop. I had customized the loop (originally using the grid loop code and then grid loop fix by WP Smith to show a specific category. In this instance the Main Blog category.  Although I had originally used the grid loop my client decided he only wanted to use the two featured posts and not the “grid feature” I just changed the code to show that rather than changing the home.php file to a different kind of query.

Once I updated to Genesis 2.0.1 (from 1.9.2) the front page posts no longer stopped at the more tag the client  had set in the post. It worked fine on the blog page but not on the home page. (Client wanted control over where the articles showed “Read More” so in Genesis Theme settings I had it set to show content and the limit set to 0)

In my  hours long search for answers I came across the two part solution (each on a different site)  but wasn’t sure how to implement the more tag fix. I opened a ticket at Studiopress and had my fix by the end of the day thanks to Nick.

Here it is:

 

First I need to add that more tag info I found here to the home.php file:

function education_home_loop_helper() {

echo '<div id="home-featured">';

genesis_widget_area( 'slider', array(

'before' => '<div class="slider widget-area">'

) );

genesis_widget_area( 'intro', array(

'before' => '<div class="intro widget-area"><div class="inner">',
'after' => '<div class="clear"></div></div></div><!-- end .intro -->'

) );

genesis_widget_area( 'featured', array(

'before' => '<div class="featured widget-area"><div class="inner">',
'after' => '<div class="clear"></div></div></div><!-- end .featured -->'

) );

genesis_widget_area( 'call-to-action', array(

'before' => '<div class="call-to-action"><div class="banner-left"></div>',
'after' => '<div class="banner-right"></div></div><!-- end .call-to-action -->'

) );

echo '</div>';

global $more;
 $more = 0;

}

While I was at it I had found how to simplify my code to show my Main Blog category from Bill Erickson’s Article on Customizing the WordPress Query. This was also giving to me by Nick at Studiopress. Instead of exclude I changed it to include instead of exclude.

add_action( 'pre_get_posts', 'be_include_category_from_blog' );
/**
* Include Category from Blog
*
* @author Bill Erickson
* @editor Melanie Adcock
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @param object $query data
*
*/
function be_include_category_from_blog( $query ) {

if( $query->is_main_query() && $query->is_home() ) {
$query->set( 'cat', '4' );
}

}

This went just above the ending genesis(); code.

Giving WordPress Super Powers with Plugins

The-Superman-Syndrome-1600x400As a full-time web designer I have a “go to” list of plugins that I use over and over again. Here are just a few:

All in One Event Calendar – this calendar plugin available at wordpress.org and time.ly has evolved into a pretty nice plugin . It went through some awkward teenage years after being taken over by Time.ly but now it seems to work and play well with others. Newer features included the ability to change colors on most parts without editing css. However, the use of themes allows developers the ability to really customize the different views.

Event Manager – Want an event calendar that does everything? This is it. It is more for events rather than just a basic calendar. But if you need to customize how events are listed this is your plugin. The documentation is very rich and loaded with info.

PowerPress – This is my go to plugin for audio podcasting. I actually prefer it over Sermon Browser for church sites. Very easy to set up and you can submit to iTunes straight from the plugin. It gives you choices of players including html 5. You can do different categories or channels. I’ve even used it on sites just for audio without it being a podcast.

WP UI – Tabs, Accordions, Sliders – I really like this plugin. I was worried that it had been abandoned by its developer. It stopped working correctly after WP 3.5 rolled out. (The spoiler code worked so I just switch my content to that.) It was recently updated fixing a lot of issues. You can even “roll your own theme” using the jQuery Theme Roller. Great for displaying lots of text in a small area.

Text Above Posts on a Blog Page – Genesis

Adding text above posts on a blog page  is actually very easy to do in Genesis regardless of what child theme you use. In fact, I do this for every site I create simply as a convenience for my clients. They don’t know they CAN’T without this but you never know if they will try.

1. Coy the page_blog.php file from the Genesis Theme folder into your child theme folder.

2. Open the copied page_blog.php file in your favorite editor.

3. Add this  line above the genesis();

add_action(‘genesis_loop’, ‘genesis_standard_loop’, 5);

4. Save it and re-upload it.

 

Gravity Form in a Pop-Up (Modal) Box

Sometimes necessity is the mother of invention. Not only did I need a way to have Gravity Forms in a pop-up box but videos, images, and other content as well.

I was creating a new WordPress site for one of my clients (finally), taking them from a static HTML site. This church site had not only podcasts but Vimeo videos they wanted to pop up in a  window just like the static site. I used a simple plug-in called WP Video Lightbox to add the Vimeo Video to a pop up box. I tried the big brother plug-in WP Lightbox Ultimate Plugin but preferred the simple look of the free version. I have used Tips and Trick Wp eStore and Wp eMember plugins so I know the developer is a reliable source. (Note: I don’t mind writing short code and I am their webmaster so it is easy for me to add it as I create the code. )

When I got to adding the sign-up forms to the new site I also wanted the gravity forms to display in a pop up box. I could use the same plugin because it had an iframe option. Here is the overall usage guide.

To open your content inside an iframe:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “wp-video-lightbox” to it (rel=”wp-video-lightbox”).
  3. Change the href of your link so it points to the webpage you want to open.
  4. Then add “?iframe=true” as a parameters in your HREF so wp-video-lightboxknows to open the content in an iframe.
  5. Then add the width and height as parameters in your HREF(&width=100&height=100). Please note that the dimensions can be percent based.
<a href="http://www.apple.com?iframe=true&width=500&height=300"
 rel="wp-video-lightbox[iframes]"> Apple.com</a>

Now came my next issue…the form needed to be on a blank template page – no header, footer, or navigation. Since I use Genesis Framework and its Child themes this was as simple as creating a landing page. A quick Google search led me to Brian Gardner’s post Creating a Landing Page in Genesis. (He removed it in one of his site redesigns)

1. First you need to do is create a blank_form_page.php file, which you’ll place inside your child theme’s folder. Start that off by placing this code at the top of it:

[[code]]czo0NTpcIiZsdDs/cGhwIC8qIFRlbXBsYXRlIE5hbWU6IEJsYW5rIEZvcm0gUGFnZSAqL1wiO3tbJiomXX0=[[/code]]

2. Next you need to add a custom class in case you need it for styling.

// Add custom body class to the head
add_filter('body_class', 'add_body_class' );
function add_body_class( $classes ) { $classes[] = 'custom-form-page'; return $classes; }

3. Now add the function to remove the header, navigation, breadcrumbs, the footer, and the loop.

// Remove header, navigation, breadcrumbs, footer widgets, footer
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs');
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

genesis();

4. Save and upload the file to your Genesis Child Theme folder.

5. Create your Gravity Form and add it to the page. Select the template “Blank Form Page” and save it.

6. Go to the page or post you want the form to pop up from.

7. Create the link text to the form page.

8. Go to HTML view and add the parameters in the link like the example above.

Hope this helps other Genesis users who also use Gravity Forms.