Merge pull request #43 from xwp/add/34

Issue 34 - Integrate static blog and index files into dynamic WordPress template.

assets/src/css/components/_nav-links.scss

@@ -0,0 +1,29 @@
+.nav-links {
+	width: 100%;
+	margin-top: $site-gutter;
+	margin-bottom: $site-gutter;
+	display: flex;
+	justify-content: center;
+	flex-flow: wrap;
+
+	a,
+	span {
+		@extend .button;
+		display: none;
+
+		@media ( query( min, mobile-large ) ) {
+			display: block;
+		}
+	}
+
+	.prev,
+	.next {
+		display: block;
+		flex-basis: 50%;
+		text-align: center;
+
+		@media ( query( min, mobile-large ) ) {
+			flex-basis: auto;
+		}
+	}
+}

assets/src/css/main.scss

@@ -17,6 +17,7 @@
 @import 'components/entry--featured';
 @import 'components/entry--slim';
 @import 'components/inline-form';
+@import 'components/nav-links';
 @import 'components/widget';
 
 // Modules

footer.php

@@ -9,6 +9,8 @@
 
 ?>
 
+</div><!-- End #content -->
+
 <footer class="wrap wrap--full-width wrap--footer">
 	<nav class="wrap__item wrap__item--footer-menu">
 		<?php

functions.php

@@ -94,6 +94,25 @@ function ampconf_setup() {
 				'flex-height' => true,
 			)
 		);
+
+		// Custom image sizes.
+		foreach ( array(
+			'1040x400',
+			'768x461',
+			'768x295',
+			'727x508',
+			'375x225',
+			'335x225',
+			'320x192',
+			'280x188',
+			'240x161',
+			'160x107',
+			'122x82',
+		) as $size ) {
+			$dimensions = explode( 'x', $size );
+
+			add_image_size( 'ampconf-' . $size, $dimensions[0], $dimensions[1], true );
+		}
 	}
 endif;
 add_action( 'after_setup_theme', 'ampconf_setup' );
@@ -106,7 +125,7 @@ function ampconf_setup() {
  * @global int $content_width
  */
 function ampconf_content_width() {
-	$GLOBALS['content_width'] = apply_filters( 'ampconf_content_width', 640 );
+	$GLOBALS['content_width'] = apply_filters( 'ampconf_content_width', 694 );
 }
 add_action( 'after_setup_theme', 'ampconf_content_width', 0 );
 

header.php

@@ -54,3 +54,5 @@
 			</div>
 		</nav>
 	</header>
+
+	<div id="content">

home.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * The home template file
+ *
+ * This template is specific to the blog index page, which could be the site
+ * root or an alternate page, depending on your Homepage Settings.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
+ *
+ * @package AMPConf
+ */
+
+get_header(); ?>
+
+	<div class="wrap">
+		<?php
+		// Only show the feature and subfeatures when not paged.
+		if ( ! is_paged() ) {
+			if ( have_posts() ) {
+				$post_count = 0;
+
+				while ( have_posts() ) {
+					the_post();
+
+					$post_count++;
+
+					if ( 1 === $post_count ) {
+						?>
+						<div class="wrap__item wrap__item--full-width">
+							<?php get_template_part( 'templates/entry/featured' ); ?>
+						</div>
+						<?php
+					} elseif ( 3 >= $post_count ) {
+						?>
+						<div class="wrap__item wrap__item--half wrap__item--half--primary">
+							<?php get_template_part( 'templates/entry/default' ); ?>
+						</div>
+						<?php
+					} else {
+						break;
+					}
+				}
+			}
+		}
+		?>
+
+		<main class="wrap__item wrap__item--blog wrap__item--blog--primary">
+			<?php
+			if ( have_posts() ) :
+
+				if ( ! is_front_page() ) :
+				?>
+					<header>
+						<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
+					</header>
+
+				<?php
+				endif;
+
+				/* Start the Loop */
+				while ( have_posts() ) :
+					the_post();
+
+					?>
+					<div class="wrap__subitem wrap__subitem--blog">
+						<?php get_template_part( 'templates/entry/slim' ); ?>
+					</div>
+					<?php
+
+				endwhile;
+
+			else :
+				?>
+				<div class="wrap__subitem wrap__subitem--blog">
+					<?php get_template_part( 'templates/entry/none' ); ?>
+				</div>
+				<?php
+
+			endif;
+
+			the_posts_pagination();
+			?>
+		</main>
+
+		<?php get_sidebar(); ?>
+	</div><!-- .wrap -->
+
+<?php
+get_footer();

inc/template-functions.php

@@ -30,3 +30,17 @@ function ampconf_pingback_header() {
 	}
 }
 add_action( 'wp_head', 'ampconf_pingback_header' );
+
+/**
+ * Filters the string displayed after the excerpt.
+ *
+ * @param string $more_string The string after the excerpt.
+ *
+ * @return string $more_string
+ */
+function ampconf_excerpt_more( $more_string ) {
+	$more_string = '…';
+
+	return $more_string;
+}
+add_filter( 'excerpt_more', 'ampconf_excerpt_more' );

inc/template-tags.php

