How to Fully Integrate Your WordPress Themes with the Easy Digital Downloads Plugin

easy-digital-downloads-dudeIntegrating a WordPress theme with Easy Digital Downloads is not a super difficult task but if you’re not familiar with the theme building process, it can get kind of complicated on you without a crazy amount of documentation to help.

For those of you who’d like a head start, I’ve already done the complete integration for you in Underscores for Easy Digital Downloads. Which, of course, is the Underscores (_s) starter theme by Automattic already prepared to handle EDD.

For you rockstars who’d like to do it on your own, I’m creating this guide to help you get the job done. Here’s what we’re going to create:

  1. a single download template
  2. an EDD page sidebar (default sidebar fallback)
  3. a Store Front page template
  4. download category and tag templates
  5. optional page templates for EDD default pages
  6. a members area
  7. Bonus: customizer options to control EDD elements

All of my example code will be based on Underscores. I will also be using the text domain “bwpy” for translations. Be sure to update that with your theme’s text domain if it’s for distribution.

Keep in mind that we’re not styling anything here. I’m not your designer. So if you’re looking for EDD ready themes, you should be here instead.

That said, let’s get it crackin’.

Single Download Template

We’ll start simple. Single downloads are very similar to single posts. So we won’t overthink it. If your theme has a single.php template, there is absolutely nothing wrong with making a duplicate of that template and naming it single-download.php.

If you’re starting from Underscores, which is my favorite starting point, here’s what you’ll end up with inside of your new file.

<?php
/**
 * The Template for displaying all single posts
 */
get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		<?php while ( have_posts() ) : the_post(); ?>

			<?php get_template_part( 'content', 'single' ); ?>

			<?php _s_post_nav(); ?>

			<?php
				// If comments are open or we have at least one comment, load up the comment template
				if ( comments_open() || '0' != get_comments_number() ) :
					comments_template();
				endif;
			?>

		<?php endwhile; // end of the loop. ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

You’ll notice that a few of the details are still specific to single posts. We’ll need to tweak it for downloads.

First, change the top comment to reflect the new template. It currently references single posts and it needs to reference single downloads.

Second, move on down to the get_template_part() function. If you have no clue what that function does (and you’re building or aggressively editing WordPress themes) you need to go read my article article about theme file organization. This is important.

Getting back to our template, you’ll notice that the name and slug parameters of the get_template_part() function reference a file called content-single.php. That file is responsible for the single post output. We don’t want that anymore. We want to change “single” to “download” so we can reference content-download.php… which doesn’t exist.

Yes, you guessed it. You’ll want to go ahead and make a duplicate of your content-single.php file and change its name to content-download.php. From there, as your theme starts to come together, you’re free to go in there and edit anything you’d like for your single download content output.

The last thing we want to do in our single-download.php template is on the second to last line – the call for our sidebar. Currently, get_sidebar() is used to search the theme root for sidebar.php. We can make it search for another sidebar file, though, and that’ll be our EDD specific sidebar.

Give the function a parameter (string in single quotes) that will be appended to the file name like so get_sidebar( 'edd' ). With that in place, our download template will now search for sidebar-edd.php to load its sidebar.

Now that we’re done with the single download template, let’s go ahead and register the EDD sidebar and create that file we just referenced.

EDD-specific Sidebar

To register the sidebar, you’ll want to do it the same way your theme registered the main sidebar. That’s usually done in the functions.php file. That’s the case if you’re using Underscores.

The following code will register a new sidebar when hooked in the widgets_init action.

register_sidebar( array(
	'name'          => __( 'EDD Sidebar', 'bwpy' ),
	'id'            => 'sidebar-edd',
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget'  => '</aside>',
	'before_title'  => '<h4 class="widget-title">',
	'after_title'   => '</h4>',
) );

Customize those details however you want them. Just make sure the ID is sidebar-edd if you’re pulling code directly form this article.

Moving on, like we’ve done a couple of times already, let’s duplicate our sidebar.php file. We’ll rename it sidebar-edd.php and open it up. Here’s what you’re starting with if you use Underscores.

