Get basic grid layout working.

templates/archive-advent_day.php

@@ -9,57 +9,67 @@
  * new template file for each one. For example, tag.php (Tag archives),
  * category.php (Category archives), author.php (Author archives), etc.
  *
- * @link https://codex.wordpress.org/Template_Hierarchy
+ * @link       https://codex.wordpress.org/Template_Hierarchy
  *
- * @package WordPress
+ * @package    WordPress
  * @subpackage Twenty_Sixteen
- * @since Twenty Sixteen 1.0
+ * @since      Twenty Sixteen 1.0
  */
 
-$options = get_option( 'cac_settings_name' );
-$page_title = isset( $options['cac-calendar_title'] ) ? $options['cac-calendar_title'] : '';
+$options          = get_option( 'cac_settings_name' );
+$page_title       = isset( $options['cac-calendar_title'] ) ? $options['cac-calendar_title'] : '';
+$background_image = isset( $options['cac-calendar_title'] ) ? intval( $options['cac-calendar_title'] ) : 0;
+
+wp_enqueue_style(
+	'advent-calendar',
+	plugin_dir_url( __FILE__ ) . 'assets/css/advent-calendar.css',
+	[],
+	filemtime( plugin_dir_path( __FILE__ ) . 'assets/css/advent-calendar.css' )
+);
 
 get_header(); ?>
 
 <div id="primary" class="content-area">
 	<main id="main" class="site-main" role="main">
 
-		<?php if ( have_posts() ) : ?>
+			<?php if ( have_posts() ) : ?>
 
-			<header class="page-header">
-				<h1 class="page-title"><?php echo esc_html( $page_title); ?></h1>
-			</header><!-- .page-header -->
+				<header class="page-header">
+					<h1 class="page-title"><?php echo esc_html( $page_title ); ?></h1>
+				</header><!-- .page-header -->
+		<div id="grid">
 
-			<?php
-			// Start the Loop.
-			while ( have_posts() ) :
-				the_post();
+				<?php
+				// Start the Loop.
+				while ( have_posts() ) :
+					the_post();
 
-				/*
-				 * 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.
-				 */
-				Codeup_Advent_Calendar::get_instance()->template_loader()->get_template_part( 'content', CAC_ADVENT_DAY_TYPE );
+					/*
+					 * 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.
+					 */
+					Codeup_Advent_Calendar::get_instance()->template_loader()->get_template_part( 'content', CAC_ADVENT_DAY_TYPE );
 
-				// End the loop.
-			endwhile;
+					// End the loop.
+				endwhile;
 
-			// Previous/next page navigation.
-			the_posts_pagination(
-				array(
-					'prev_text'          => __( 'Previous page', 'twentysixteen' ),
-					'next_text'          => __( 'Next page', 'twentysixteen' ),
-					'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
-				)
-			);
+				// Previous/next page navigation.
+				the_posts_pagination(
+					array(
+						'prev_text'          => __( 'Previous page', 'twentysixteen' ),
+						'next_text'          => __( 'Next page', 'twentysixteen' ),
+						'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
+					)
+				);
 
-		// If no content, include the "No posts found" template.
-		else :
-			get_template_part( 'template-parts/content', 'none' );
+			// If no content, include the "No posts found" template.
+			else :
+				get_template_part( 'template-parts/content', 'none' );
 
-		endif;
-		?>
+			endif;
+			?>
+		</div>
 
 	</main><!-- .site-main -->
 </div><!-- .content-area -->

templates/assets/css/advent-calendar.css

+/* CSS for front end advent calendar */
+.calendar_day_cell {
+	/*width: 25%;*/
+	/*float: left;*/
+	/*border: 1px grey solid;*/
+}
+
+.advent-image {
+	/*max-height: 400px;*/
+	/*height: 400px;*/
+	/*max-width: 25%;*/
+}
+
+#grid {
+	width: 100%;
+	display: grid;
+	grid-template-areas: "a a a a ";
+	grid-gap: 1px;
+	grid-auto-rows: 1fr;
+
+}
+
+#grid > .calendar_day_cell {
+	width:100%;
+}

templates/content-advent_day.php

-<h2 <?php post_class() ?>>
-	<?php the_title(); ?>
-</h2>
\ No newline at end of file
+<div class="calendar_day_cell">
+	<h2 <?php post_class() ?>>
+		<?php the_title(); ?>
+		<?php $image = get_field( 'acd_image' );
+		if ( isset( $image ) && $image['id'] ) {
+			?>
+			<img id="advent-image" src="<?php echo wp_get_attachment_url( $image['id'] ); ?>">
+			<?php
+		}
+		?>
+	</h2>
+</div>