Categories
Genesis Tutorials

Add Responsive Portfolio Page To Lifestyle Pro

One of the greatest benefits of owning StudioPress themes, is the ease of mix & matching features from one child theme in another.

Two of the most popular newly released child themes are Executive Pro & Lifestyle Pro.

In this tutorial, i’ll show you how to add the portfolio page from Executive Pro to the latest Child theme released by StudioPress, Lifestyle Pro.

Lifestyle Pro Portfolio

Setup

You’ll need to copy over the following 3 files from Executive Pro to your child themes root directory:

  1. archive_portfolio.php
  2. single_portfolio.php
  3. taxonomy_portfolio_type.php

Next step is to paste all the functions.php code into your child themes functions.php file.

Then paste all the Portfolio CSS near the end of your child themes style.css file before the code for the Media Queries. You can search the style.css file in Executive Pro for portfolio and copy all the CSS which styles the portfolio over to your child themes style sheet.

Then add the CSS code for responsive design to this Media Queries section near the end of the file – @media only screen and (max-width: 767px)

Here’s what the file structure of your child themes root directory should look like:

root file structure

And here’s what it looks like inside the lib folder.

lib

Note: Don’t forget to re-save your Permalinks after adding all the code. The different blocks of code are all marked with the exact file name that needs to be created and pasted into.

Here’s all the code needed to get the job done so it looks exactly like the screenshot above:

Register for full access


Here’s the mobile view:

mobile view

Adding Portfolio Pages To Other Themes

41 replies on “Add Responsive Portfolio Page To Lifestyle Pro”

Link to the portfolio archive please.

I think your problem is that the body class generated by your archive-portfolio.php file
lifestyle-pro-portfolio
isn’t the same as whats in the CSS

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

I’ll send you a copy of theme which works.

Here’s the result on a copy of the Modern Studio Pro theme:

portfolio-archive

Hi Brad ,

Building my first site using Genesis at the moment and like this portfolio option!

Will this work with the default Genesis Child Theme or is it just the 2 themes that you have mentioned ??

Thanks

Andrew

Thanks Brad – I actually just noticed that I posted my comment on the wrong tutorial ( I meant to post over on the 1140 one)

Thanks for looking into it, but don’t worry if it’s too difficult – the new pro theme may not support the code properly.

Thanks again,
Tim

Hello Tim

Sorry to hear you’re having problems.

To use this code on any other theme may require modification of the code.

The other tutorial relates to Eleven40 and not Eleven40 Pro.

I’ll test it on Eleven40 Pro and see if there’s any issues.

Hi Brad, thanks for the great tutorial.

I used all of your code and everything works well from a functional point of view in the Eleven40 Pro theme, but in the same manner as one of the above comments, my thumbnails appear stacked vertically instead of horizontally across the page.

I tried re-saving the permalinks with no effect. All code and image sizes are the ones that you provided.

I noticed that you recommended another tutorial to apply when using Eleven40 Pro, but I got a bit lost with that one.

Do you have any tips on how to get the horizontal display in Eleven40 pro, or should I roll up my sleeves and give the other tutorial another try?

🙂

Thanks again,
Tim

Hi Brad, thanks to you I could add a Portfolio page to Enterprise Pro theme.

My question. How can I put the pagination area in a different place?

I have configured the portfolio to have 4 elements per row. When I go to page 2, there’s only 3 elements, so the pagination area is placed where the fourth element should go.

Is there a way to place the pagination area always in a different row?

Thank you in advanced!

There’s different solutions for this which would require modification to existing code or addition of pagination in a specific hook position.

Is it displaying beside the last CPT item on the 2nd page?

Thank you, for your quick response.

Yes, the pagination was displaying beside the last CPT item on the second page.

The solution I found was add this piece of code to the css file. Now the pagination is being displayed in the line below.

.enterprise-pro-portfolio .pagination {
clear: both;
}

Love this tutorial AND I’m struggling to get it to work. The mysite.com/portfolio page loads, but it looks like a typical blog page.

I’ve flushed the re-write rules several times but to no avail.

Note: I did have a portfolio beforehand using the Balance theme – would that be causing confusion within WordPress? Thank you!

Shouldn’t but try renaming the CPT and slug and then resave Permalinks.

Have you included the archive-portfolio.php template?

