Add Portfolio Page To Modern Portfolio Pro Theme

Dec 16, 2013

—

In this tutorial, i’ll provide all the instructions which make it as easy as possible to add a portfolio page to the Modern Portfolio Pro theme by StudioPress.

Use all the code in this tutorial (excluding the CSS) and then add this CSS code at the end of your child themes style.css file.

.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: 25%;
}

.executive-pro-portfolio .portfolio:nth-of-type(4n+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;
	}
}

You will need to go to Settings > Permalinks and re-save your permalinks to flush the cache for your re-write rules after adding the code in your theme.

Prefer More or Less Columns?

Simply change the values in these 2 code blocks for the width from 25% to 33.3% and number for nth-of-type from 4n to 3n.

.executive-pro-portfolio .portfolio {
	float: left;
	padding: 0 10px 10px;
	padding: 0 1rem 1rem;
	width: 33.33333333333%;
}

.executive-pro-portfolio .portfolio:nth-of-type(3n+1) {
	clear: left;
}

You could also increase the size of the featured image as this theme uses a wide portfolio archive template.

add_image_size( 'portfolio', 350, 200, TRUE );

Comments

29 responses to “Add Portfolio Page To Modern Portfolio Pro Theme”

Geoff Simpson

September 3, 2015

Hi Brad,

I don’t seem to be able to make this work.