@@ -12,9 +12,9 @@
 	 * Prints HTML with meta information for the current post-date/time and author.
 	 */
 	function ampconf_posted_on() {
-		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
+		$time_string = '<time class="entry__date published updated" datetime="%1$s">%2$s</time>';
 		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
-			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
+			$time_string = '<time class="entry__date published" datetime="%1$s">%2$s</time><time class="screen-reader-text updated" datetime="%3$s">%4$s</time>';
 		}
 
 		$time_string = sprintf(
@@ -26,18 +26,19 @@ function ampconf_posted_on() {
 		);
 
 		$posted_on = sprintf(
-			/* translators: %s: post date. */
-			esc_html_x( 'Posted on %s', 'post date', 'ampconf' ),
+			wp_kses(
+				/* translators: %s: post date. */
+				_x( '<span class="screen-reader-text">Posted on</span> %s', 'post date', 'ampconf' ),
+				array(
+					'span' => array(
+						'class' => array(),
+					),
+				)
+			),
 			'<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
 		);
 
-		$byline = sprintf(
-			/* translators: %s: post author. */
-			esc_html_x( 'by %s', 'post author', 'ampconf' ),
-			'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
-		);
-
-		echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span>'; // WPCS: XSS OK.
+		echo '<span class="posted-on">' . $posted_on . '</span>'; // WPCS: XSS OK.
 
 	}
 endif;
@@ -105,41 +106,13 @@ function ampconf_entry_footer() {
 if ( ! function_exists( 'ampconf_post_thumbnail' ) ) :
 	/**
 	 * Displays an optional post thumbnail.
-	 *
-	 * Wraps the post thumbnail in an anchor element on index views, or a div
-	 * element when on single views.
 	 */
 	function ampconf_post_thumbnail() {
 		if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) {
 			return;
 		}
 
-		if ( is_singular() ) :
-		?>
-
-		<div class="post-thumbnail">
-		<?php the_post_thumbnail(); ?>
-	</div><!-- .post-thumbnail -->
-
-	<?php else : ?>
-
-	<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
-		<?php
-			the_post_thumbnail(
-				'post-thumbnail',
-				array(
-					'alt' => the_title_attribute(
-						array(
-							'echo' => false,
-						)
-					),
-				)
-			);
-		?>
-	</a>
-
-	<?php
-	endif; // End is_singular().
+		// TODO: Create custom markup for ampconf's specific image sizes.
 	}
 endif;
 

index.php

@@ -14,46 +14,38 @@
 
 get_header(); ?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
-
-		<?php
-		if ( have_posts() ) :
-
-			if ( is_home() && ! is_front_page() ) :
-			?>
-				<header>
-					<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
-				</header>
-
+	<div class="wrap">
+		<main class="wrap__item wrap__item--blog wrap__item--blog--primary">
 			<?php
-			endif;
-
-			/* Start the Loop */
-			while ( have_posts() ) :
-				the_post();
+			if ( have_posts() ) :
 
-				/*
-				 * Include the Post-Format-specific template for the content.
-				 * If you want to override this in a child theme, then include a file
-				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
-				 */
-				get_template_part( 'template-parts/content', get_post_format() );
+				/* Start the Loop */
+				while ( have_posts() ) :
+					the_post();
 
-			endwhile;
+					?>
+					<div class="wrap__subitem wrap__subitem--blog">
+						<?php get_template_part( 'templates/entry/slim' ); ?>
+					</div>
+					<?php
 
-			the_posts_navigation();
+				endwhile;
 
-		else :
+				the_posts_pagination();
+			else :
 
-			get_template_part( 'template-parts/content', 'none' );
+				?>
+				<div class="wrap__subitem wrap__subitem--blog">
+					<?php get_template_part( 'templates/entry/none' ); ?>
+				</div>
+				<?php
 
-		endif;
-		?>
+			endif;
+			?>
+		</main>
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+		<?php get_sidebar(); ?>
+	</div><!-- .wrap -->
 
 <?php
-get_sidebar();
 get_footer();

sidebar.php

@@ -12,6 +12,8 @@
 }
 ?>
 
-<aside id="secondary" class="widget-area">
-	<?php dynamic_sidebar( 'sidebar-1' ); ?>
-</aside><!-- #secondary -->
+<aside class="wrap__item wrap__item--blog wrap__item--blog--secondary">
+	<div class="wrap__subitem wrap__subitem--blog wrap__subitem--no-separator">
+		<?php dynamic_sidebar( 'sidebar-1' ); ?>
+	</div>
+</aside>

templates/entry/default.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Default entry template.
+ *
+ * @package AMPConf
+ */
+
+?>
+<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
+	<figure class="entry__thumbnail">
+		<a href="<?php esc_url( the_permalink() ); ?>">
+			<?php the_post_thumbnail( 'ampconf-335x225' ); ?>
+		</a>
+	</figure><!-- .entry__thumbnail -->
+
+	<header class="entry__header">
+		<?php get_template_part( 'templates/entry/meta/date' ); ?>
+		<?php the_title( '<h3 class="entry__title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); ?>
+	</header><!-- .entry__header -->
+
+	<div class="entry__summary">
+		<p><?php the_excerpt(); ?></p>
+	</div><!-- .entry__summary -->
+
+	<footer class="entry__footer">
+		<?php get_template_part( 'templates/entry/meta/byline' ); ?>
+		<?php get_template_part( 'templates/entry/meta/category' ); ?>
+	</footer><!-- .entry__footer -->
+</article><!-- .entry -->