<?php
/**
 * The Sidebar containing the main widget areas
 */
?>
<div id="secondary" class="widget-area" role="complementary">
	<?php do_action( 'before_sidebar' ); ?>
	<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

		<aside id="search" class="widget widget_search">
			<?php get_search_form(); ?>
		</aside>

		<aside id="archives" class="widget">
			<h1 class="widget-title"><?php _e( 'Archives', '_s' ); ?></h1>
			<ul>
				<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
			</ul>
		</aside>

		<aside id="meta" class="widget">
			<h1 class="widget-title"><?php _e( 'Meta', '_s' ); ?></h1>
			<ul>
				<?php wp_register(); ?>
				<li><?php wp_loginout(); ?></li>
				<?php wp_meta(); ?>
			</ul>
		</aside>

	<?php endif; // end sidebar widget area ?>
</div><!-- #secondary -->

Again, change the top comment to reference the EDD sidebar, not the main sidebar.

The last thing we need to do in this file is a little tricky but not hard at all. We’re going to use the is_active_sidebar() conditional tag to load the EDD sidebar widgets only if there are any. If not, we’ll load the main sidebar widgets including its defaults.

Follow along with me…

Step 1 – Create a new line directly below <?php do_action( 'before_sidebar' ); ?> and that’s where we’ll start our conditional to check as see if the EDD sidebar has widgets. Add the following line.

<?php if ( is_active_sidebar( 'sidebar-edd' ) ) : ?>

Step 2 – If the condition is met, meaning the EDD sidebar has widgets, output the sidebar. To do so, this needs to be your very next line of code…

<?php dynamic_sidebar( 'sidebar-edd' ); ?>

Step 3 – There’s a chance that the EDD sidebar has no widgets. If that’s the case, we need to do something else. So add the following line of code on the next line…

<?php else : ?>

Step 4 – The “else” we’re going to be doing here is loading the main sidebar and its default widget placeholders. Guess what, though… that code is already in place considering you copied this file from the original sidebar file. So leave the entire sidebar-1 conditional how it is…

<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

	<aside id="search" class="widget widget_search">
		<?php get_search_form(); ?>
	</aside>

	<aside id="archives" class="widget">
		<h1 class="widget-title"><?php _e( 'Archives', '_s' ); ?></h1>
		<ul>
			<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
		</ul>
	</aside>

	<aside id="meta" class="widget">
		<h1 class="widget-title"><?php _e( 'Meta', '_s' ); ?></h1>
		<ul>
			<?php wp_register(); ?>
			<li><?php wp_loginout(); ?></li>
			<?php wp_meta(); ?>
		</ul>
	</aside>

<?php endif; // end sidebar widget area ?>

Step 5 – Take note that the above code is still inside of our new conditional under the else clause. So we need to close that up. Directly beneath the closing of the sidebar-1 conditional, we’ll close our main conditional like so…

<?php endif; ?>

Final Result – With all of that in place, we end up with the following sidebar-edd.php template…

<?php
/**
 * The Sidebar containing the EDD widget areas
 */
?>
<div id="secondary" class="widget-area" role="complementary">
	<?php do_action( 'before_sidebar' ); ?>
	<?php if ( is_active_sidebar( 'sidebar-edd' ) ) : ?>
		<?php dynamic_sidebar( 'sidebar-edd' ); ?>
	<?php else : ?>
		<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

			<aside id="search" class="widget widget_search">
				<?php get_search_form(); ?>
			</aside>

			<aside id="archives" class="widget">
				<h1 class="widget-title"><?php _e( 'Archives', '_s' ); ?></h1>
				<ul>
					<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
				</ul>
			</aside>

			<aside id="meta" class="widget">
				<h1 class="widget-title"><?php _e( 'Meta', '_s' ); ?></h1>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<?php wp_meta(); ?>
				</ul>
			</aside>

		<?php endif; // end sidebar widget area ?>
	<?php endif; ?>
</div><!-- #secondary -->

