Building a Portfolio Plugin for WordPress
Posted on 17th June 2023
As a WordPress developer, you may be asked to create a custom plugin for a client. This could be for a specific functionality they require on their website, or for a bespoke design that they want to be implemented. Either way, the process for creating a plugin is relatively straightforward, and there are plenty of resources available online to help you along the way.
In this article, we’re going to focus on building a portfolio plugin for WordPress. This will enable you to showcase your work in a way that is easy for your clients to browse and will make your portfolio stand out from the crowd.
Creating the Plugin
The first step is to create the plugin. This can be done by creating a new folder in your WordPress installation directory, which is typically /wp-content/plugins/. The name of the folder should be unique to your plugin, so something like “my-portfolio-plugin” would be a good choice.
In the new folder, you will need to create two files: the main plugin file and a second file called portfolio.php. The latter will contain the code for our portfolio functionality, while the former will be used to load the portfolio.php file when the plugin is activated.
The plugin file should start with the following:
<?php
/*
Plugin Name: My Portfolio Plugin
Plugin URI: https://example.com/my-portfolio-plugin
Description: A plugin to showcase my portfolio
Version: 1.0
Author: John Doe
Author URI: https://example.com
License: GPLv2 or later
*/
// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Include the portfolio.php file
include plugin_dir_path( __FILE__ ) . 'portfolio.php';
This code provides the basic information about the plugin, such as the name, author, and description. It also includes a safety check to ensure that the file is not being accessed directly, which could pose a security risk.
Creating the Portfolio Page
With the plugin file in place, we can now start to add the code for our portfolio functionality. This will go in the portfolio.php file that we created earlier.
The first thing we need to do is to create a new WordPress page. This will be the portfolio page that our visitors will see when they click on the portfolio link in the navigation menu.
To do this, we can use the add_action() function:
add_action( ‘init’, ‘my_portfolio_page’ );
function my_portfolio_page() {
add_post_type( ‘page’, array(
‘labels’ => array(
‘name’ => ‘Portfolio’,
),
‘public’ => true,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
‘menu_icon’ => ‘dashicons-portfolio’,
) );
}
This code will add a new post type called “page” to our WordPress site. This post type will have the label “Portfolio” and will be visible to visitors on the front-end of the site. It will also have support for a title, editor, and thumbnail.
Creating the Portfolio Items
With the portfolio page in place, we can now start to add the portfolio items. These will be the individual pieces of work that you want to showcase on your site.
To do this, we can use the add_action() function again:
add_action( ‘init’, ‘my_portfolio_items’ );
function my_portfolio_items() {
register_post_type( ‘portfolio_item’, array(
‘labels’ => array(
‘name’ => ‘Portfolio Items’,
),
‘public’ => true,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
‘menu_icon’ => ‘dashicons-portfolio’,
) );
}
This code will add a new post type called “portfolio_item” to our WordPress site. This post type will have the label “Portfolio Items” and will be visible to visitors on the front-end of the site. It will also have support for a title, editor, and thumbnail.
Adding the Portfolio Items to the Portfolio Page
With the portfolio items created, we now need to add them to the portfolio page. This can be done by using the add_action() function and the WP_Query class:
add_action( ‘the_content’, ‘my_portfolio_page_content’ );
function my_portfolio_page_content( $content ) {
if ( is_page( ‘portfolio’ ) ) {
$portfolio_items = new WP_Query( array(
‘post_type’ => ‘portfolio_item’,
‘posts_per_page’ => -1,
) );
if ( $portfolio_items->have_posts() ) {
$content .= ‘
- ‘;
- ‘;
$content .= get_the_title();
$content .= ‘
while ( $portfolio_items->have_posts() ) {
$portfolio_items->the_post();
$content .= ‘
‘;
}
$content .= ‘
‘;
}
wp_reset_postdata();
}
return $content;
}
This code will check to see if the user is viewing the portfolio page. If they are, it will retrieve all of the portfolio items and list them on the page.
Adding the Featured Image
If you want to display the featured image for each portfolio item on the portfolio page, you can use the following code:
add_action( ‘the_content’, ‘my_portfolio_page_content’ );
function my_portfolio_page_content( $content ) {
if ( is_page( ‘portfolio’ ) ) {
$portfolio_items = new WP_Query( array(
‘post_type’ => ‘portfolio_item’,
‘posts_per_page’ => -1,
) );
if ( $portfolio_items->have_posts() ) {
$content .= ‘
- ‘;
- ‘;
$content .= get_the_title();
$content .= get_the_post_thumbnail();
$content .= ‘
while ( $portfolio_items->have_posts() ) {
$portfolio_items->the_post();
$content .= ‘
‘;
}
$content .= ‘
‘;
}
wp_reset_postdata();
}
return $content;
}
This code will retrieve the featured image for each portfolio item and display it on the portfolio page.
Adding the Portfolio Item URL
If you want to display the URL for each portfolio item on the portfolio page, you can use the following code:
add_action( ‘the_content’, ‘my_portfolio_page_content’ );
function my_portfolio_page_content( $content ) {
if ( is_page( ‘portfolio’ ) ) {
$portfolio_items = new WP_Query( array(
‘post_type’ => ‘portfolio_item’,
‘posts_per_page’ => -1,
) );
if ( $portfolio_items->have_posts() ) {
$content .= ‘
- ‘;
- ‘;
$content .= get_the_title();
$content .= get_permalink();
$content .To complete the plugin, add the following code to the end of the file:
?>
This tells the server that the PHP code is finished and it can now move on to processing the HTML code. The next step is to add the code that will display the portfolio items on the front-end of the website.
To do this, open the file called “front-end.php” and paste in the following code:
<?php
// Get the portfolio items from the database
$portfolio_items = get_portfolio_items();
// Loop through the items and output them
foreach ( $portfolio_items as $item ) {
echo '
‘ . $item[‘title’] . ‘
‘;
echo ‘
‘ . $item[‘description’] . ‘
‘;
echo ‘
‘;
}
?>
This code first gets all of the portfolio items from the database. It then loops through each item and outputs the title, description and image.
You can now upload the plugin to your WordPress site and activate it. When you visit the front-end of the site, you should see the portfolio items being displayed.
while ( $portfolio_items->have_posts() ) {
$portfolio_items->the_post();
$content .= ‘
