Create book series template with subnavigation support.

kimisgold · Jun 8, 2014 · ba13e31 · ba13e31
1 parent 6c90d1e
commit ba13e31
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 22 deletions.
diff --git a/img/comingsoon.png b/img/comingsoon.png
diff --git a/series.php b/series.php
@@ -0,0 +1,60 @@
+<?php 
+/* 
+Template Name: Book Series
+*/ 
+?>
+
+<?php get_header(); ?>
+
+<?php
+    $page_query = new WP_Query();
+    $all_pages = $page_query->query(array('post_type' => 'page'));
+    $page_id = get_the_ID();
+?>
+
+<div class="content">
+
+<nav class="subnav">
+    <?php $series_top_id = ($post->post_parent !== 0) ?  $post->post_parent : $page_id; ?>
+    <?php $children = get_pages('sort_column=menu_order&child_of=' . $series_top_id); ?>
+    <?php $active = ($series_top_id == $page_id) ? 'class="active"' : ''; ?>
+    <h3><a href="<?php echo get_permalink($series_top_id); ?>" <?php echo $active; ?>><?php echo get_the_title($series_top_id); ?></a></h3>
+    <ul>
+    <?php foreach($children as $child): ?>
+        <?php $child_id = $child->ID; ?>
+        <?php $active = ($page_id == $child_id) ? 'class="active"' : ''; ?>
+        <?php $child_title = $child->post_title; ?>
+        <li><a href="<?php echo get_permalink($child_id); ?>" <?php echo $active; ?>>
+        <?php if (has_post_thumbnail($child_id)): ?>
+            <?php echo get_the_post_thumbnail($child_id, 'post-thumbnail', array('alt' => $child_title)); ?></a></li>
+        <?php else: ?>
+            <img src="<?php echo bloginfo('template_directory') . '/img/comingsoon.png'; ?>" alt="<?php echo $child_title; ?>" class="no-cover"><span class="book-title"><?php echo $child_title; ?></span>
+        <?php endif; ?>
+        </a></li>
+    <?php endforeach; ?>
+    </ul>
+</nav>
+
+<section class="ten columns offset-by-one">
+
+<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
+
+    <article class="post">
+
+        <h1><?php the_title(); ?></h1>
+
+    <?php the_content(); ?>
+
+    </article>
+
+    <?php endwhile; else: ?>
+
+        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
+
+    <?php endif; ?>
+
+</section>
+
+</div>
+
+<?php get_footer(); ?>
diff --git a/style.css b/style.css
@@ -843,31 +843,109 @@ ______________________________ */
     margin: 30px 0;
 }
 
+.subnav {
+    text-align: center;
+    padding-bottom: .4375em;
+    border-bottom: 1px solid #47436b;
+    margin-top: -24px;
+    margin-bottom: 24px;
+}
+
+.subnav a {
+    color: #fff;
+}
+
+.subnav h3 {
+    font-family: "AbrahamLincolnRegular";
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: inline-block;
+    margin-right: 1em;
+    line-height: 120px;
+}
+
+.subnav ul {
+    display: inline-block;
+    padding: 0;
+    list-style-type: none;
+    margin: 0;
+    vertical-align: top;
+}
+
+.subnav li {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+}
+
+.subnav img {
+    height: 120px;
+    width: auto;
+}
+
+.subnav a {
+    opacity: .65;
+    -webkit-transition: opacity .25s ease-in-out;
+    -moz-transition: opacity .25s ease-in-out;
+    transition: opacity .25s ease-in-out;
+}
+
+.subnav a:hover {
+    opacity: 1;
+}
+
+.active {
+    opacity: 1 !important;
+}
+
+.subnav li a {
+    display: table;
+    width: 100px;
+    height: 120px;
+    text-align: left;
+}
+
+.no-cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+.book-title {
+    display: table-cell;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: "AbrahamLincolnRegular";
+    text-shadow: -1px -1px 0 #000,       1px -1px 0 #000,     -1px 1px 0 #000,      1px 1px 0 #000, 0 0 10px #000;
+    vertical-align: middle;
+    line-height: 18px;
+}
 
 /* ------------------------------ 
     Special Forms
 ______________________________ */
 
 
-	/* ------------------------------ 
-	    Birthday Contest - July 5, 2012
-	______________________________ */
-	
-	#wpcf7-f1089-p1091-o1, #wpcf7-f1089-p1098-o1 {
-		text-align: left;
-	}
-	
-	#wpcf7-f1089-p1091-o1:after, #wpcf7-f1089-p1098-o1:after {
-		content: "";
-		display: block;
-		clear: both;
-	}
-	
-	#wpcf7-f1089-p1091-o1 span, #wpcf7-f1089-p1098-o1 span {
-		margin: 0;
-	}
-	
-	#wpcf7-f1089-p1091-o1 .line2 span, #wpcf7-f1089-p1098-o1 .line2 span {
-		display: inline-block;
-	}
-	
+    /* ------------------------------ 
+        Birthday Contest - July 5, 2012
+    ______________________________ */
+    
+    #wpcf7-f1089-p1091-o1, #wpcf7-f1089-p1098-o1 {
+        text-align: left;
+    }
+    
+    #wpcf7-f1089-p1091-o1:after, #wpcf7-f1089-p1098-o1:after {
+        content: "";
+        display: block;
+        clear: both;
+    }
+    
+    #wpcf7-f1089-p1091-o1 span, #wpcf7-f1089-p1098-o1 span {
+        margin: 0;
+    }
+    
+    #wpcf7-f1089-p1091-o1 .line2 span, #wpcf7-f1089-p1098-o1 .line2 span {
+        display: inline-block;
+    }
+