Functionality and flexibility meet in one place to deliver the exact content you want displayed in your EDD sidebars. Good stuff. Now we can use this sidebar for other templates.

Downloads Store Front Template

This is one of the most popular parts of an EDD-ready theme. A grid-style display of all downloads presented as a store front just makes sense.

To create ours, we’re going to ditch all of the WordPress template files and make our own template that can be selected from the Page Attributes -> Template option when creating a new WordPress Page.

What you’ll want to do is create a brand new file in either the root of your theme or one directory deep… that’s all the depth you get. Call it something like edd-store-front.php.

In that file, the top comment block must include the following line.

<?php
/**
 * Template Name: EDD Store Front
 */

“Template Name:” is the important part. What you name it is up to you.

All it takes is having that file in the root of your theme (or one directory deep) for your new selection to appear when creating a new Page. You’d create this Page with the title and slug of your choice (usually, “store” for both is good), select the new template, and publish.

Viewing this page results in a blank white screen… also known as a playground! This is where we’ll build the page out to include our store front.

Back in the file, we want to make sure we build out a header and a footer. Thanks to WordPress’ simple way of doing this, it’s quite easy. We also want to include a few variables we’ll use on our store front code.

<?php
/**
 * Template Name: EDD Store Front
 */
$store_page_setting = (is_front_page() && is_page_template('edd-store-front.php') ? 'page' : 'paged' );
$current_page = get_query_var( $store_page_setting );
$per_page = intval( get_theme_mod( 'bwpy_store_front_count', 9 ) );
$offset = $current_page > 0 ? $per_page * ( $current_page-1 ) : 0;
$product_args = array(
	'post_type'		=> 'download',
	'posts_per_page'	=> $per_page,
	'offset'		=> $offset
);
$products = new WP_Query( $product_args );

get_header(); ?>

<?php get_footer(); ?>

Consider that a frame. With the header and footer files loaded, all of the important theme components are in place. Likewise, a few important variables we’ll need to use in our store code are now in place. We’ll discuss those shortly.

Now all we have to do is build the store in between the header and footer elements.

To do so, we’ll use EDD’s example to get us started. However, I’ve got a few simple tweaks that’ll make it even better. So let’s run with this instead.

In the following code, we’ve added the store code to what we already had.

<?php
/**
 * Template Name: EDD Store Front
 */
$store_page_setting = (is_front_page() && is_page_template('edd-store-front.php') ? 'page' : 'paged' );
$current_page = get_query_var( $store_page_setting );
$per_page = intval( get_theme_mod( 'bwpy_store_front_count', 9 ) );
$offset = $current_page > 0 ? $per_page * ( $current_page-1 ) : 0;
$product_args = array(
	'post_type'		=> 'download',
	'posts_per_page'	=> $per_page,
	'offset'		=> $offset
);
$products = new WP_Query( $product_args );

get_header(); ?>

<div id="edd-grid" class="content-area">
	<div id="store-front">
	<?php if ( $products->have_posts() ) : $i = 1; ?>
		<div class="store-info">
			<?php if ( get_theme_mod( 'bwpy_edd_store_archives_title' ) ) : ?>
				<h1 class="store-title"><?php echo get_theme_mod( 'bwpy_edd_store_archives_title' ); ?></h1>
			<?php endif; ?>
			<?php if ( get_theme_mod( 'bwpy_edd_store_archives_description' ) ) : ?>
				<div class="store-description">
					<?php echo wpautop( get_theme_mod( 'bwpy_edd_store_archives_description' ) ); ?>
				</div>
			<?php endif; ?>
		</div>
		<div class="product-grid clear">
			<?php while ( $products->have_posts() ) : $products->the_post(); ?>
				
				<div class="threecol product">
					<div class="product-image">
						<?php if ( has_post_thumbnail() ) { ?>
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'product-img' ); ?>
							</a>
						<?php } ?>
					</div>
					<div class="product-description">
						<a class="product-title" href="<?php the_permalink(); ?>">
							<?php the_title( '<h3>', '</h3>' ); ?>
						</a>
						<?php if ( get_theme_mod( 'bwpy_download_description' ) != 1 ) : // show downloads description? ?>
							<div class="product-info">
								<?php the_excerpt(); ?>
							</div>
						<?php endif; ?>
						<?php if ( get_theme_mod( 'bwpy_product_view_details' ) ) : ?>
							<a class="view-details" href="<?php the_permalink(); ?>"><?php echo get_theme_mod( 'bwpy_product_view_details' ); ?></a>
						<?php endif; ?>
					</div>
				</div>
	
				<?php $i+=1; ?>
			<?php endwhile; ?>
		</div>			
		<div class="store-pagination">
			<?php 					
				$big = 999999999; // need an unlikely intege					
				echo paginate_links( array(
					'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
					'format' => '?paged=%#%',
					'current' => max( 1, $current_page ),
					'total' => $products->max_num_pages
				) );
			?>
		</div>
	<?php else : ?>
	
		<h2 class="center"><?php _e( 'Not Found', 'bwpy' ); ?></h2>
		<p class="center"><?php _e( 'Sorry, but you are looking for something that isn\'t here.', 'bwpy' ); ?></p>
		<?php get_search_form(); ?>
	
	<?php endif; ?>
	</div>
