Create a simple WordPress portfolio with static pages

In this post I show how you can create a simple portfolio with static pages and a page template in WordPress. The portfolio template should represent the subordinate pages of the current page in a grid layout.

There are a number of plugins for portfolios, most of which are based on their own custom post type. The use of a plugin is useful if additional, individual fields such as a project URL, sorting the portfolio in different categories or a search function should be supported.

For very simple websites, these features may not be needed at all. Sometimes you just want a simple portfolio that can display a few projects or services in a grid layout.

With a little code, a simple portfolio can also be implemented with static pages. As a theme developer, you can also make the feature available to your users as a page template. This tutorial shows you how to do it.

Create template function for WordPress portfolio

At the beginning we create a new function in the functions.php of the theme. If you want to expand an existing theme, you should create a child theme and add the code there.

 /** * Displays static pages in a grid layout. */ function theme_slug_child_page_grid() { }

In the first part of the function we get all static pages from the database that are to be displayed in the portfolio. We create a database query with the WP_Query class from WordPress.

 // Get current page ID. $page_id = get_the_ID(); // Get Child Pages from Database. $query_arguments = array( 'post_type' => 'page', 'post_parent' => (int) $page_id, 'posts_per_page' => -1, 'no_found_rows' => true, 'orderby' => 'menu_order title', 'order' => 'ASC', ); $portfolio_query = new WP_Query( $query_arguments );

The get_the_ID () function gives us the ID of the page. With the specification of post_type and post_parent we create a query which returns all child pages of the current page.

The remaining arguments deactivate the pagination (page numbering) and later order the portfolio based on the order defined in the page attributes.

The second part of our function is the WordPress loop with the output of the portfolio.

 // Check if there are child pages. if ( $portfolio_query->have_posts() ) : ?> <div class="child-page-grid"> <?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); get_template_part( 'template-parts/content', 'portfolio' ); endwhile; ?> </div> <?php endif;

The individual portfolio elements should be displayed using the template file content-portfolio.php . The template is loaded with get_template_part () and can thus be overwritten in a child theme.

I published the complete function as Github Gist .

Add content template and styling for the portfolio

The content-portfolio.php can be created in the folder / template-parts and could look something like this:

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_post_thumbnail( 'medium' ); ?> </a> <header class="entry-header"> <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?> </header> </article>

In my example, the featured image and the title of the static page are output. The code can be extended here as you wish, for example to display some text or individual fields.

In the style.css we now have to take care of the styling of the portfolio in a simple grid layout. At the moment, this works best with Flexbox. See also my tutorial about grid layouts with Flexbox .

 .child-page-grid { display: flex; flex-wrap: wrap; margin-right: -2em; } .child-page-grid .type-page { width: 33.33333333333%; box-sizing: border-box; padding-right: 2em; padding-bottom: 2em; } .child-page-grid .type-page .entry-title { margin: 1em 0 0; font-size: 20px; font-size: 1.25rem; }

In addition to the grid layout, I've also reduced the size of the page titles and adjusted the distance to the featured image.

Output of the template function in the portfolio page template

Finally, we can create a new page template with the name Portfolio in our theme.

 <?php /** * Template Name: Portfolio * * @package Twenty Sixteen Child */

The page template is based on the page.php of a normal static page and shows the portfolio after the content by calling our new function theme_slug_child_page_grid () .

 <div class="entry-content"> <?php the_content(); // Display Portfolio. theme_slug_child_page_grid(); ?> </div>

In my example for this tutorial, I used a child theme for TwentySixteen. You can find the complete file for the page template in this Github Gist .

Create static pages for portfolio

After our portfolio has been technically implemented, we can now create the required pages in the WordPress backend. For example, an overview of the services offered by a web agency would be conceivable.

For this purpose, a static page Services is created and the new Page Template Portfolio is assigned. Then some child pages are created for this page.

/ services / web design /
/ services / web development /
/ services / seo /

The parent page serves as an overview and shows all the services offered in a grid layout.

The result is a simple WordPress portfolio:

Conclusion

This tutorial shows a basic structure of how static pages can be used to create a simple portfolio without a lot of frills.

For reasons of space, the code is very reduced. For live use, for example, the styling has to be refined so that the portfolio also works on mobile devices. Further options are options for the number of columns in the portfolio or the display of certain elements.

By creating a shortcode, the code can also be used in a modified form in a plugin instead of in a page template of the theme.