WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Add Portfolio Page To Modern Portfolio Pro Theme

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.

Portfolio Archive Page

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 );

3 columns

Reader Interactions

Comments

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

    • 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:

      add_filter( 'body_class', 'executive_add_portfolio_body_class' );
function executive_add_portfolio_body_class( $classes ) {

   $classes[] = 'executive-pro-portfolio';
   return $classes;
   
}

      Line 1314 style.css

      /* 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;
}

      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.

      • 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:

        =====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( '<a href="%s" rel="nofollow"></a>', 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&amp;size=portfolio' ) ) {
        printf( '<a href="%s" rel="nofollow"></a>', 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;
}
============================

        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

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

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

          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.

          • 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:

            //* 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&amp;size=portfolio' ) ) {
        printf( '<a href="%s" rel="nofollow"></a>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
    }
}

            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

          • 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

          • 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

          • 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

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

          • Hi Brad,
            I see that if I insert the image in the body as well as a featured image, it displays properly.
            Thanks,
            Geoff

  2. 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?

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

  3. 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.
    🙂

        • 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?

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

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

  5. 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?

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

      remove_action( 'genesis_entry_header', 'genesis_post_info', 5 );

      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.

Leave a Reply