</div>

<?php get_footer(); ?>

With that saved in our template, refreshing the store page should result in a vertical list of EDD downloads to a maximum number of nine items, at which point pagination will appear to link to subsequent pages of the same.

If your WordPress site has no downloads created, a message will display saying there’s nothing to be found.

Some things may be missing because our code includes conditionals based on the get_theme_mod() functions you see all over the place. Don’t worry. We’ll be creating options later on that will bring it all together.

Though we’re calling this a grid, it’s not. It’s not a grid until you turn it into one with your CSS ninja skills. That means it doesn’t have to be a grid at all. Use and adjust the CSS classes to your liking and make your store front whatever you’d like it to be.

Getting back up to those variables at the top of the file, there are a few details we must discuss. Let’s look at them one by one.

$store_page_setting = (is_front_page() && is_page_template('edd-store-front.php') ? 'page' : 'paged' );

This code checks to see if the your store front is set as the WordPress front page or not. If it is, “page” gets set equal to the $store_page_setting variable. If not, “paged” is the value. Without this in place pagination will only work properly in one scenario or the other.

Also note that the is_page_template('edd-store-front.php') condition takes a string that is an exact match to the template’s file name. So if you chose a different name, make sure your code reflects that. Likewise, if you chose to put your template in directory, that must be reflected as well. An example would be…

is_page_template('directory_name/new-file-name.php')

We’ll be using that $store_page_setting variable very soon. Let’s move on to the next.

$current_page = get_query_var( $store_page_setting );

We’ve used it! Again, pagination working properly depends on the difference between “page” and “paged” based on whether or not the store front is the WordPress front page.

$per_page = intval( get_theme_mod( 'bwpy_store_front_count', 9 ) );

How many store items do you want to display on each page? What’s the default? That’s what we’re setting equal to a variable here. The default value is 9. However, we’re using get_theme_mod to output a value created in the WordPress customizer… a value named bwpy_store_front_count which we’ll create later in this tutorial.

$offset = $current_page > 0 ? $per_page * ( $current_page-1 ) : 0;

Variable changes we’ve set above are being put to use heavily, once again for pagination to do its thing properly.

Lastly, we adjusted the query responsible for retrieving all of our downloads in order to make this store front. And again, our variables are being put to use here.

$product_args = array(
	'post_type'		=> 'download',
	'posts_per_page'	=> $per_page,
	'offset'		=> $offset
);
$products = new WP_Query( $product_args );

The $products variable is the part of this code that gets used in conjunction with our downloads loop to retrieve the correct data from the database.

If for any reason you didn’t simply want to collect downloads in pages of 9 from the database, you’d want to adjust the $product_args array based on WP_Query parameters. If I’m speaking another language, it means you don’t have to worry about this.

That’s it! Your store is created, properly displaying information, and ready to handle the options we’ll be building later on.

