Create a portfolio section on WordPress website using Custom Post Type (CPT)

I’m going to show you how to create a portfolio section on your WordPress website.

For any many companies (such as web design agencies) and freelancers that work with digital media its important to have a portfolio section on your WordPress website.

I’ll show you how todo this using WordPress Custom Post Types, you’ll easily be able to update the portfolio via the WordPress admin interface without having to write extra html or css.

As I’m a WordPress Developer my portfolio section will focus on showcasing WordPress programming and web design. See  the finished version here.

Create a plugin

1. create a folder in wp-content/plugins/ called my_portfolio_plugin

2. create a file in that folder I called mine plugin.php

Its in the plugin.php file that we will put all our code. This code registers the Custom Post Type (gb_portfolio)


Create a taxonomy on a custom post type

I added a taxonomy of gb_techs in the code snippet above. In this I’m going to list technologies that I’ve used in the particular portfolio item ( in my case this will be things like WordPress, PHP, MySQL, Laravel, JQuery, HTML, CSS).

admin section in wordpress

Add a field to a Custom Post Type

In the next code snippet I’ve added a field to the interface called URL (gb_url) so that I can provide a place to store the link to the website of each portfolio section.

add_meta_for_url and meta_options add the URL field to the wordpress interface for (Portfolio Custom Post Type). save_gb_url saves the value that is stored in the field.

Finally we need to be able to display the portfolio section on your WordPress website. There are numerous ways todo this I’m going to create a page template for it (but you could easily use a shortcode).

In your template you need to tell WordPress that we want to look at the Portfolio Custom Post Type , add this to the top of the template:

Now you can access the portfolio items in the WordPress loop like any other Post Type. Here is an part of my template you can see how I access the url field in it and also create a tag cloud from the gb_tech taxonomy.

Hope you find this article on creating a portfolio section on WordPress website useful. As always the WordPress codex is very useful in figuring out how to do things like this. If you need the help of a Freelance WordPress Developer in London to build something like this contact me.






Leave a Comment