Setup a Page to Display all the Products

This tutorial goes over how to create an archives page to display all the Easy Digital Downloads products.

Notes from the Video

1. You can find a sample grid layout template over in the Easy Digital Downloads documentation here. In this tutorial, I used an archives template file instead. Either option will work.
2. Duplicate the page.php template file and name it archive-download.php
3. Edit the get_template_part to use a new file called content-downloads.php
4. Duplicate the content-download.php file and name it content-downloads.php
5. Edit the archive-download.php file to be full width and remove the sidebar. Using Bootstrap, my archive-download.php file looks like the following:
   
   PHP

   <?php /** * The template for displaying all downloads. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package bootstrapwp */ get_header(); ?> <div class="container"> <div class="row"> <div id="primary" class="col-lg-12"> <main id="main" class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'downloads' ); ?> <?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 --> </div> </div> <?php get_footer(); ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   <?php /** * The template for displaying all downloads. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package bootstrapwp */   get_header(); ?>   <div class="container"> <div class="row"> <div id="primary" class="col-lg-12"> <main id="main" class="site-main" role="main">   <?php while ( have_posts() ) : the_post(); ?>   <?php get_template_part( 'content', 'downloads' ); ?>   <?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 --> </div> </div>     <?php get_footer(); ?>

6. We now want to use Bootstrap classes to put our products into a grid. To do this we need to edit the content-downloads.php file to include Bootstrap grid classes. At this point, my content-downloads.php looks like the following:
   
   PHP

   <?php /** * @package bootstrapwp */ ?> <div class="col-md-4"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .entry-header --> <?php // check if the post has a Post Thumbnail assigned to it. if ( has_post_thumbnail() ) { the_post_thumbnail('full', array('class' => 'img-responsive')); } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'bootstrapwp' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer"> <?php edit_post_link( __( 'Edit', 'bootstrapwp' ), '<span class="edit-link btn btn-danger btn-xs">', '</span>' ); ?> </footer><!-- .entry-footer --> </article><!-- #post-## --> </div>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

   <?php /** * @package bootstrapwp */ ?>   <div class="col-md-4"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .entry-header -->   <?php // check if the post has a Post Thumbnail assigned to it. if ( has_post_thumbnail() ) { the_post_thumbnail('full', array('class' => 'img-responsive')); } ?>   <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'bootstrapwp' ), 'after'  => '</div>', ) ); ?> </div><!-- .entry-content -->   <footer class="entry-footer"> <?php edit_post_link( __( 'Edit', 'bootstrapwp' ), '<span class="edit-link btn btn-danger btn-xs">', '</span>' ); ?> </footer><!-- .entry-footer --> </article><!-- #post-## --> </div>

7. Since I am using Bootstrap, I also need to make sure my columns are wrapped in a div class="row" as the Bootstrap documentation covers. To do this, I need to edit the archive-download.php file to look like the following:
   
   PHP

   <?php /** * The template for displaying all downloads. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package bootstrapwp */ get_header(); ?> <div class="container"> <div class="row"> <div id="primary" class="col-lg-12"> <main id="main" class="site-main" role="main"> <div class="row"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'downloads' ); ?> <?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. ?> </div> </main><!-- #main --> </div><!-- #primary --> </div> </div> <?php get_footer(); ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

   <?php /** * The template for displaying all downloads. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package bootstrapwp */   get_header(); ?>   <div class="container"> <div class="row"> <div id="primary" class="col-lg-12"> <main id="main" class="site-main" role="main"> <div class="row">   <?php while ( have_posts() ) : the_post(); ?>   <?php get_template_part( 'content', 'downloads' ); ?>   <?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. ?> </div>   </main><!-- #main --> </div><!-- #primary --> </div> </div>     <?php get_footer(); ?>

8. Now that we have the products displayed in a grid, we can edit the template and make it display the content in a different way. In the video, I edited the content-downloads.php file to look like the following:
   
   PHP

   <?php /** * @package bootstrapwp */ ?> <div class="col-md-4"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php if ( has_post_thumbnail() ) : ?> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?> </a> <?php endif; ?> <header class="theme-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .theme-header --> <?php if(function_exists('edd_price')) { ?> <div class="product-price"> <?php if(edd_has_variable_prices(get_the_ID())) { // if the download has variable prices, show the first one as a starting price echo 'Starting at: '; edd_price(get_the_ID()); } else { edd_price(get_the_ID()); } ?> </div><!--end .product-price--> <?php } ?> </article><!-- #post-## --> </div>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   <?php /** * @package bootstrapwp */ ?>       <div class="col-md-4"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>   <?php if ( has_post_thumbnail() ) : ?> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?> </a> <?php endif; ?>   <header class="theme-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .theme-header -->   <?php if(function_exists('edd_price')) { ?> <div class="product-price"> <?php if(edd_has_variable_prices(get_the_ID())) { // if the download has variable prices, show the first one as a starting price echo 'Starting at: '; edd_price(get_the_ID()); } else { edd_price(get_the_ID()); } ?> </div><!--end .product-price--> <?php } ?>       </article><!-- #post-## --> </div>

9. That’s it! You now have a page to display all your products with an image, title, and price. Customize the page and make it look however you would like.