Download Category and Tag Templates

We’re discussing this now because these templates should look just like the store front. There’s no reason for them not to considering they will display nothing but downloads just like the store.

The first and most important step is letting WordPress know that these templates exist for your custom post type, which is what downloads are. WordPress will recognize these files by their names, so we can’t get this part wrong.

Downloads Category Templatetaxonomy-download_category.php

Downloads Tag Templatetaxonomy-download_tag.php

These two files need to be created in the root of your theme. WordPress will be searching for them by default when category or tag pages are called for downloads.

The contents of these files can be almost identical. The only different would be the comment block details if you choose to have that.

<?php
/**
 * download category template
 */
get_header();
get_template_part( 'content', 'download-taxonomy' );
get_footer();

and…

<?php
/**
 * download tag template
 */
get_header();
get_template_part( 'content', 'download-taxonomy' );
get_footer();

Again, using get_template_part() just like you did in single-download.php, we’ve specified where the output of these two templates should come from.

Remembering that we use get_template_part() to better organize our theme files, the key detail here is that our two taxonomy templates can share the same exact code to display the downloads. So there’s no need to put our code in separate files that will both need editing if you decided to make a change to one.

Based on get_template_part() name and slug, you know that this file will be named content-download-taxonomy.php in your theme root.

Yes, this file will include a grid that is very similar to the store front grid. However, they cannot share the same query arguments… that’s why the store front page template needs to have its own grid. Know, though, that if you want the taxonomy pages to look just like the store front, edits will need to be made in both files every time. Two files to deal with is still better than three, right?

With our content-download-taxonomy.php created in the root of the theme, or wherever you chose to put it based on the name and slug of your get_template_part() function, you’ll include the following code.

<div id="edd-grid" class="content-area">
	<div id="store-front">
	<?php if ( have_posts() ) : $i = 1; ?>
		<div class="store-info">
			<?php if ( get_theme_mod( 'bwpy_edd_store_archives_title' ) ) : ?>
				<h1 class="store-title"><?php echo get_theme_mod( 'bwpy_edd_store_archives_title' ); ?></h1>
			<?php endif; ?>
			<?php if ( get_theme_mod( 'bwpy_edd_store_archives_description' ) ) : ?>
				<div class="store-description">
					<?php echo wpautop( get_theme_mod( 'bwpy_edd_store_archives_description' ) ); ?>
				</div>
			<?php endif; ?>
		</div>
		<div class="product-grid clear">
			<?php while ( have_posts() ) : the_post(); ?>
				
				<div class="threecol product">
					<div class="product-image">
						<?php if ( has_post_thumbnail() ) { ?>
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'product-img' ); ?>
							</a>
						<?php } ?>
					</div>
					<div class="product-description">
						<a class="product-title" href="<?php the_permalink(); ?>">
							<?php the_title( '<h3>', '</h3>' ); ?>
						</a>
						<?php if ( get_theme_mod( 'bwpy_download_description' ) != 1 ) : // show downloads description? ?>
							<div class="product-info">
								<?php the_excerpt(); ?>
							</div>
						<?php endif; ?>
						<?php if ( get_theme_mod( 'bwpy_product_view_details' ) ) : ?>
							<a class="view-details" href="<?php the_permalink(); ?>"><?php echo get_theme_mod( 'bwpy_product_view_details' ); ?></a>
						<?php endif; ?>
					</div>
				</div>
	
				<?php $i+=1; ?>
			<?php endwhile; ?>
		</div>			
		<div class="store-pagination">
			<?php 					
				$big = 999999999; // need an unlikely intege					
				echo paginate_links( array(
					'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
					'format' => '?paged=%#%',
					'current' => max( 1, $current_page ),
					'total' => $wp_query->max_num_pages
				) );
			?>
		</div>
	<?php else : ?>
	
		<h2 class="center"><?php _e( 'Not Found', 'bwpy' ); ?></h2>
		<p class="center"><?php _e( 'Sorry, but you are looking for something that isn\'t here.', 'bwpy' ); ?></p>
		<?php get_search_form(); ?>
	
	<?php endif; ?>
	</div>
