In this tutorial, i’ll show you the best way to add a portfolio custom post type (CPT) to the Education child theme by StudioPress.
Firstly, you are better off converting the Education theme to HTML 5 for a number of reasons.
Two of the most important reasons are:
- HTML 5 is a cleaner markup structure and includes support for Schema which is output as Microdata.
- You can also create multiple portfolio types as this method includes support for creating different portfolio taxonomy types.
Result
This method uses a width of 300px for the featured images displayed on the CPT archive page. The image shows 2 different portfolio taxonomies included on the one archive page.
Code
After you have converted the theme to HTML 5, you can then add the code.
I have already provided the code in this tutorial.
The only difference is the CSS code and here it is:
/* 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;
text-align: center;
}
.executive-pro-portfolio .archive-title {
text-align: center;
margin-bottom: 30px;
margin-bottom: 3rem;
}
.executive-pro-portfolio .portfolio {
float: left;
padding: 0 10px 10px;
padding: 0 1rem 1rem;
width: 30%;
}
.executive-pro-portfolio .portfolio:nth-of-type(3n+1) {
clear: left;
}
.single-portfolio .content {
text-align: center;
}
.executive-pro-portfolio .entry,
.single-portfolio .entry {
margin-bottom: 0px;
margin-bottom: 0rem;
}
.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;
border: 2px solid black;
}
.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;
}
}I’ve added a hover effect and border which you can easily modify or remove.
Most of the code comes from the Executive Pro portfolio theme as its an excellent way to add a portfolio page in StudioPress HTML 5 themes.
Please read the entire post i linked to above as it includes important steps you need to take to successfully add the portfolio to the Education child theme.
Leave a Reply
You must be logged in to post a comment.