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
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++.
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.
Here’s the result which you can easily customize:
HOW TO CONFIGURE THE PORTFOLIO PAGE WIDGET AREA
- Add a title which describes the posts featured on this page
- Select the category of posts you wish to display
- This tutorial displays 6 featured posts in this widget area. You can display any number
- Check the box to display Featured Images
- Select the portfolio Image Size
- Select the Image Alignment option of “Left”
- Check the box to display Post Title
- Select the Content Type of “No Content”
- Limit Content to 0 Characters
- Use the text “[Read More…]” in the More Text field
- Click the Save button to save your settings
Go to Appearance > Widgets & configure the 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.
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
I only provide customization support and answers to questions from members
Thank you so much! Exactly what I was looking for! Worked perfectly.
Thanks for taking the time to make and share this. Works fine for me and just what I was looking for. Much appreciated.
You’re welcome Travis.
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
You need to select the Portfolio Page page template from the Page Attributes for any page.
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!
Simply add this code to your functions file and modify the sizes to whatever you need.
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?
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.
I’m using Parallax Pro, and the featured posts widget and have played with the margins, padding and width with the inspector tool.
Another option is to use the portfolio custom post type with your theme.
How can we change the three column layout to something else, say 4 or 5 across?
You need to change the values for the width in this line of CSS:
Another option is to use the Portfolio custom post type code and change the width as well.
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.
What’s the portfolio custom post type code?
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.
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.
You could also remove the widgets from the page template.
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
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.
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
Yes. However, you may consider the portfolio custom post type method unless you want widgets.
Thank you so much for this amazing tutorial.
Simple and effective.
Keep the good work
Guga