WP SITES

2754

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

Add Portfolio Page To StudioPress Education Theme

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:

  1. HTML 5 is a cleaner markup structure and includes support for Schema which is output as Microdata.
  2. 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.

portfolio 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.

Reader Interactions

Comments

    • Questions that are too localized (such as syntax errors, code with restricted access, code pasted incorrectly or into the wrong file) are impossible to answer accurately.

  2. Thanks very much for this code and the accompanying tutorial (http://wpsites.net/web-design/add-responsive-portfolio-page-to-lifestyle-pro/),

    Followed the instructions to a tee to integrate the portfolio into StudioPress Agency Pro theme but for some reason ‘executive-pro-portfolio’ isn’t being inserted into the body class attribute, despite explicitly being referenced in archive_portfolio.php (see below) with predictably haywire results.

    //* Add portfolio body class to the head
add_filter( 'body_class', 'executive_add_portfolio_body_class' );
function executive_add_portfolio_body_class( $classes ) {
   $classes[] = 'executive-pro-portfolio';
   return $classes;
}

    Any idea why this might be happening?

    • In that case the CSS will not work.

      You must have missed something as the screenshot proves it works perfectly and i had no problems with this code.

      The tutorial also suggests updating to HTML 5 or the code will not work correctly.

      • Not suggesting it didn’t work, but maybe there’s something different between Agency Pro and Education which is causing the problem?

        Using HTML5 for what it’s worth.

        Thanks

          • Found this page first with Executive Pro CSS and happened to have the Executive Pro theme handy, so just pulled it the php source from it instead of Lifestyle Pro.

            Didn’t think it would make a difference (checked it and looks identical) but will try Lifestyle Pro.

            Thanks

          • Agency Pro doesn’t have a portfolio either, so didn’t think there would be a conflict from that perspective

          • The easiest way to do this is to use all the code from the tutorial or all the code from the Executive Pro theme and then you can’t go wrong.

            If you use some from the tutorial and some from the theme, it may not work.

          • started using the Executive CSS on this page, then noticed the tutorial was using Lifestyle, so backed out and thought I pulled everything from Executive theme.

            Will back everything up, start clean and use Lifestyle (like you did), Will let you know what happens. Thanks for all your help!

          • All the code is in Executive Pro themes files so i think you should stick to that.

            You can use it on any theme however the CSS may need tweaking.

          • Just realized what the problem might be (and if this is it, it’s boneheaded).

            When following the tutorial instructions, should all lifestyle-portfolio-pro (or in my case executive-pro-portfolio) references be changed to agency-pro-portfolio?

            Didn’t dawn on me at the time, but maybe that’s the problem?

          • No. As long as they use the same class as what you have generated using the PHP for adding a body class.

          • Replaced all instances of executive-pro-portfolio with agency-pro-portfolio but no luck.

            Inserting this string in the Custom Body Class field on the Portfolio Archive Settings page gets the archive page damn close but there are portfolio page issues (e.g., it’s not full width) which makes me wonder if single_portfolio.php and archive_portfolio.php are executing at all.

            Checked permissions on these files but they’re the same as the other files in the theme folder (0644). Any idea why these might not be executing?

            Thanks

          • You must have missed some code.

            Send me login details and i will take a look for you.

          • Found it. After looking at the Executive Pro files for the nth time, finally noticed they’re spelled with dashes:

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

            vs the files created via the tutorial which use underscores:

            archive_portfolio.php
            single_portfolio.php
            taxonomy_portfolio_type.php

            Replacing the underscores with dashes did the trick!

            May want to update the tutorial to reference the filenames with dashes.

            Thanks for ALL your help!

Leave a Reply