Creating the Portfolio page templates

In this tutorial you will learn how to create the different WordPress page templates to display the Portfolio custom post type. We will query the Portfolio custom post type and loop through all the items to display them on the new page template.

Steps

  1. Create a new file in the root of your theme files called template-portfolio.php that includes the following code:

  2. Create a new Page in the WordPress Dashboard called Portfolio and pick the “Portfolio” template in the right sidebar
  3. Publish this page and add it to the main menu
  4. Add a filler portfolio item to the Portfolio custom post type from the WordPress Dashboard
  5. View the Portfolio page on the front-end of your site and you will notice your newly created portfolio item
  6. Create a new file in the root of your WordPress theme files called single-portfolio.php with the following code:

  7. Done!

Note: If you get a 404 error on the Single Portfolio page, go to the WordPress Dashboard. From here go to Settings -> Permalinks and click “Save Changes”. Your single portfolio page should now work!

In the next tutorial we will start arranging, styling, and adding Bootstrap classes to the portfolio page.

Notes from the Video

Here is a link to the WordPress codex where I got the WP_Query markup for the portfolio. This is also the page where you can find and learn about the different parameters the WP_Query class will accept.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Portfolio page works fine. However, I’m getting a 404 error on the single portfolio item. Any ideas?

    • Yeah, this happens sometimes when creating new page templates. You just need to re-save your Permalinks. From the WordPress Dashboard go to Settings-> Permalinks and click Save Changes.

      • Worked perfectly! Thank you, my friend!

      • Hank Fischer

        I had same problem. Brad it might be helpful to add: “Re-save your Permalinks. From the WordPress Dashboard go to Settings-> Permalinks and click Save Changes.” to the tutorial. Save some folks some trouble of having to trouble shoot.

        • Sounds good. I will add this in the instructions.

        • Dan Armatis

          You can also add this hook to the functions.php file:
          add_action( ‘after_switch_theme’, ‘flush_rewrite_rules’ );

          Place it just before:
          add_action( ‘after_setup_theme’, ‘bootstrapwp_setup’ );

          This will re-write the permalink rules every time you switch themes (or when you initially add the theme).

          • Mark

            Thanks for this.

        • Mark

          I had the same problem and was resolved the same way.

  • Abu Jorhom

    Yup, same problem. But it’s good that you’ve included the note.

  • bn86

    I notice the code above for the single-portfolio.php uses bootstrapwp_post_nav(); instead of the bswp_post_navigation(); we set up in a previous tutorial. Is there a reason, or maybe I’m missing something?

  • Ihateyourprius

    originally in single-portfolio.php I had and i got a fatal error. I then changed it to . This displayed a page but its missing the page title and the image. The comments show up though. What am I missing here?

  • lilyh

    Photos that have portrait orientation rather than a landscape orientation (i.e. tall vs. wide) shows up cropped as a landscape photo in the single portfolio page. For example — superman photo shows up cropped as a landscape photo with just his check. Do you know what this would be the case?

    • You can create and use whatever image height and width you would like. Check out: https://codex.wordpress.org/Function_Reference/the_post_thumbnail

      Another option would be to add the img-responsive Bootstrap class to make the image responsive. It would look like this:

      Moving forward please ask your support questions in the forum. Thanks!

      • lilyh

        Thanks! Will post other questions in the forum. Thanks! Really enjoying your course!

  • Thank you. Everything works.

  • Atul Khandelwal

    In single-portfolio.php i’m not getting thumbnail, but comment & title is coming,

    • Do you have this call in the template file: the_post_thumbnail();

      Make sure you have a featured image set.

  • Sabra Awlad Issa

    In single-portfolio.php I hade to change:

    to

    For it to work

    • Yeah, you are probably using a different version of underscores than the one I provide at the beginning of the tutorials. The version you are using puts the partials in a directory called template-parts.