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.

More Articles About Twenty Fourteen Theme

  1. Displaying custom post type content using EFCWP plugin
  2. Creating Extra Widget Area at Home Page on Twenty Fourteen Theme
  3. Grid View Template on Twenty Fourteen Theme using EFCWP Plugin
  4. How to create multiple featured slider on twenty fourteen theme?

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’ );