A Handy Guide to Creating a Portfolio With WordPress

A Handy Guide to Creating a Portfolio With WordPress

Creating online portfolios isn’t just limited to particular industries anymore. Put it directly, other than creatives and digital agencies many business firms are also showing interest in creating an online portfolio, as it helps them share and present their work in an interactive yet professional manner.

Apparently, most of you might consider using some pre-made WordPress portfolio theme for your site. But, remember that using a pre-built design template might not help you in establishing a unique online presence. Thankfully, with WordPress you can easily create a beautiful portfolio with a blank theme.

In this post I’ll explain the steps, you must follow to convert your blank WordPress theme into a custom portfolio.

Step 1 – Create a Custom Post Type

WordPress give users the ability to create Custom Post Types (aka CPT’s) that can be used for managing all of the website content. In our case, we’ll create a CPT for saving all of our portfolio items within a particular admin section.

In order to manage the code efficiently, it is recommended that you must create a separate folder named “Portfolio” along with a PHP file called customportfolio-post-types.php (or assign it any other name as you like).

Now that have created a file for your portfolio theme, just add some code in the file provided as below:


// function: custom_post_type BEGIN

function custom_post_type()


// The function will be filled in the next step

} // function: custom_post_type END


Here in this code, we’ve created a blank function. However, to make this function work, you’ll need to add some code to it. I’ll be adding the following code snippet in the custom_post_function – that will help in creating labels for our CPT:

$labels = array(

‘name’ => __( ‘Portfolio’),

‘singular_name’ => __(‘Portfolio’),

‘rewrite’ => array(

‘slug’ => __( ‘portfolio’ )


‘add_new’ => _x(‘Add Item’, ‘portfolio’),

‘edit_item’ => __(‘Edit Portfolio Item’),

‘new_item’ => __(‘New Portfolio Item’),

‘view_item’ => __(‘View Portfolio’),

‘search_items’ => __(‘Search Portfolio’),

‘not_found’ =>  __(‘No Portfolio Items Found’),

‘not_found_in_trash’ => __(‘No Portfolio Items Found In Trash’),

‘parent_item_colon’ => ”



Let’s break down the above piece of code: 

As you can see, I’ve defined a ‘labels’ variable in the code. The variable is, basically, an array of strings that determine the type of your post. Furthermore, each of the strings is an output to a specific function.

  • name – It identifies the name of the post type in the plural form.
  • singular_name – It determines the custom post type name in the singular form.
  • rewrite – Rewrite your website permalinks using this format.
  • add_new – This is a menu item that helps add a new post.
  • edit_item – This represents the item in the header while a post is being edited.
  • new_item – Display new item within the favourites menu in the header section of the admin panel.
  • view_item – It is shown together with permalink on the edit post screen.
  • search_items – It determines what text will be displayed for the search box available on the edit posts screen.
  • not_found – Displays the text when no posts are discovered when searching in the admin.
  • not_found_in_trash – Display the text when no posts are found in the trash.
  • parent_item_colon – It is a label that is used for a parent post on the editor screen. 

 Step 2 – Create a Portfolio Page 

The above step will help in configuring the settings of the entire portfolio. Of course, you wouldn’t want a blank portfolio theme. So, your next step should be to output all your portfolio items. For this, just create a new PHP file and assign it a name called myportfolio.php. But, let us first insert some essential components needed to create the page template:

<?php /* Template Name: Portfolio */ ?>

<?php get_header(); ?>

<!– #content  BEGIN  –>

<div  id=”content” class=”clearfix”>

// We will add our content later

</div><!– #content  END –>

<?php  get_footer(); ?>


The above code will help you create a basic page template that will fill the portfolio with required content. However, for this part, we’ll need to create a “Portfolio” page first within the admin dashboard. To do so, move to Pages → Add New menu from the admin dashboard navigation bar present on the right-hand side. Clicking on the ‘Add New’ option will open up a box labeled as Page Attributes containing a drop-down.

From the drop-down, you will get the flexibility to choose any desired template that you would want to use for the portfolio. After making the selection you want, just press the “publish” button. 


Step 3 – Writing Final Code to Showcase Portfolio

<ul class=”filterable-grid clearfix”>

<?php $wpbp = new WP_Query(array(  ‘post_type’ => ‘portfolio’, ‘posts_per_page’ =>’-1′ ) ); ?>

<?php if ($wpbp->have_posts()) :  while ($wpbp->have_posts()) : $wpbp->the_post(); ?>

<?php $terms = get_the_terms(  get_the_ID(), ‘filter’ ); ?>

<li data-id=”id-<?php echo  $count; ?>” data-type=”<?php foreach ($terms as $term) { echo  strtolower(preg_replace(‘/\s+/’, ‘-‘, $term->name)). ‘ ‘; } ?>”>

<?php if ( (function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail()) ) :  ?>

<?php  the_post_thumbnail(‘portfolio’); ?>

<?php endif; ?>


<a href=”<?php the_permalink(); ?>”>

<?php echo get_the_title();  ?></a>



<?php $count++; ?>

<?php endwhile; endif; ?>

<?php wp_reset_query(); ?>



Step 4 – Pagination

This step will help create pagination in your portfolio template. For creating pagination, I’ll be making use of the WordPress plugin: WP_PageNavi.

Needless to say, you’ll have to install and activate the plugin to use it. So, from your site’s admin dashboard click on Plugins → Add New page from the navigation menu and search for WP_PageNavi. Install the plugin once it is found and then activate it.

Wpage Navi

After setting up the plugin, open your portfolio page template and just make a few edits to the file:

First off, you’re required to setup a page to allow pagination to occur. To accomplish this task, add the below line of code before we can query the database:

$paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1;


This will initialize pagination, and then just modify your database query. Next, change the value of post_per_page to a number that helps in displaying all the posts that are required to be displayed on each page. Once it is done, you only need to pass a new parameter to the query that is paged. Lastly, reference the parameter to the piece of code that enables to paginate the page, just like the below code segment demonstrates:

$wpbp = new WP_Query(array( ‘post_type’ => ‘portfolio’, ‘posts_per_page’ =>’2′, ‘paged’ => $paged ) );


Now, we’ll have a portfolio ready with pagination. We’re only left with the task of getting access to a few controls that can help cope up with each page’s navigation.

Here is a code that will check whether the WP_PageNavi plugin is installed within the WordPress installation, and then initializes it using the query of the database that is passed as a parameter. Finally, just reset the postdata along with all content to make it correctly paginated.




wp_pagenavi(array(  ‘query’ => $wpbp ) );





Congrats! Now you will have a fully functional WordPress portfolio with pagination.



Author Biography:

Samuel Dawson is involved deeply in the process of converting psd to WordPress theme and files in very certain manner. Samuel is a consistent developer in WP technology and he has shared a fresh new article above on portfolio in WordPress.

Written by Guest Blogger

This article was written by one of our awesome guest bloggers. We're lucky to have these community members to share their knowledge with our community.

View all posts by Guest Blogger ...

Comment Below