• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  1. exelexys says

    March 4, 2014 at 9:34 pm

    seems archive-portfolio.php isn’t being loaded, though not sure why

    Log in to Reply
    • Brad Dalton says

      March 5, 2014 at 4:10 am

      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.

      Log in to Reply
      • exelexys says

        March 5, 2014 at 4:16 am

        After developing for a couple of decades, relatively sure it’s not a syntax error or pasting into the wrong file.

        Unfortunately this is my first pass with Genesis and don’t know its ins and outs. What would comprise code with restricted access?

        Log in to Reply
        • Brad Dalton says

          March 5, 2014 at 4:29 am

          Works perfectly for me and took less than 15 minutes.

          Portfolio

          Log in to Reply
          • exelexys says

            March 5, 2014 at 4:30 am

            this was on a clean install of Agency Pro?

  2. exelexys says

    March 4, 2014 at 9:05 pm

    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?

    Log in to Reply
    • Brad Dalton says

      March 5, 2014 at 4:07 am

      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.

      Log in to Reply
      • exelexys says

        March 5, 2014 at 4:10 am

        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

        Log in to Reply
        • Brad Dalton says

          March 5, 2014 at 4:11 am

          Let me test it locally and see.

          Log in to Reply
        • Brad Dalton says

          March 5, 2014 at 4:30 am

          The CSS code in the tutorial i linked to uses the lifestyle-pro-portfolio body class not the executive-pro-portfolio class.

          Log in to Reply
          • exelexys says

            March 5, 2014 at 4:35 am

            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

          • Brad Dalton says

            March 5, 2014 at 4:40 am

            Lifestyle Pro does not include a Portfolio page or any CSS for a portfolio.

          • exelexys says

            March 5, 2014 at 4:44 am

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

          • Brad Dalton says

            March 5, 2014 at 5:04 am

            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.

          • exelexys says

            March 5, 2014 at 5:09 am

            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!

          • Brad Dalton says

            March 5, 2014 at 5:50 am

            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.

          • exelexys says

            March 5, 2014 at 5:58 am

            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?

          • Brad Dalton says

            March 5, 2014 at 6:40 am

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

          • exelexys says

            March 5, 2014 at 7:02 am

            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

          • Brad Dalton says

            March 5, 2014 at 7:10 am

            You must have missed some code.

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

          • exelexys says

            March 5, 2014 at 7:16 am

            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!

          • Brad Dalton says

            March 5, 2014 at 7:25 am

            Done. Thanks for the pickup

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.