Are you running HTML 5?

Brad,

Thanks for the help. I’m still struggling. Everything is installed properly and I’ve created a “type” within the Portfolio admin post type.

Yes, archive_portfolio.php is included and I’m running HTML5.
(Should there be a dash in the URL instead of an underscore?)

But I still get a normal blog style output on my portfolio page:
http://www.jrhcreative.com/portfolio/

The single entry works.
http://www.jrhcreative.com/portfolio/jabil-in-store-diagnostic-tool/

Do you see anything suspect that I could be missing? Thank you for all your help thus far!

The template is working fine so it must be your functions PHP or CSS

See this in the source code post-type-archive-portfolio

Brad – that was helpful! A little bit of CSS editing did the trick. Thank you for quick responses and help!

Hi Brad, this tutorial is really great. Just hit what I needed for the magazine pro that I will be using on my next update on my blog.
But, I have just one question, can the entries be sorted according to their category on the front-end? depending on what the visitor would like to see?

Eg.

PHOTOS (Portfolio)
Categories : Travel | Food | Personal

By default, all the photos will be shown, but If i want all just travel photos, it will be just the photos in that category.

Thanks Brad. 🙂

Hey Brad, this tutorial seems to be exactly the solution I’ve been looking for. I use the Magazine Pro theme and want all of my category and tag archive pages to display thumbnails and post titles only. I understand how to install your code as provided, but I don’t know what changes to make in order for it to work for Magazine Pro. Could you please provide some guidance? If you have any spare time to make a Magazine Pro tutorial, I would be forever indebted. This feature is driving me nuts.

Will this portfolio page method work on the Magazine theme? I’m presently using that as my theme for a photography website.

Absolutely Dave however you may need to tweak the width in the CSS code.

I would add all the code and see what it looks like first.

I must not be holding my mouth right or something, I added all of the code including changing references from lifestyle to magazine-orange and the Portfolio option does not show up in the Dashboard menu. Any ideas?

Thanks so much for all the great tutorials. The only issue I’m having is that I can’t seem to get a Full Width page out of this theme so all my tiled galleries are pushed over to the left side of the page.

Any thoughts on that deal?

Thanks.

Please disregard my previous comment. I now have the portfolio page but it doesn’t look like one. It is like a blog post list and not a portfolio page. Any idea what I might have done wrong?

Great tutorial and everything worked – except I cannot make the portfolio page itself – the template Portfolio doesn’t show up in possible templates for the page. Any idea what might be missing?

Please add the url to your portfolio page as a custom link URL to your menu like this: example.com/portfolio

And then Add New Portfolio CPT’s to your portfolio archive from the new menu items in your Dashboards sidebar.

Note: Don’t forget to flush your re-write rules which you can do simply by re-saving your Permalink Settings.

There’s different methods you can use to create a portfolio page in Genesis.

The permalinks?

Also make sure the images you add are cropped to the exact same size as the CSS code.

The permalinks made it work but I still have too big images in the Portfolio so it looks nothing like it should look like. I was trying to google the sizes that the Portfolio Feature Images should have and didn’t come up with an answer. In the CSS code I see no exact sizes, just percentages. Do you mean the 767 for media queries?

Did you see this in the code?

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

So the images need to be 300 x 200 or they will not fit.

By Post Author

Thank you for your reply, I really appreciate it. I didn’t realize that I had to have the feature images in a certain sizes, I thought they would be downsized automatically. If I have my feature images 300×200 and then want to use the Lifestyle Pro feature post on the home page then the images are too small for 634 width. I wonder how to solve that?

I have done this before in the Execute Pro and there all the images were automatically downsized from much larger image sizes.

Because they’re added to the single portfolio custom post type after the title and then pulled in as featured images on the archives portfolio page.

The portfolio for Lifestyle Pro uses exactly the same code as whats used in the Executive Pro theme.

Check the setup guide on the StudioPress download page for that theme.

It shows you how they added the images to all single portfolio post types.

By Post Author

At some point you should write a book with all these great tutorials you give away for free. I’ll be the first to buy it.

I’m thinking about adding a Google Custom Search for registered subscribers only.

So all you need to do is login to use the search which is highly accurate.

What do you think?

Not sure to charge a small fee or not.

Leave a Reply

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