Numerous updates

* Fixes to the customizer * Styles navigation bar on desktop * Initial styling of post and page content
uwc · Jul 2, 2016 · f24a2ed · f24a2ed
1 parent 22f4947
commit f24a2ed
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 117 deletions.
diff --git a/404.php b/404.php
@@ -14,10 +14,14 @@
 
 			<section class="error-404 not-found">
 				<header class="page-header">
-					<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'nc-template' ); ?></h1>
+					<h1 class="page-title"><?php esc_html_e( '404 Oh crumbs.', 'nc-template' ); ?></h1>
 				</header>
 				<div class="page-content">
-					<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'nc-template' ); ?></p>
+					<p><?php
+						$url = 'http://www.ibo.org/en/programmes/diploma-programme/curriculum/theory-of-knowledge/what-is-tok/';
+						$link = sprintf( wp_kses( __( 'Looks like something has gone terribly wrong somewhere in the Internet. As a result, the page you requested isn&rsquo;t available. Or maybe it doesn&rsquo;t exist. Maybe it never existed. Maybe this page is a figment of your imagination. Maybe you are a figment of your own imagination. Did we just blow your mind? Find out more about the <a href="%s">theory of knowledge course</a> at UWC or simply use the search bar below to find what you are looking for.', 'nc-template' ), array( 'a' => array( 'href' => array() ) ) ), esc_url( $url ) );
+					echo $link; // WPCS: XSS ok.
+					?></p>
 
 					<?php get_search_form(); ?>
 

diff --git a/components/content-page.php b/components/content-page.php
@@ -12,6 +12,7 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<header class="entry-header">
 		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+		<h2 class="entry-summary"><?php the_excerpt(); ?></h2>
 	</header>
 	<div class="entry-content">
 		<?php
@@ -24,16 +25,6 @@
 		?>
 	</div>
 	<footer class="entry-footer">
-		<?php
-			edit_post_link(
-				sprintf(
-					/* translators: %s: Name of current post */
-					esc_html__( 'Edit %s', 'nc-template' ),
-					the_title( '<span class="screen-reader-text">"', '"</span>', false )
-				),
-				'<span class="edit-link">',
-				'</span>'
-			);
-		?>
+		<!-- Prev and next links -->
 	</footer>
 </article><!-- #post-## -->
diff --git a/components/content.php b/components/content.php
@@ -30,6 +30,7 @@
 		<?php get_template_part( 'components/post/content', 'meta' ); ?>
 		<?php
 		endif; ?>
+		<h2 class="entry-summary"><?php the_excerpt(); ?></h2>
 	</header>
 	<div class="entry-content">
 		<?php

diff --git a/components/logo.php b/components/logo.php
@@ -7,6 +7,6 @@
  * @package NC_Template
  */
 
-?><div>
+?><div class="navigation-logo">
 	<?php nc_template_custom_logo(); ?>
 </div>
diff --git a/components/navigation-header.php b/components/navigation-header.php
@@ -7,14 +7,14 @@
  * @package NC_Template
  */
 
-?><div id="site-navigation" class="main-navigation" role="navigation">
-	<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'nc-template' ); ?></button>
+?><a id="menu-toggle" href="#" aria-controls="top-menu" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'nc-template' ); ?></a>
+<div id="navigation-main" class="navigation-main" role="navigation">
 	<?php if ( has_nav_menu( 'header' ) ) {
 		wp_nav_menu( array(
 		'theme_location' => 'header',
 		'depth' => '2',
 		'container' => 'nav',
-		'container_class' => 'nav-collapse',
+		'container_class' => 'nav-collapse closed',
 		'fallback_cb' => 'false',
 		) );
 	} ?>

diff --git a/components/navigation-social.php b/components/navigation-social.php
@@ -8,7 +8,13 @@
  */
 
 if ( has_nav_menu( 'social' ) ) {wp_nav_menu( array(
-	'theme_location' => 'social',
-	'menu' => 'Social icons',
+	'theme_location'  => 'social',
+	'container_class' => 'navigation-social',
+	'menu_id'      => 'menu-social',
+	'menu_class'      => 'menu-social-items',
+	'depth'           => 1,
+	'link_before'     => '<span class="screen-reader-text">',
+	'link_after'      => '</span>',
+	'fallback_cb'     => 'false',
 	) );
 } ?>
