WP SITES

2966

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Portfolio Page Template For Genesis

1. Simply copy and paste the first code block from the view raw link and paste it at the end of your child themes functions.php file

Update : This new template is far more flexible and enables you to use any post type.

2. Then copy the 2nd much larger code block and paste it into a new file named page_portolio.php using a code editor like Notepad++.

Note: This code works with the Modern Portfolio Pro theme and uses existing CSS for styling. You’ll need the CSS near the end of this post for other themes.

3. Upload the new template to your child themes root directory

4. Create a new page and select the Portfolio Page template from the Page Attributes and publish the page.

page attributes

Here’s the result which you can easily customize:

Portfolio Page Template for Genesis

HOW TO CONFIGURE THE PORTFOLIO PAGE WIDGET AREA

  1. Add a title which describes the posts featured on this page
  2. Select the category of posts you wish to display
  3. This tutorial displays 6 featured posts in this widget area. You can display any number
  4. Check the box to display Featured Images
  5. Select the portfolio Image Size
  6. Select the Image Alignment option of “Left”
  7. Check the box to display Post Title
  8. Select the Content Type of “No Content”
  9. Limit Content to 0 Characters
  10. Use the text “[Read More…]” in the More Text field
  11. Click the Save button to save your settings

Go to Appearance > Widgets & configure the settings:

Widgets Portfolio Page Template Settings

If you want to use this template on other StudioPress child themes, you’ll need to grab the CSS code from the Modern Portfolio Pro themes style.css file.

Here’s what it looks like on another Genesis child theme using the CSS (above) from Modern Portfolio Pro and a few tweaks.

Portfolio Page template Genesis sample theme

Related Solutions

Reader Interactions

Comments

  1. Hi!

    Thanks for the tutorial! I’m trying to add this portfolio layout for my site. I’m using the Parallax Pro Theme and have carried out all the steps you’ve mentioned above. However I’m still not able to locate a widget to set up the portfolio layout on my page. Please advise the best option.

    Thanks!
    Shikha

    Reply

  3. Thanks for taking the time to make and share this. Works fine for me and just what I was looking for. Much appreciated.

    Reply

  4. Hi Brad,

    I followed the instructions outlined above, but I can’t get it to work with the Parallax Pro Theme. I’m in the proces of switching from the Executive Pro theme to the Parallax Pro Theme.
    When I first activated the Parallax theme, my exisiting portfolio just didn’t show up, so I thought your instructions would correct this.
    But now all I get when I go to the portfolio section is a 404 error, and there is no Portfolio section in my WP Dashboard.
    is there something else I need to do?

    p.s.: I’m a newby

    Reply

  5. Thanks for the tutorial! All works great, but I am not seeing the portfolio image size 340×230 as an option in the featured post widget. Where would I add those dimensions so the image displays properly?

    Thanks!

    Reply

    • Simply add this code to your functions file and modify the sizes to whatever you need.

      add_image_size( 'portfolio', 340, 230, true );
      Reply

      • Perfect! Thanks.

        I can’t seem to get them to line up 3 in a row. Two across is the best I’ve gotten . . . any ideas?

        Reply

        • Depends on which theme you’re using because they are different widths.

          Make sure you crop all featured images to exactly the same size before uploading.

          You may have to reduce the padding, margins and width in the CSS if your images are larger or your themes width is smaller.

          Uses the Genesis Featured Posts widget.

          Reply

          • I’m using Parallax Pro, and the featured posts widget and have played with the margins, padding and width with the inspector tool.

    • You need to change the values for the width in this line of CSS:

      .mpp-home .content .featuredpost .entry {
	float: left;
	margin-right: 5.263157894737%; /* 60px / 1140px */
	width: 29.824561403509%; /* 340px / 1140px */
}

      Another option is to use the Portfolio custom post type code and change the width as well.

      Reply

      • I tried manipulating what you suggested and there were no changes. However when editing the css (below) by adding width: 20% !important; I get some changes and have to tweak the margins/paddings between the thumbnails, but it also changes the other featured-content as well.

        .mpp-home .featured-content .entry {
    border-bottom: 2px solid #f5f5f5;
    margin-bottom: 20px;
    margin-bottom: 2rem;
    padding: 0 0 24px;
    padding: 0 0 2.4rem;
    background-color: transparent;
}

        What’s the portfolio custom post type code?

        Reply

        • Amy

          I tested my solution and it works perfectly.

          Try clearing any caching you have which could be server side, caching plugins and browser caching.

          Here’s the code to create a custom post type portfolio style to any theme.

          Please note: All themes are coded differently so some effort is required on your behalf you will need to modify the CSS.

          Reply

          • Even if I’m using Modern Portfolio, the css (above still applies)?

            Using the (above) css, I can make the thumbnails 4 across, but it also changes the featured images (that I have in the footer widgets).

          • Yes

            There are no footer widgets in this template.

            The body class effects the styling of the widgets in the body of the page.

            You will have to modify the code if you want to style the footer widgets differently or use the code to create a portfolio custom post type.

            Another option is to use classes which only only to the widgets in the body of the page template.

            Here’s how the footer widgets look using the code from this post.

            footer widgets

            You could also remove the widgets from the page template.

  7. Hi Brad,
    Thanks for taking time to work through and share so much for WP and Genesis.
    I am using the Parallax-Pro theme also and would like to have a post grid display in one of the
    .home-even areas (saving the odd areas with background images intact). With the custom home page in the Parallax-Pro theme, I’m a little confused as how the page template page-portfolio.php would work. Does this process create a portfolio widget? Since Parallax removes the default loop, would adding back a portfolio loop be a better way to go? If so, would it have to be hooked into the specific home page area? Thanks for your insights, just taking a little trip down the rabbit hole and trying to get up to speed with Genesis.
    Thanks,
    Mark

    Reply

    • Hello Mark

      Its only one method of creating a Portfolio style appearance. There are many others which i have already written about.

      I would search for wpsites.net portfolio grid using a search engine

      You could also use the genesis_grid_loop however it will require some understanding of how this works.

      Reply

  8. Brad,

    I’m using Parallax Theme and i would like to use the page that i’ve created with these instructions as one of the home widgets available. Is this possible? In resume, i want to use pages as widgets.

    Regards,
    Guga

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *