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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

  • Grid Loop With Image Hover Overlay
  • Add Responsive Portfolio Page To Lifestyle Pro
  • Custom Portfolio Template With Hover Effects Using Genesis Featured Posts Widget
  • Flexible Responsive Widgets Template for Genesis
  • Use Portfolio Grid Style CPT Layout On Any Archive Page

Reader Interactions

Comments

  1. Shikha says

    November 13, 2014 at 11:22 am

    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

    Log in to Reply
    • Brad Dalton says

      November 13, 2014 at 11:38 am

      I only provide customization support and answers to questions from members

      Log in to Reply
  2. Ann Marie Gill says

    June 26, 2014 at 4:27 am

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

    Log in to Reply
  3. Travis says

    March 14, 2014 at 9:37 am

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

    Log in to Reply
    • Brad Dalton says

      March 14, 2014 at 9:49 am

      You’re welcome Travis.

      Log in to Reply
  4. Toon says

    March 6, 2014 at 4:25 pm

    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

    Log in to Reply
    • Brad Dalton says

      March 6, 2014 at 6:03 pm

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

      Log in to Reply
  5. Stephanie says

    March 4, 2014 at 12:35 am

    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!

    Log in to Reply
    • Brad Dalton says

      March 4, 2014 at 5:44 am

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

      add_image_size( 'portfolio', 340, 230, true );
      Log in to Reply
      • Stephanie says

        March 6, 2014 at 7:07 pm

        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?

        Log in to Reply
        • Brad Dalton says

          March 6, 2014 at 8:34 pm

          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.

          Log in to Reply
          • Stephanie says

            March 7, 2014 at 12:22 am

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

          • Brad Dalton says

            March 7, 2014 at 4:43 am

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

  6. AMY says

    February 23, 2014 at 8:47 pm

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

    Log in to Reply
    • Brad Dalton says

      February 23, 2014 at 11:13 pm

      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.

      Log in to Reply
      • Amy says

        February 24, 2014 at 12:51 am

        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?

        Log in to Reply
        • Brad Dalton says

          February 24, 2014 at 1:07 am

          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.

          Log in to Reply
          • Amy says

            February 24, 2014 at 2:53 am

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

          • Brad Dalton says

            February 24, 2014 at 3:19 am

            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 says

    February 19, 2014 at 10:38 pm

    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

    Log in to Reply
    • Brad Dalton says

      February 20, 2014 at 2:50 am

      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.

      Log in to Reply
  8. Guga Fiel says

    February 9, 2014 at 11:21 am

    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

    Log in to Reply
    • Brad Dalton says

      February 9, 2014 at 11:35 am

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

      Log in to Reply
  9. Guga Fiel says

    February 9, 2014 at 9:28 am

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

    Keep the good work
    Guga

    Log in to Reply

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.