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:

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