</div>

There are only a couple of simple changes made to this template from the store front template. Basically, the product arguments have been removed now that we’re dealing with default WordPress functionality in the query. That situation also allows us to get rid of the massive amount of variables required before.

Remember you could include that code in the two download taxonomy templates if you wanted to. But it creates more code than necessary and makes maintenance a lot harder.

That’s it. Your downloads now have category and tag templates just like a store front. Moving on.

Additional EDD Page Templates

When you install Easy Digital Downloads, a few default pages are created for you. A checkout page, success page, and transaction failed page.

These are simple WordPress pages that come with content already in them, two of which are EDD shortcodes.

These pages are ready to be used exactly how they there. You don’t have to do anything special for them. However, we’re special developers.

Remember the EDD sidebar we created earlier? Let’s use it on our EDD pages too, that way when we’re on any site page related to EDD, we can create that true feeling of it being a separate section of a bigger website.

Approaching things in an intelligent manner, once again, there’s no need to start from scratch with our new template. There are two things we already know here.

  1. We’re dealing with WordPress Pages
  2. We can create Page Template files for selection with new pages

So as you may have guessed, we’re going to be creating another Page Template that can be selected when editing our default EDD pages.

In the root of your theme (or, again, one directory deep), create a file named edd-page-template.php or something similar. What we’re doing here is creating one generic template file that can be used for many pages.

If your theme is going to really go all out and customize each page with a different style and structure, there is absolutely nothing wrong with creating a separate page template file for each EDD page.

Again, the comment block in this file must reflect the name of our template for WordPress to recognize it. After that, most everything will look just like it does for regular pages because we’re just copying the contents of the page.php file, for the most part.

<?php
/**
 * Template Name: EDD Page Template
 */
get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

			<?php endwhile; // end of the loop. ?>

		</main>
	</div>

<?php get_sidebar( 'edd' ); ?>
<?php get_footer(); ?>

Notice two things here. First of all, I removed the call to the comments template. I simply can’t imagine a reason why these pages should entertain any type of discussion, even if the rest of your theme allows for comments on pages.

Secondly, the get_sidebar() call now reflects our EDD sidebar instead of the default sidebar. It’ll call the sidebar-edd.php file we created earlier with our conditional in it.

I sometimes don’t want a sidebar on my EDD pages… or maybe just my checkout page. This is where some of you may decide not to include a sidebar at all. Or maybe you’ll create another template specifically for the checkout page (or any specific page template you’d like) that doesn’t include a sidebar while the other ones do. Do what makes sense for your theme.

Creating page templates for your EDD pages that include the EDD sidebar is that easy. I have one last tip for you, though.

Considering the store front, download taxonomies, and generic EDD pages are somewhat special, you many want to style things differently on them than on regular site pages. Adding a body class for those pages is a great way to make that happen.

Use the following code in your functions file (tweak it to reflect your details) to add the body classes.

function bwpy_body_classes( $classes ) {
		
	if ( is_page_template( 'edd-store-front.php' ) ) :		
		$classes[] = 'edd-store-front';		
	elseif ( is_page_template( 'edd-page-template.php' ) ) :		
		$classes[] = 'edd-page-template';				
	endif;
		
	return $classes;
}
add_filter( 'body_class', 'bwpy_body_classes');

That’s a really slimmed down version of what your code could look like. But you can extend that conditional as far as you need to based on what kind of flexibility you build into your theme.

With all of that in place, your theme is more than ready to handle EDD.

One more page you may want to add that doesn’t get created by default is a members page. In it, you should include at least the [purchase_history] and [edd_profile_editor] shortcodes and set the page up to use the generic EDD template. That page will serve as a “profile” of sorts for your customers to use as long as you’ve required users to create accounts to purchase your downloads.

That’s really all you need, folks. There are plenty of other things you can do to make your theme play very nice with EDD. But what we’ve done here is much more than the minimum and more than enough to call your theme EDD compatible.

Bonus: Customizer Options for EDD