I’ve followed the directions from this tutorial (http://wpsites.net/web-design/add-responsive-portfolio-page-to-lifestyle-pro/ – except the CSS), and copied the CSS from this tutorial (http://wpsites.net/web-design/add-portfolio-page-to-modern-portfolio-pro-theme/). It is still only displaying in one column.

I’ve attempted this three times with test sites – no luck.

Check out http://iam3dart.com/aspt/ and look at the test-Portfolio menu links (not the block on the homepage, which links to a category based protfolio).

(to test the Portfolio usage, I created another test site using Executive Pro, and it display as it should: http://iam3dart.com/execpro/portfolio/ )

Any ideas?

I can give you admin access to the test site if it will help.

Thanks,
Geoff

Log in to Reply
1. Brad Dalton
  
  September 3, 2015
  
  Hi Geoff
  
  Did you upload the archive-portfolio.php and taxonomy-portfolio-type.php files to your themes root directory?
  
  Both of these files include PHP code which adds a custom body class to make the CSS work:
  [code]
  add_filter( ‘body_class’, ‘executive_add_portfolio_body_class’ );
  function executive_add_portfolio_body_class( $classes ) {
  
  $classes[] = ‘executive-pro-portfolio’;
  return $classes;
  
  }
  [/code]
  Line 1314 style.css
  [code]
  /* Portfolio
  ——————————————— */
  
  .executive-pro-portfolio .portfolio {
  float: left;
  padding: 0 30px 30px;
  width: 33.33333333%;
  }
  
  .executive-pro-portfolio .portfolio:nth-of-type(3n+1) {
  clear: left;
  }
  [/code]
  
  Here’s what i get now http://wpsites.net/wp-content/uploads/2015/09/geoff.png
  
  Make sure you crop your featured images to the same size before uploading each of them.
  
  Log in to Reply
  1. Geoff Simpson
    
    September 3, 2015
    
    Hi Brad,
    
    I did upload the archive-portfolio.php and taxonomy-portfolio-type.php files to my child theme’s root directory (as well as single_portfolio.php – and the others to the lib file. I had copied and pasted your code from the Lifestyle tutorial, so both of these had “lifestyle-pro-portfolio” for the body class created:
    [code]
    =====Pasted===
    //* Add portfolio body class to the head
    add_filter( ‘body_class’, ‘lifestyle_add_portfolio_body_class’ );
    function lifestyle_add_portfolio_body_class( $classes ) {
    $classes[] = ‘lifestyle-pro-portfolio’;
    return $classes;
    }
    //* Add the featured image after post title
    add_action( ‘genesis_entry_header’, ‘lifestyle_portfolio_grid’ );
    function lifestyle_portfolio_grid() {
    if ( $image = genesis_get_image( ‘format=url&size=portfolio’ ) ) {
    printf( ‘‘, get_permalink(), $image, the_title_attribute( ‘echo=0’ ) );
    }
    }
    =====EndPasted===
    
    I changed the class from “lifestyle-pro-portfolio” to “executive-pro-portfolio” as in your reply so that it matched the added CSS”
    
    ======New===========
    //* 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;
    
    }
    //* Add the featured image after post title
    add_action( ‘genesis_entry_header’, ‘executive_pro_portfolio_grid’ );
    function executive_pro_portfolio_grid() {
    if ( $image = genesis_get_image( ‘format=url&size=portfolio’ ) ) {
    printf( ‘‘, get_permalink(), $image, the_title_attribute( ‘echo=0’ ) );
    }
    }
    ======EndNew============
    
    ======style line 1891-1900:=========
    
    .executive-pro-portfolio .portfolio {
    float: left;
    padding: 0 10px 10px;
    padding: 0 1rem 1rem;
    width: 33.33333%;
    }
    
    .executive-pro-portfolio .portfolio:nth-of-type(3n+1) {
    clear: left;
    }
    ============================
    [/code]
    Unfortunately, still no luck.
    
    I am working with images that have already been uploaded, so was going to get to the image sizing later. I would hope that wouldn’t break it (just make it look wonky until fixed). Is this a valid assumption?
    
    Next thought?
    
    Thanks,
    Geoff
    
    Log in to Reply
    1. Brad Dalton
      
      September 3, 2015
      
      I removed the custom class in Firebug and its works as seen in the image i linked to so that is your only problem.
      
      Use the class generated by the PHP code.
      
      You can use add_image_size and then regenerate thumbnails however its best to crop them manually before adding to each post or single CPT.
      
      [code]add_image_size( ‘portfolio’, 300, 200, TRUE );[/code]
      
      This size is based on 3 columns so will need adjusting if you want to use 4 columns.
      
      Also,change 3n+1 to 4n+1 if using 4 columns.
      
      Let me know if you’re still stuck.
      
      Log in to Reply
      1. Geoff Simpson
        
        September 4, 2015
        
        HI Brad,
        
        Still stuck.
        
        Which custom class did you remove in Firebug, and from where?
        
        Both archive_portfolio.php and taxonomy_portfolio_type.php have the following:
        [code]
        //* 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;
        
        }
        
        and taxonomy_portfolio_type.php also has:
        
        //* Add the featured image after post title
        add_action( ‘genesis_entry_header’, ‘executive_pro_portfolio_grid’ );
        function executive_pro_portfolio_grid() {
        if ( $image = genesis_get_image( ‘format=url&size=portfolio’ ) ) {
        printf( ‘‘, get_permalink(), $image, the_title_attribute( ‘echo=0’ ) );
        }
        }
        [/code]
        
        When you say “Use the class generated by the PHP code”, is this not what I am doing by uploading archive_portfolio.php and taxonomy_portfolio_type.php to the root of my theme directory?
        
        I get the feeling I’m missing something obvious, but for the life of me, I can’t figure it out.
        
        Geoff
      2. Brad Dalton
        
        September 4, 2015
        
        I removed the custom body class and it worked meaning the first class selector must be wrong. Whatever class you use in the PHP should be used in the CSS. Anything else won’t work.
        
        Yes, the archive files generate the custom body class but it must also be used in your CSS via your style sheet.
        
        Flush and caching also for browser/server and plugin caching.
        
        I’m on FaceTime or Hangouts of you want a video chat. brad@wpsites.net
      3. Geoff Simpson
        
        September 7, 2015
        
        Hi Brad,
        
        Thanks, but that still doesn’t help me.
        
        As for flushing and caching, I’ve tried this from numerous browsers and devices. I have no caching plugin set. Just to make sure, I setup another fresh site, and still no luck.
        I don’t understand what you mean that you “removed the custom body class and it worked meaning that the first class selector must be wrong.“
        
        If you removed the custom body class – I’m assuming you mean “executive-pro-portfolio”, that is created by the function executive_add_portfolio_body_class in both the archive_portfolio.php and taxonomy_portfolio_type.php – how could it work (i.e., there wouldn’t be a class to style)?
        
        Unless I’m missing something (and I’ve gone through these files numerous times letter by letter to see if there is a typo), all of the references in style.css refer to the .executive-pro-portfolio style.
        
        Have a look at the new test site: http://iam3dart.com/aspt2/portfolio-type/landscape/
        
        I’ve also included the text of the four revised files. Please have a quick look so that you can point me to what the actual error is. You earlier advice “Whatever class you use in the PHP should be used in the CSS. Anything else won’t work” didn’t help, as they do seem to match.
        
        Thanks in advance for your help.
        
        Geoff
      4. Brad Dalton
        
        September 7, 2015
        
        Geoff. Please send me FTP access and i’ll fix it for you.
      5. Geoff Simpson
        
        September 10, 2015
        
        Thanks for fixing the test site. I still have no idea what you did to fix it (which is what I was hoping for), but I’ll once again go through line by line to try to determine where the error was.
        
        In the meantime, although I now have a portfolio grid visible, clicking on an image brings up a page WITHOUT the associated image. I’m assuming that has to do with the code in the php files for “Add the featured image after post title”, but it’s not working in the fix you uploaded.
        
        You still have FTP access (although I would hope that you might also be able to give some indication as to the cause of the malfunction).
        
        Thanks,
        Geoff
      6. Brad Dalton
        
        September 10, 2015
        
        There are many things which where done incorrectly. It was basically a huge mess and i know you are new to WordPress however please understand it will take some time to understand how to use and coding takes several years. You don’t need to create pages for archives which the WordPress Template Hierarchy already takes care of once you add the files to your child theme.
        
        Also, you don’t add images to the start of the editor if you want to display the featured image after the title. You use code for that which i linked to already.
      7. Geoff Simpson
        
        September 10, 2015
        
        Hi Brad,
        I see that if I insert the image in the body as well as a featured image, it displays properly.
        Thanks,
        Geoff
      8. Brad Dalton
        
        September 10, 2015
        
        That may cause problems on your archive page. I suggest you use code to display it before or after the title using a code editor:
        http://wpsites.net/web-design/add-featured-image-to-single-custom-post-type-pages/
Lang Elliott

August 4, 2014

Hi Brad!

I bought Modern Portfolio Pro months ago but was disappointed to see the limited options with regard to the display of portfolios. So I’m very excited to discover this code. However, I’m a bit confused.

The above code appears to refer to a different child theme: Executive Pro. Also, you refer to code on another page that I see is written for Lifestyle Pro. This doesn’t make sense. Shouldn’t all the code apply to the same child theme, which is Modern Portfolio Pro?

In other words, shouldn’t all references to either Executive Pro or Lifestyle Pro be changed to Modern Portfolio Pro? Or will the code work in spite of using those other child theme names?

Log in to Reply
1. Brad Dalton
  
  August 5, 2014
  
  Hello Lang
  
  You need to use the code from Executive Pro which i have included in the tutorial about how to add a portfolio page to Lifestyle Pro for people who don’t own and have access to Executive Pro.
  
  Log in to Reply
  1. Lang Elliott
    
    August 5, 2014
    
    Yes, I absolutely understand that, but won’t it be necessary to change all references to “executive_pro” or “lifestyle_pro” in the code to “modern_portfolio_pro” … or something like that?
    
    Log in to Reply
    1. Brad Dalton
      
      August 5, 2014
      
      Makes no difference if you do Lang.
      
      Log in to Reply
Donna

June 30, 2014

Just purchased Modern Portfolio Pro and want to add a number of Portfolios that link to a page containing clickable thumbnails that end the viewer up on a page with a larger photo and description of each piece.

What would be the best way to accomplish this? Thanks so much. I am learning WP as fast as I can and so appreciate those of you who help us newbies out.
🙂

Log in to Reply
1. Brad Dalton
  
  July 1, 2014
  
  Hello Donna
  
  Did you use my affiliate link to purchase the theme?
  
  Log in to Reply
  1. Donna
    
    July 1, 2014
    
    Hi Brad,
    
    I’m sorry, no (she says sheepishly). I found you through a Google search while looking for help.
    
    Log in to Reply
    1. Brad Dalton
      
      July 1, 2014
      
      You’ll need custom coding for that, How many different Custom post types or is it only one?
      
      Where do you want to add a number of Portfolios?
      
      Log in to Reply
      1. Donna
        
        July 22, 2014
        
        Hi Brad,
        I’ve been on vacation and am just getting back to this.
        What I am trying to do is get post links as the portfolio links in a grid format on the Home page. That’s what made me decide to purchase this theme in the first place. When I follow the directions, I get a long list and not a grid format.
        
        Traditional artist sites have links for Paintings on Canvas, Paintings on Paper, Florals, Landscapes, etc. that take you to another page with thumbnails for all the pieces in that category. Each of those thumbnails goes to another page with info on that particular piece. Right now, I am looking for eight different portfolio links.
        
        I have made websites using MS FrontPage in the past and am having a hard time with the what I see as restrictions of the WP format. I’m not afraid to get into the guts of the thing, but am a bit unsure of changing CSS so as to not screw up everything. I read that placing changes in the child theme is recommended so as to keep the Genesis theme intact.
        
        Thanks for all you help so far.
      2. Brad Dalton
        
        July 22, 2014
        
        Hello Donna
        
        The screenshots included in this post where taken after adding the code in this post to the correct files.
        
        If its not working for you, you might need to go over the steps and check your code.
Chencho

May 27, 2014

Great job.

Is possible to add this at Modern Portfolio Pro?

Log in to Reply
Rafa

April 17, 2014

Hi! I found your tutorial very usefull but I still have a problem when following each step you described.

The portfolio page doesn´t appear as you have in the image but the author and the date are displayed under the featured image.

What can I do to hide this info?

Log in to Reply
1. Brad Dalton
  
  April 17, 2014
  
  The code to remove the post info which includes the author and date is included in the code which generates the portfolio-archive.php and supplied by StudioPress as it comes directly from the Executive Pro theme.
  
  [code]
  remove_action( ‘genesis_entry_header’, ‘genesis_post_info’, 5 );
  [/code]
  
  This is exactly the same code as what StudioPress include in their resources > Code Snippets page.
  
  The only reason it wouldn’t work is if you’re still running the old XHTML markup with old loop hooks as they have changed.
  
  Log in to Reply
  1. Rafa
    
    April 17, 2014
    
    Thank you Brad!
    
    Finally I solved this issue.
    
    Log in to Reply
    1. Brad Dalton
      
      April 17, 2014
      
      What was the problem?
      
      Log in to Reply
Kristin

December 27, 2013

is there an easy way to add the categories at the top of the page so when the visitor clicks them it will take them to just those categories?

Log in to Reply
1. Brad Dalton
  
  December 28, 2013
  
  You can add a category menu with links or use the category archives widget.
  
  Log in to Reply