How to create a grid view home page template on twenty fourteen theme?

Twenty Fourteen is a default magazine style theme of WordPress 3.8. We are seeing that only 6 posts are coming as a grid featured content on home page. If you want a fully grid view template for your home page then I am giving a sample for it. First create a child theme of 2014 theme. So you can update the parent theme. My Child theme folder name is “2014baby” and created a style.css file in that folder. See  the code below:


/*
Theme Name: Baby Theme of Twenty Fourteen Theme
Theme URI: http://pwdtechnology.com
Author: Paul C.
Author URI: http://pwdtechnology.com/
Description: This is a child theme of twenty fourteen theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentyfourteen
*/

.clear:before,
.clear:after, .clear{
  clear:both;
  display: table;
  content: "";
  height: 0;
}

.home .paging-navigation{display: block; clear:both; border-top: none;}
.home .paging-navigation .page-numbers {
    background: #BBBBBB;
}

And creating the functions.php file and placing in the child theme folder. Write the following code in the functions.php file.


<?php
define('CHILDTHEME_URL', get_bloginfo('stylesheet_directory'));
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/

add_action('wp_head', 'insert_parent_css',5);
function insert_parent_css(){
?>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('stylesheet_directory'); ?>/custom.css" media="all" />
<?php
}
?>

Now  we need to create a template file which will display the post as a grid view format. Lets creating a file “template_grid_view.php” and add the following code in this file:

<?php
/**
 * Template Name: Grid view
 *
 * This is the most generic template file in a WordPress theme and one
 * of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query,
 * e.g., it puts together the home page when no home.php file exists.
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>

<div id="main-content" class="main-content">

	<div id="featured-content" class="featured-content">
	 <div class="featured-content-inner">

		<?php
      // Fix for the WordPress 3.0 "paged" bug.
      $paged = 1;
      if ( get_query_var( 'paged' ) ) { $paged = get_query_var( 'paged' ); }
      if ( get_query_var( 'page' ) ) { $paged = get_query_var( 'page' ); }
      $paged = intval( $paged );
      
      $query_args = array(
                					'post_type' => 'post', 
                					'paged' => $paged
                				);
      $query_args = apply_filters( 'home_query_args', $query_args );
      query_posts($query_args);
			if ( have_posts() ) :
				// Start the Loop.
				while ( have_posts() ) : the_post();

					/*
					 * Include the post format-specific template for the content. If you want to
					 * use this in a child theme, then include a file called called content-___.php
					 * (where ___ is the post format) and that will be used instead.
					 */
					get_template_part( 'content', 'featured-post' );

				endwhile;
        echo '<div class="clear"></div>';
				// Previous/next post navigation.
				twentyfourteen_paging_nav();  
        wp_reset_query();
			else :
				// If no content, include the "No posts found" template.
				get_template_part( 'content', 'none' );

			endif;
      
      
		?>

		  </div><!-- .featured-content-inner -->
    </div><!-- #featured-content .featured-content -->
	<?php //get_sidebar( 'content' ); ?>
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();
?>

Then upload the file in 2014baby folder via FTP or CPanel’s File Manager applications. Now your child theme is completed. Next you will login to dashboard, go to Appearance -> Themes and activate this child theme. After activating the child theme you will create a page like ‘Home’ or ‘Grid View Page’ and select “Gird View” template from drop down. Now You will publish the page and setup this page as a home page from Dashboard -> General -> Reading section.

Comments

    • says

      Thanks for comment.

      Yes. Possible. You will just change the query args. Replace the existing $query_args code by this new code:

      $query_args = array(‘post_type’ => ‘post’, ‘paged’ => $paged, ‘tag’ = > ‘featured’ );