Throughout this tutorial, we’ve been using code that includes the get_theme_mod() function. If you don’t know what that is, you need to go read up on the WordPress Customizer.

We’ve been setting the theme up for options that we now have to create. So let’s do that.

Here, I’m going to share the code necessary to create the section, settings, and controls for your EDD options. Where to place that code is based on your understanding of setting up the customizer. It belongs inside of your customizer function. So, again, understand that first before using this code.

First, we need to do just a little bit of setup of for one of our options that’ll use a textarea to take user data. That’s not native customizer behavior so we need to extend a class.

Directly inside of your customizer function, include the following code.

/** ===============
 * Extends CONTROLS class to add textarea
 */
class bwpy_customize_textarea_control extends WP_Customize_Control {
	public $type = 'textarea';
	public function render_content() { ?>

	<label>
		<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
		<textarea rows="5" style="width:98%;" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
	</label>

	<?php }
}

Now with that in place, also add the following code that’ll actually create the EDD section, settings, and controls… one of which will use our extended class.

/** ===============
 * Easy Digital Downloads Options
 */
// only if EDD is activated
if ( class_exists( 'Easy_Digital_Downloads' ) ) {
	$wp_customize->add_section( 'bwpy_edd_options', array(
    		'title'       	=> __( 'Easy Digital Downloads', 'bwpy' ),
		'description' 	=> __( 'All other EDD options are under Dashboard => Downloads. If you deactivate EDD, these options will no longer appear.', 'bwpy' ),
		'priority'   	=> 30,
	) );
	// store front/downloads archive headline
	$wp_customize->add_setting( 'bwpy_edd_store_archives_title', array( 'default' => null ) );
	$wp_customize->add_control( 'bwpy_edd_store_archives_title', array(
		'label'		=> __( 'Store Front Main Title', 'bwpy' ),
		'section'	=> 'bwpy_edd_options',
		'settings'	=> 'bwpy_edd_store_archives_title',
		'priority'	=> 10,
	) );
	// store front/downloads archive description
	$wp_customize->add_setting( 'bwpy_edd_store_archives_description', array( 'default' => null ) );
	$wp_customize->add_control( new bwpy_customize_textarea_control( $wp_customize, 'bwpy_edd_store_archives_description', array(
		'label'		=> __( 'Store Front Description', 'bwpy' ),
		'section'	=> 'bwpy_edd_options',
		'settings'	=> 'bwpy_edd_store_archives_description',
		'priority'	=> 20,
	) ) );
	// hide download description (excerpt)?
	$wp_customize->add_setting( 'bwpy_download_description', array( 'default' => 0 ) );
	$wp_customize->add_control( 'bwpy_download_description', array(
		'label'		=> __( 'Hide Download Description', 'bwpy' ),
		'section'	=> 'bwpy_edd_options',
		'priority'	=> 30,
		'type'      => 'checkbox',
	) );
	//  view details link
	$wp_customize->add_setting( 'bwpy_product_view_details', array( 'default' => __( 'View Details', 'bwpy' ) ) );
	$wp_customize->add_control( 'bwpy_product_view_details', array(
	    	'label' 	=> __( 'Store Item Link Text', 'bwpy' ),
	    	'section' 	=> 'bwpy_edd_options',
		'settings' 	=> 'bwpy_product_view_details',
		'priority'	=> 40,
	) );
	// store front/archive item count
	$wp_customize->add_setting( 'bwpy_store_front_count', array( 'default' => 9 ) );		
	$wp_customize->add_control( 'bwpy_store_front_count', array(
	    	'label' 	=> __( 'Store Front Item Count', 'bwpy' ),
	    	'section' 	=> 'bwpy_edd_options',
		'settings' 	=> 'bwpy_store_front_count',
		'priority'	=> 50,
	) );
}

The options built there correspond with the get_theme_mod() calls we’ve made throughout our integration process. So if everything went smoothly, we’re good to go.

Also, thanks to the class_exists( 'Easy_Digital_Downloads' ) conditional, none of those options will appear if EDD is not installed and activated on the site running your theme.

