WP SITES

Log in

Add Responsive Portfolio Page To Lifestyle Pro

—

by

Brad Dalton

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

Comments

41 responses to “Add Responsive Portfolio Page To Lifestyle Pro”

  1. jwmcgregor Avatar
    jwmcgregor

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

    Jim

    1. Brad Dalton Avatar
      Brad Dalton

      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

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

      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

  2. Andrew Rainey Avatar
    Andrew Rainey

    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

  3. Tim Squires Avatar
    Tim Squires

    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

  4. Brad Dalton Avatar
    Brad Dalton

    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.

  5. Tim Squires Avatar
    Tim Squires

    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

  6. Joel Avatar
    Joel

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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?

      1. Joel Avatar
        Joel

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

        1. Brad Dalton Avatar
          Brad Dalton

          Excellent and thanks for sharing.

  7. aline chahine Avatar
    aline chahine

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

    Thanks

    1. Brad Dalton Avatar
      Brad Dalton

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

  8. Justin Avatar
    Justin

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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?

      1. Justin Avatar
        Justin

        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!

        1. Brad Dalton Avatar
          Brad Dalton

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

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

          1. Justin Avatar
            Justin

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

          2. Brad Dalton Avatar
            Brad Dalton

            Good to hear Justin

  9. Rey Belen Avatar
    Rey Belen

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

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Rey

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

  10. Kate Avatar
    Kate

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Kate.

      What isn’t working?

  11. Dave Avatar
    Dave

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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Dave Avatar
        Dave

        Thanks Brad, I’ll give it a try.

      2. Dave Avatar
        Dave

        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?

        1. Brad Dalton Avatar
          Brad Dalton

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

  12. alicia Avatar
    alicia

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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/

  13. Sigrun Avatar
    Sigrun

    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?

  14. Sigrun Avatar
    Sigrun

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Sigrun Avatar
        Sigrun

        Great, that worked out. Thank you.

        1. Brad Dalton Avatar
          Brad Dalton

          The permalinks?

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

          1. Sigrun Avatar
            Sigrun

            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?

          2. Brad Dalton Avatar
            Brad Dalton

            Did you see this in the code?

            [code]
            add_image_size( ‘portfolio’, 300, 200, TRUE );
            [/code]

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

          3. Sigrun Avatar
            Sigrun

            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.

          4. Brad Dalton Avatar
            Brad Dalton

            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 Avatar
    Zimbrul

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  16. Joseph Avatar
    Joseph

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

Leave a Reply

Join 5000+ Followers

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