• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

Display Home Page Posts In Grid Style Layout Using Portfolio CPT Template

You can use CSS code to display your home page posts in a grid style layout. This would be one of the best solutions if you want to retain the usage of any widgets used on your front page.

If your theme already includes a portfolio-archive.php file like the Minimum Pro theme does, another option is to include that template on your home page.

To do that, you can use the template_include function included in WordPress. Add this code to your functions file:

Or you can copy the archive-portfolio.php file and rename it front-page.php meaning you will also need to remove the default front-page.php file from your child themes root directory.

And then you can use the CSS code for your portfolio archive on your home page simply by adding the .home class like this:

.home .entry {
	float: left;
	margin-bottom: 60px;
	margin-bottom: 6rem;
	width: 33.333333333333%;
}

.home .entry:nth-of-type(3n) {
	float: right;
	padding-left: 30px;
	padding-left: 3rem;
}

.home .entry:nth-of-type(3n+1) {
	clear: left;
	padding-right: 30px;
	padding-right: 3rem;
}

Here’s the result:

Home Page Grid

Notes

  • Tested on the Minimum Pro theme. Code may need modifying for use on other themes and solution may not work on other thmes.
  • CSS Media Queries not included or tested.

Related Posts

  • Use Portfolio Grid Style CPT Layout On Any Archive Page
Subscribe for new Tutorials

Custom Post Type

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
 

Loading Comments...
 

You must be logged in to post a comment.