Seeing the Big Picture

Of course it’s up to you to make sure everything is working properly. This is a lot of information to take in all at once. And considering how different every theme is, you may have to make some adjustments to your HTML and the provided code.

This should have pointed you in the right direction, though.

Underscores for EDD

Most of you know I’ve already done all of this work and then some with my Underscores for Easy Digital Downloads starter theme.

If you just want to get started designing a theme that’s already fully integrated, that’s the best option. It follows everything we’ve covered here with many more enhancements.

Take advantage of either resource, the tutorial or the download. If you have any questions, ask away.

9 Comments:
  1. I installed the EDD-Starter-Theme-2.0 .
    I am creating a page ‘Shop’, install template ‘Store Front’ for this page. Pagination works. But if I put a link in the menu on ‘/downloads/’ page navigation is not working.
    Help me please

    • As stated in the readme.md file on GitHub, that theme is under construction. It’s nowhere near complete. I’m just going to waste a private repo on it. I only have so many. If you want a starter theme for EDD, use this one… Underscores for EDD.

  2. I’m trying to use EDD with Child theme of Cherry Framework on test site. It comes with jigoshop and I don’t like it because of issue with downloading my stuff (jigoshop is sending email to customers and you have to click the link to download the stuff). I love EDD because of its forced download and this is the most important function i need for my brand new site… but it’s not easy to make it work (impossible for me), mostly because theres no enough tutorials on how to get it work (it seems your is the only one). I created the single-download.php, content-download.php, edd-store-front.php, category and tag taxonomy, i still use the old settings for sidebar – in single-download.php changed only the

    Header and footer are ok now, but the slider is missing and no one created download appears on front page 🙁 I really love this theme and this plugin, would like to make them work together in some way. While using motopress to change the front page it says: “There is no Content section on the template of this page. Make sure the page template is correct.” Help pls!

    • Hi there. I can’t say I’m 100% sure what the issue is because I am not familiar with the theme you’re using. Not every theme follows the typical theme structure and some of them make it a little difficult to integrate certain features. Even if that’s not the case here, though, it’s hard for me to say what’s going on without seeing everything.

      When it comes to downloads displaying on the front page, that has to be built. That will never be automatic in EDD. So if it did it with Jigoshop, that’s probably because the theme was built to do so. For EDD, you’d want to build something like this: http://docs.easydigitaldownloads.com/article/276-sample-product-grid-for-your-theme perhaps into a page template that you set to a page and set as the front page, or maybe directly into a front-page.php template. Either way, though, getting downloads to show on a homepage must be intentional. It’s not automatic.

      • Hi Sean,
        1. I started over and I got a nice look for my Home page without any other new file created especially for EDD, but it doesn’t work with Motopress contents like Woocomerce and Jigoshop do (in the original child theme). My single.php (or single-download.php) calls static-title.php and it’s referred to title.php, and in title.php i have these and i think i need to add something similar for EDD:

        post_title;

        ?>

        This is the entire title.php file:
        https://github.com/CherryFramework/CherryFramework/blob/master/title.php

        See the child theme’s single page demo – http://demo.crocoblock.com/free-themes/jewelry/product/product-14/
        See my single page – http://designbydesi.altervista.org/downloads/black-flower-wallpaper/
        They are so different…

        2. Under the thumbnail I have: image name ” >
        which comes (I’m sure) from the lightbox you see in the child’s demo. So the lightbox doesn’t work with EDD’s products thumbnails… maybe it will work if I add something in the code above or maybe needs a new code especially for EDD’s product thumbnails.
        Sorry that I use your personal site for this, I didn’t find any help in EDD support forum. Any help will be greatly appreciated! Thanks a lot!

  3. Hi,Sean. I’ve just released a free EDD theme that your users might want to try. It’s called Lambada!

  4. Hi and thank you for the post! Do you, or any reader, have the css for making Download Category and Tag Templates look like the [downloads] short code output? I can not find it and it gets all messed up when I try to create it myself. Best regards/John

Leave a Reply

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

*