Creating a Portfolio Based WordPress Website.

Having a portfolio page on a website can be used for so many things.  People often think about a portfolio as a way of showcasing their recent work, often work surrounding a creative or development project.  For example, graphic designers may use a portfolio to showcase their logo, print, or website designs.  A builder or an architect may use a portfolio to showcase designs in the form of graphic renderings or as a final product.  However, a portfolio by definition is something used to hold materials such as papers, maps, drawings, photos, etc.  When talking finance, a portfolio refers to a group of investments.

The key takeaways here are that a ‘Portfolio’ has many uses and that they can hold and or group items of all types. You can use a portfolio to showcase all sorts of things like stamps, baseball cards, coins, photos, trees, places, team members, and much more.

In this post, I am going to demonstrate how to create a portfolio for your WordPress website.

Note: This post is written for more advanced web developers.  For example, I would recommend that you always do things such as this in a child theme.  Making customizations to a theme that you have downloaded from a third party (a theme that you didn’t develop yourself), means that you will not be able to take theme updates.  If you do, the theme update will wipe out all customizations.

The first thing I recommend doing is to create a custom post type (CPT).  I like doing a custom post type so that there is a clear place to add and edit portfolio items. For example, in the image below you can see that I have a site where I have created a CPT for Projects, Publications, and Reviews.  This just makes it super easy to keep my content organized.

To create a CPT, place the following code into your ‘functions.php’ file

Note:  ‘Projects’ can be changed to just about anything.  I have used this exact same snippet to create CPTs for ‘Trees’, ‘People’, ‘Clients’, etc.

Now that we have a CPT, go into the admin and add a few sample projects that you can use to test this. Make sure you give it a title, add an excerpt, and add a featured image.

Once you have created a CPT and have added a few sample entries, you will want to display them on the front end of your site.  The next step is to create the template that you will use to display your projects.  Go into your theme directory and add a page called ‘projects-page.php’. In this new template, make sure to add the following to the top:

Make sure the template also contains the get_footer code:

Once you have the basic foundation of your template in place, you will need to create the desired layout and then add the php that queries your CPT:

<?php
/* Query the post */ 
$args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );
$loop = new WP_Query( $args ); //In this line we are telling WP to query the 'projects' CPT
while ( $loop->have_posts() ) : $loop->the_post(); //In this line we are saying keep looping through the 'projects' CPT until all are returned

Note:  In the query above you have started a while loop. In the code snippet below, we will end the while loop.

At this point, you have queried the CPT and now you need to display it on your website. While still working with the projects-page.php, add the following:

                                                
<?php echo '<div class="project">';?>
    <a href="<?php print get_permalink($post->ID) ?>"><?php echo the_post_thumbnail(); ?></a>
        <h4><?php print get_the_title(); ?></h4>
        <?php print get_the_excerpt(); ?><br />
        <a href="<?php print  get_permalink($post->ID) ?>">Details</a>
</div> <!-- End individual project col -->

<?php endwhile; ?>

In the snippet above, you will notice the addition of html tags. These tags control the layout of the page. It is important to include these within the while loop so that each project that is returned, gets the exact same html structure. In the code example above, the query will return the ‘Featured Image’ as a thumbnail, the ‘Title’ styled as an H4, the projects excerpt, and then a ‘Details’ link.

Note:  Because we are using a CPT, you will also need to add theme support for the post thumbnail. You may even need to define the thumbnail dimensions prior to using this code example.

add_theme_support( 'post-thumbnails', array( 'projects' ) ); // adds thumbnail support for the Projects CPT

When finished your projects.page.php should look something like this:

<?php
/* Template Name: Projects Portfolio */
 
get_header(); 

?>
<!-- ============ CONTENT START ============ -->
<div class="container>
        <div class="row">
        <div id="content-projects" class="page-wrap">
            <div class="col-sm-12 content-wrapper">
                <?php while ( have_posts() ) : the_post(); ?> <!--queries the projects-page.php-->
                    <?php the_content() ?> <!--Grabs any content added to the Editor-->
                    <?php endwhile; // end of the loop. ?>
            </div><!-- End intro/descriptive copy column-->
        </div> <!-- End intro/descriptive copy container-->
    </div>
        
    <div id="projects" class="row">        
    <!-- Start projects Loop -->
        <?php
        /* 
        Query the post 
        */
        $args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); 
                                                    
        <?php echo '<div class="project col-sm-6 col-md-4">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
                <?php echo the_post_thumbnail(); ?></a>
                <h4><?php print get_the_title(); ?></h4>
                <?php print get_the_excerpt(); ?><br />
                <a class="btn btn-default" href="<?php print  get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?>
    
    </div><!-- End Projects Row -->
</div><!-- End Container --> 

<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

Final Note:  Your html and css classes will need to be adjusted accordingly to match your website design. In my example, I am using Bootstrap to create my layout and I have created classes such as project and page-wrap…