diff --git a/components/search-input.php b/components/search-input.php
diff --git a/components/site-info.php b/components/site-info.php
@@ -10,5 +10,5 @@
 ?><div class="site-info">
 	<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'nc-template' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'nc-template' ), 'WordPress' ); ?></a>
 	<span class="sep"> | </span>
-	<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'nc-template' ), 'NC Template', '<a href="http://connorbaer.io/" rel="designer">Connor Bär</a>' ); ?>
+	<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'nc-template' ), 'NC Template', '<a href="http://connorbaer.io/" rel="designer">Connor B&#228;r</a>' ); ?>
 </div><!-- .site-info -->
diff --git a/functions.php b/functions.php
@@ -51,9 +51,9 @@ function nc_template_setup() {
 	// Enable support for custom logo.
 	add_theme_support( 'custom-logo', array(
 		'height'      => 30,
-		'width'       => 360,
+		'width'       => 240,
 		'flex-width'  => true,
-		'header-text' => array( 'site-title', 'site-description' ),
+		'header-text' => array( 'site-title' ),
 	) );
 
 	// This theme uses wp_nav_menu() in one location.
@@ -81,14 +81,19 @@ function nc_template_setup() {
 	 * See: https://codex.wordpress.org/Post_Formats
 	 */
 	add_theme_support( 'post-formats', array(
-		'aside',
-		'image',
 		'video',
 		'quote',
 		'link',
 		'gallery',
 	) );
 
+	/*
+	 * Add support for Post Formats to pages.
+	 *
+	 * See: https://codex.wordpress.org/Function_Reference/add_post_type_support
+	 */
+	add_post_type_support( 'page', array( 'post-formats', 'excerpt' ) );
+
 	/*
 	 * This theme styles the visual editor to resemble the theme style,
 	 * specifically font, colors, icons, and column width.
@@ -139,12 +144,8 @@ function nc_template_fonts_url() {
 	$fonts     = array();
 	$subsets   = 'latin,latin-ext';
 	/* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */
-	if ( 'off' !== _x( 'on', 'PT Sans font: on or off', 'nc-template' ) ) {
-		$fonts[] = 'PT+Sans:400,700';
-	}
-	/* translators: If there are characters in your language that are not supported by Montserrat, translate this to 'off'. Do not translate into your own language. */
-	if ( 'off' !== _x( 'on', 'Montserrat font: on or off', 'nc-template' ) ) {
-		$fonts[] = 'Montserrat:400,700';
+	if ( 'off' !== _x( 'on', 'Cabin font: on or off', 'nc-template' ) ) {
+		$fonts[] = 'Cabin:400,500,700';
 	}
 	if ( $fonts ) {
 		$fonts_url = add_query_arg( array(
@@ -162,7 +163,7 @@ function nc_template_fonts_url() {
  * Adds a `js` class to the root `<html>` element when JavaScript is detected.
  */
 function nc_template_javascript_detection() {
-	echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
+	echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>";
 }
 add_action( 'wp_head', 'nc_template_javascript_detection', 0 );
 
@@ -207,7 +208,9 @@ function nc_template_scripts() {
  * It is not needed and would only increase the time to load the page.
  */
 function change_default_jquery() {
+	if ( ! is_admin() && ! is_customize_preview() ) {
 		wp_dequeue_script( 'jquery' );
 		wp_deregister_script( 'jquery' );
+	}
 }
 add_filter( 'wp_enqueue_scripts', 'change_default_jquery', PHP_INT_MAX );
diff --git a/header.php b/header.php
@@ -10,7 +10,7 @@
  */
 
 ?><!DOCTYPE html>
-<html <?php language_attributes(); ?>>
+<html <?php language_attributes(); ?> class="no-js">
 <head>
 <meta charset="<?php bloginfo( 'charset' ); ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -33,15 +33,20 @@
 <div id="page" class="site">
 	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'nc-template' ); ?></a>
 
-	<header id="masthead" class="site-header" role="banner">
-
-		<?php get_template_part( 'components/logo' ); ?>
+	<header id="navigation" class="navigation" role="banner">
+		<div class="navigation-ctnr">
+
+			<?php get_template_part( 'components/logo' ); ?>
 
-		<?php get_template_part( 'components/navigation', 'social' ); ?>
+			<?php get_template_part( 'components/navigation', 'social' ); ?>
 
-		<?php get_template_part( 'components/search', 'input' ); ?>
+			<div class="navigation-search">
+				<?php get_search_form(); ?>
+			</div>
 
-		<?php get_template_part( 'components/navigation', 'header' ); ?>
+			<?php get_template_part( 'components/navigation', 'header' ); ?>
 
-	</header><!-- #masthead -->
+		</div>
+
+	</header>
 	<div id="content" class="site-content">
diff --git a/inc/custom-header.php b/inc/custom-header.php
@@ -1,73 +0,0 @@
-<?php
-/**
- * Sample implementation of the Custom Header feature
- * http://codex.wordpress.org/Custom_Headers
- *
- * You can add an optional custom header image to header.php like so ...
- *
-	<?php if ( get_header_image() ) : ?>
-	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
-		<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
-	</a>
-	<?php endif; // End header image check. ?>
- *
- * @package NC_Template
- */
-
-/**
- * Set up the WordPress core custom header feature.
- *
- * @uses nc_template_header_style()
- */
-function nc_template_custom_header_setup() {
-	add_theme_support( 'custom-header', apply_filters( 'nc_template_custom_header_args', array(
-		'default-image'          => '',
-		'default-text-color'     => '000000',
-		'width'                  => 2000,
-		'height'                 => 250,
-		'flex-height'            => true,
-		'wp-head-callback'       => 'nc_template_header_style',
-	) ) );
-}
-add_action( 'after_setup_theme', 'nc_template_custom_header_setup' );
-
-if ( ! function_exists( 'nc_template_header_style' ) ) :
-/**
- * Styles the header image and text displayed on the blog
- *
- * @see nc_template_custom_header_setup().
- */
-function nc_template_header_style() {
-	$header_text_color = get_header_textcolor();
-
-	// If no custom options for text are set, let's bail
-	// get_header_textcolor() options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value.
-	if ( HEADER_TEXTCOLOR == $header_text_color ) {
-		return;
-	}
-
-	// If we get this far, we have custom styles. Let's do this.
-	?>
-	<style type="text/css">
-	<?php
-		// Has the text been hidden?
-		if ( 'blank' == $header_text_color ) :
-	?>
-		.site-title,
-		.site-description {
-			position: absolute;
-			clip: rect(1px, 1px, 1px, 1px);
-		}
-	<?php
-		// If the user has set a custom color for the text use that.
-		else :
-	?>
-		.site-title a,
-		.site-description {
-			color: #<?php echo esc_attr( $header_text_color ); ?>;
-		}
-	<?php endif; ?>
-	</style>
-	<?php
-}
-endif; /* nc_template_header_style */

diff --git a/inc/customizer.php b/inc/customizer.php
@@ -21,6 +21,6 @@ function nc_template_customize_register( $wp_customize ) {
  * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
  */
 function nc_template_customize_preview_js() {
-	wp_enqueue_script( 'nc_template_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20160624', true );
+	wp_enqueue_script( 'nc_template_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'jquery', 'customize-preview' ), true );
 }
 add_action( 'customize_preview_init', 'nc_template_customize_preview_js' );
diff --git a/inc/extras.php b/inc/extras.php
@@ -27,3 +27,31 @@ function nc_template_body_classes( $classes ) {
 	return $classes;
 }
 add_filter( 'body_class', 'nc_template_body_classes' );
+
+/**
+ * Adds the search icon to the navigation menu on desktop.
+ * From https://wordpress.stackexchange.com/questions/15455/how-to-hard-code-custom-menu-items
+ *
+ * @param array $items List elements in the menu.
+ * @param array $args Menu arguments for theme location.
+ */
+function nc_template_nav_menu_items( $items, $args ) {
+	if ( 'header' == $args -> theme_location ) {
+		$addmenu = '<li id="menu-item-search" class="menu-item"><a href=""><span class="screen-reader-text">' . __( 'Search', 'nc-template' ) . '</span></a></li>';
+		return $items.$addmenu;
+	} else {
+		return $items;
+	}
+}
+add_filter( 'wp_nav_menu_items','nc_template_nav_menu_items', 10, 2 );
+
+/**
+ * Limits the length of excerpts to 32 words.
+ * See https://codex.wordpress.org/Plugin_API/Filter_Reference/excerpt_length
+ *
+ * @param int $length Length of the excerpt.
+ */
+function nc_template_excerpt_length( $length ) {
+	return 32;
+}
+add_filter( 'excerpt_length', 'nc_template_excerpt_length', 999 );
diff --git a/js/customizer.js b/js/customizer.js
diff --git a/js/html5.js b/js/html5.js
diff --git a/js/scripts.js b/js/scripts.js