3 * Template Name: Showcase Template
4 * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
6 * The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
7 * another recent posts area (with the latest post shown in full and the rest as a list)
8 * and a left sidebar holding aside posts.
10 * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
13 * @subpackage Twenty_Eleven
14 * @since Twenty Eleven 1.0
17 // Enqueue showcase script for the slider
18 wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
22 <div id="primary" class="showcase">
23 <div id="content" role="main">
25 <?php while ( have_posts() ) : the_post(); ?>
29 * We are using a heading by rendering the_content
30 * If we have content for this page, let's display it.
32 if ( '' != get_the_content() )
33 get_template_part( 'content', 'intro' );
40 * Begin the featured posts section.
42 * See if we have any sticky posts and use them to create our featured posts.
43 * We limit the featured posts at ten.
45 $sticky = get_option( 'sticky_posts' );
47 // Proceed only if sticky posts exist.
48 if ( ! empty( $sticky ) ) :
50 $featured_args = array(
51 'post__in' => $sticky,
52 'post_status' => 'publish',
53 'posts_per_page' => 10,
54 'no_found_rows' => true,
57 // The Featured Posts query.
58 $featured = new WP_Query( $featured_args );
60 // Proceed only if published posts exist
61 if ( $featured->have_posts() ) :
64 * We will need to count featured posts starting from zero
65 * to create the slider navigation.
69 // Compatibility with versions of WordPress prior to 3.4.
70 if ( function_exists( 'get_custom_header' ) )
71 $header_image_width = get_theme_support( 'custom-header', 'width' );
73 $header_image_width = HEADER_IMAGE_WIDTH;
76 <div class="featured-posts">
77 <h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
81 while ( $featured->have_posts() ) : $featured->the_post();
83 // Increase the counter.
87 * We're going to add a class to our featured post for featured images
88 * by default it'll have the feature-text class.
90 $feature_class = 'feature-text';
92 if ( has_post_thumbnail() ) {
93 // ... but if it has a featured image let's add some class
94 $feature_class = 'feature-image small';
96 // Hang on. Let's check this here image out.
97 $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) );
99 // Is it bigger than or equal to our header?
100 if ( $image[1] >= $header_image_width ) {
101 // If bigger, let's add a BIGGER class. It's EXTRA classy now.
102 $feature_class = 'feature-image large';
107 <section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
111 * If the thumbnail is as big as the header image
112 * make it a large featured post, otherwise render it small
114 if ( has_post_thumbnail() ) {
115 if ( $image[1] >= $header_image_width )
116 $thumbnail_size = 'large-feature';
118 $thumbnail_size = 'small-feature';
120 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail( $thumbnail_size ); ?></a>
124 <?php get_template_part( 'content', 'featured' ); ?>
129 // Show slider only if we have more than one featured post.
130 if ( $featured->post_count > 1 ) :
132 <nav class="feature-slider">
136 // Reset the counter so that we end up with matching elements
143 while ( $featured->have_posts() ) : $featured->the_post();
145 if ( 1 == $counter_slider )
146 $class = 'class="active"';
150 <li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php echo esc_attr( sprintf( __( 'Featuring: %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" <?php echo $class; ?>></a></li>
154 <?php endif; // End check for more than one sticky post. ?>
155 </div><!-- .featured-posts -->
156 <?php endif; // End check for published posts. ?>
157 <?php endif; // End check for sticky posts. ?>
159 <section class="recent-posts">
160 <h1 class="showcase-heading"><?php _e( 'Recent Posts', 'twentyeleven' ); ?></h1>
164 // Display our recent posts, showing full content for the very latest, ignoring Aside posts.
165 $recent_args = array(
167 'post__not_in' => get_option( 'sticky_posts' ),
168 'tax_query' => array(
170 'taxonomy' => 'post_format',
171 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),
173 'operator' => 'NOT IN',
176 'no_found_rows' => true,
179 // Our new query for the Recent Posts section.
180 $recent = new WP_Query( $recent_args );
182 // The first Recent post is displayed normally
183 if ( $recent->have_posts() ) : $recent->the_post();
185 // Set $more to 0 in order to only get the first part of the post.
189 get_template_part( 'content', get_post_format() );
191 echo '<ol class="other-recent-posts">';
195 // For all other recent posts, just display the title and comment status.
196 while ( $recent->have_posts() ) : $recent->the_post(); ?>
198 <li class="entry-title">
199 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
200 <span class="comments-link">
201 <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentyeleven' ) . '</span>', __( '<b>1</b> Reply', 'twentyeleven' ), __( '<b>%</b> Replies', 'twentyeleven' ) ); ?>
208 // If we had some posts, close the <ol>
209 if ( $recent->post_count > 0 )
212 </section><!-- .recent-posts -->
214 <div class="widget-area" role="complementary">
215 <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
218 the_widget( 'Twenty_Eleven_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
221 <?php endif; // end sidebar widget area ?>
222 </div><!-- .widget-area -->
224 </div><!-- #content -->
225 </div><!-- #primary -->
227 <?php get_footer(); ?>