Customizing the Portfolio page layout

This tutorial goes over how to edit the portfolio page template to include Bootstrap classes and components to arrange the portfolio items on the page. You will start by including the Bootstrap grid system to get the portfolio items in a three column layout. Once this has been completed, you will add the Bootstrap thumbnail class to the images and also add Bootstrap buttons for each portfolio item.

Steps

  1. Go into the WordPress Dashboard and add three more Portfolio items with content and featured image
  2. Open the template-portfolio.php page template and add the Bootstrap classes. This page template should now look like the following:

  3. Open style.css and create a new commented section for the Portfolio styles. The CSS styles should look like the following:

  4. Done!

Notes from the Video

You can find the Bootstrap CSS grid system here. The Bootstrap thumbnail class that we used in this tutorial can be found here. We have used the Bootstrap buttons in several other tutorials, but you can find those classes here.

Feedback

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

  • Leon Gotje

    I had to change “thumbnail” to “img-thumbnail” in order to look good in the anchor.

  • Thank you! And comment bellow is probably right, it should be img-thumbnail class with images…

  • Alessandro “Elio” Milani

    Great improvements with this… I have a problem to fix, on the portfolio page I have the limitation of the “post per page” related to blog/home page for wordpress… how we can override the default query to show out all of ours portfolio items… portfolio page doesn’t have a pagination indeed… could you kindly help me Brad? Thanks a lot for your courses 🙂

    • Alessandro “Elio” Milani

      find the solution myself, just modify the query in this way:
      $the_query = new WP_Query( array('post_type' => 'portfolio', 'posts_per_page' => '16') ); ?

      hope this could help 🙂

      thanks anyway Brad