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.
Any advice if one doesn’t own the Executive Pro theme (besides to buy the EP theme)? š
You need the code which is included in several SP themes.
I have included the code in other tutorials you can find on this site.
SP themes are only $20
Thanks – will poke around.
Brad:
Is there a way to set a site’s Portfolio as the home page? I was told to create a page called “Portfolio”, and then set that as the static home page, but that didn’t work, so I’m looking for other suggestions.
Thanks!
Susan
What theme are you using?
This is the best solution in my opinion http://wpsites.net/web-design/genesis-custom-post-type-archive-grid-on-front-or-home-page/