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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Add Portfolio Page To Prose Theme
  • Add Portfolio Custom Post Type To Focus Theme
  • How To Add Portfolio Page To Eleven40 Theme
  • Add Portfolio Category Archive Page To Metro Theme
  • Create Multiple Portfolio Style Category Archive Pages in Crystal Theme
  • How To Add A Second Portfolio Page To Genesis

Reader Interactions

Comments

  1. jwmcgregor says

    February 9, 2016 at 12:23 am

    Hi,
    Trying to adapt this to the studio pro theme – getting only one column .
    any suggestions

    Jim

    Log in to Reply
    • Brad Dalton says

      February 9, 2016 at 12:49 am

      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

      Log in to Reply
  2. Andrew Rainey says

    October 4, 2014 at 11:47 pm

    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

    Log in to Reply
  3. Tim Squires says

    April 11, 2014 at 2:00 am

    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

    Log in to Reply
  4. Brad Dalton says

    April 10, 2014 at 10:30 am

    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.

    Log in to Reply
  5. Tim Squires says

    April 10, 2014 at 12:05 am

    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

    Log in to Reply
  6. Joel says

    March 7, 2014 at 3:45 pm

    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!

    Log in to Reply
    • Brad Dalton says

      March 7, 2014 at 5:01 pm

      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?

      Log in to Reply
      • Joel says

        March 7, 2014 at 5:45 pm

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

        Log in to Reply
        • Brad Dalton says

          March 7, 2014 at 6:59 pm

          Excellent and thanks for sharing.

          Log in to Reply
  7. aline chahine says

    March 6, 2014 at 5:32 pm

    Hi Brad.. Awesome Tutorial.. does it work also with parallax Pro? same procedure?

    Thanks

    Log in to Reply
    • Brad Dalton says

      March 6, 2014 at 6:01 pm

      Should do. Might be a little bit of tweaking the CSS.

      Log in to Reply
  8. Justin says

    February 9, 2014 at 2:08 am

    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!

    Log in to Reply
    • Brad Dalton says

      February 9, 2014 at 9:31 am

      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?

      Log in to Reply
      • Justin says

        February 9, 2014 at 6:19 pm

        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!

        Log in to Reply
        • Brad Dalton says

          February 9, 2014 at 6:23 pm

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

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

          Log in to Reply
          • Justin says

            February 9, 2014 at 7:25 pm

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

          • Brad Dalton says

            February 9, 2014 at 7:50 pm

            Good to hear Justin

  9. Rey Belen says

    January 31, 2014 at 7:37 pm

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

    Log in to Reply
    • Brad Dalton says

      February 1, 2014 at 6:29 am

      Hello Rey

      You can use either categories or taxonomy types to group together single custom post types into archive pages.

      Log in to Reply
  10. Kate says

    January 9, 2014 at 7:08 pm

    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.

    Log in to Reply
    • Brad Dalton says

      January 9, 2014 at 7:15 pm

      Hello Kate.

      What isn’t working?

      Log in to Reply
  11. Dave says

    December 5, 2013 at 5:22 pm

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

    Log in to Reply
    • Brad Dalton says

      December 5, 2013 at 5:45 pm

      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.

      Log in to Reply
      • Dave says

        December 11, 2013 at 6:45 pm

        Thanks Brad, I’ll give it a try.

        Log in to Reply
      • Dave says

        December 12, 2013 at 7:15 pm

        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?

        Log in to Reply
        • Brad Dalton says

          December 12, 2013 at 10:14 pm

          That has something to do with the PHP code. You must have missed something.

          Log in to Reply
  12. alicia says

    November 21, 2013 at 9:57 pm

    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.

    Log in to Reply
    • Brad Dalton says

      November 22, 2013 at 8:42 am

      Hello Alicia

      Here’s a solution which i used to fix the same problem http://wpsites.net/web-design/how-to-change-content-width-for-media-embeds-conditionally/

      Log in to Reply
  13. Sigrun says

    October 20, 2013 at 4:40 pm

    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?

    Log in to Reply
  14. Sigrun says

    October 20, 2013 at 3:31 pm

    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?

    Log in to Reply
    • Brad Dalton says

      October 20, 2013 at 3:41 pm

      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.

      Log in to Reply
      • Sigrun says

        October 20, 2013 at 4:42 pm

        Great, that worked out. Thank you.

        Log in to Reply
        • Brad Dalton says

          October 20, 2013 at 5:14 pm

          The permalinks?

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

          Log in to Reply
          • Sigrun says

            October 20, 2013 at 7:25 pm

            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?

          • Brad Dalton says

            October 20, 2013 at 8:44 pm

            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.

          • Sigrun says

            October 21, 2013 at 8:22 am

            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.

          • Brad Dalton says

            October 21, 2013 at 9:36 am

            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.

  15. Zimbrul says

    October 3, 2013 at 10:29 pm

    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.

    Log in to Reply
    • Brad Dalton says

      October 3, 2013 at 11:32 pm

      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.

      Log in to Reply
  16. Joseph says

    October 2, 2013 at 4:36 pm

    Brilliant: Thanks Glad to see that giving hand is working so well !

    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.