Add Portfolio Page To 411 Theme by StudioPress

This post shows you how to add a Portfolio custom post type (cpt) to the 411 child theme by StudioPress.

Here’s what the portfolio archive page looks like once you add all the code:

You can easily change the number of featured images displayed per archive page.

Most of the code comes from the Executive Pro theme and has been modified to work on this theme.

Copy 3 Template Files

You’ll need to copy the 3 different template files from the Executive Pro theme and upload them to your child themes root directory. The file names are:

archive-portfolio.php
single-portfolio.php
taxonomy-portfolio-type.php

These files can be used ‘as is’ and don’t need any modification.

Copy & Upload lib Folder

Next step is to copy the lib folder and upload it to your child themes root directory. No modification is needed to the files in this folder.

You can see the 3 files and lib folder in this screenshot.

Next step is to add the PHP code at the end of your child themes functions.php file:

Add PHP To Functions File

Note: Please copy all the code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++

The last step is to add CSS to your style sheet.

Add CSS To Style Sheet

/* Portfolio
--------------------------------------------- */

.executive-pro-portfolio .content {
	padding: 10px 10px 0;
	padding: 1rem 1rem 0;
}

.executive-pro-portfolio .entry-title {
	font-size: 16px;
	font-size: 1.6rem;
	text-transform: uppercase;
	margin-bottom: 30px;
	margin-bottom: 3rem;
	margin-top: 30px;
	margin-top: 3rem;
	text-align: center;
}

.executive-pro-portfolio .archive-title {
    text-align: center;
	color: #fff;
}

.executive-pro-portfolio .archive-description {
    background: #1C8A15;
	-webkit-box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:    10px 10px 0px rgba(0, 0, 0, 0.2);
	box-shadow:         10px 10px 0px rgba(0, 0, 0, 0.2);
}
	
.executive-pro-portfolio .portfolio {
	float: left;
	padding: 0 10px 10px;
	padding: 0 1rem 1rem;
	width: 50%;
}

.executive-pro-portfolio .portfolio:nth-of-type(2n+1),
.executive-pro-portfolio .site-footer {
	clear: left;
}

.single-portfolio .content {
	text-align: center;
}

.executive-pro-portfolio .entry,
.single-portfolio .entry {
	margin-bottom: 20px;
	margin-bottom: 2rem;
}

.executive-pro-portfolio .portfolio-featured-image img:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
    filter: alpha(opacity=5);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.executive-pro-portfolio .entry-header .entry-meta {
    border-top: 0;
}

@media only screen and (max-width: 767px) {

.executive-pro-portfolio .portfolio {
		margin: 0;
		width: 100%;
	}
	
	
.executive-pro-portfolio .portfolio {
		text-align: center;
	}
	
	.executive-pro-portfolio .portfolio {
		padding: 0 0 30px;
		padding: 0 0 3rem;
	}
}

The above code includes CSS to be added to your mobile queries.

All the other CSS should be added near the end of the style.css file before the start of the Media Queries.

Looks Pretty Darn Cute on hand held devices.

And iPhone sized mobiles.

Setting Up The Portfolio Archive

You may need to re-save your Permalinks after adding the PHP code.

You can them create a custom link in your menu for the portfolio archive page.

Example: http://example.com/portfolio

More customization tips for 411 are in the pipeline.