WP SITES

Log in

Portfolio Page Template For Genesis

—

by

Brad Dalton

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

Comments

24 responses to “Portfolio Page Template For Genesis”

  1. Shikha Avatar
    Shikha

    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

    1. Brad Dalton Avatar
      Brad Dalton

      I only provide customization support and answers to questions from members

  2. Ann Marie Gill Avatar
    Ann Marie Gill

    Thank you so much! Exactly what I was looking for! Worked perfectly.

  3. Travis Avatar
    Travis

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

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome Travis.

  4. Toon Avatar
    Toon

    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

    1. Brad Dalton Avatar
      Brad Dalton

      You need to select the Portfolio Page page template from the Page Attributes for any page.

  5. Stephanie Avatar
    Stephanie

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      Simply add this code to your functions file and modify the sizes to whatever you need.
      [code]
      add_image_size( ‘portfolio’, 340, 230, true );
      [/code]

      1. Stephanie Avatar
        Stephanie

        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?

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          1. Stephanie Avatar
            Stephanie

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

          2. Brad Dalton Avatar
            Brad Dalton

            Another option is to use the portfolio custom post type with your theme.

  6. AMY Avatar
    AMY

    How can we change the three column layout to something else, say 4 or 5 across?

    1. Brad Dalton Avatar
      Brad Dalton

      You need to change the values for the width in this line of CSS:
      [code]
      .mpp-home .content .featuredpost .entry {
      float: left;
      margin-right: 5.263157894737%; /* 60px / 1140px */
      width: 29.824561403509%; /* 340px / 1140px */
      }
      [/code]

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

      1. Amy Avatar
        Amy

        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.
        [code]
        .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;
        }
        [/code]
        What’s the portfolio custom post type code?

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          1. Amy Avatar
            Amy

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

          2. Brad Dalton Avatar
            Brad Dalton

            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. Mark Purvis Avatar
    Mark Purvis

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  8. Guga Fiel Avatar
    Guga Fiel

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Yes. However, you may consider the portfolio custom post type method unless you want widgets.

  9. Guga Fiel Avatar
    Guga Fiel

    Thank you so much for this amazing tutorial.
    Simple and effective.

    Keep the good work
    Guga

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.