If you’re a web developer, chances are you’ve been asked to build a portfolio for a client at some point. And if you’re a WordPress developer, chances are you’ve been asked to build a portfolio plugin for WordPress.
In this tutorial, we’re going to show you how to build a filterable portfolio plugin for WordPress. We’ll be using the Advanced Custom Fields plugin to create a custom post type and custom fields for our portfolio items. We’ll then use the jQuery Isotope plugin to filter the items.
Creating the Custom Post Type
The first thing we need to do is create a custom post type for our portfolio items. We’ll do this by adding the following code to our plugin file:
_x( ‘Portfolio’, ‘Post Type General Name’, ‘text_domain’ ),
‘singular_name’ => _x( ‘Portfolio Item’, ‘Post Type Singular Name’, ‘text_domain’ ),
‘add_new’ => _x( ‘Add New’, ‘Portfolio Item’, ‘text_domain’ ),
‘add_new_item’ => __( ‘Add New Portfolio Item’, ‘text_domain’ ),
‘edit_item’ => __( ‘Edit Portfolio Item’, ‘text_domain’ ),
‘new_item’ => __( ‘New Portfolio Item’, ‘text_domain’ ),
‘view_item’ => __( ‘View Portfolio Item’, ‘text_domain’ ),
‘view_items’ => __( ‘View Portfolio Items’, ‘text_domain’ ),
‘search_items’ => __( ‘Search Portfolio Items’, ‘text_domain’ ),
‘not_found’ => __( ‘No portfolio items found’, ‘text_domain’ ),
‘not_found_in_trash’ => __( ‘No portfolio items found in Trash’, ‘text_domain’ ),
‘parent_item_colon’ => __( ‘Parent Portfolio Item:’, ‘text_domain’ ),
‘all_items’ => __( ‘All Portfolio Items’, ‘text_domain’ ),
‘archives’ => __( ‘Portfolio Archives’, ‘text_domain’ ),
‘attributes’ => __( ‘Portfolio Attributes’, ‘text_domain’ ),
‘insert_into_item’ => __( ‘Insert into portfolio item’, ‘text_domain’ ),
‘uploaded_to_this_item’ => __( ‘Uploaded to this portfolio item’, ‘text_domain’ ),
‘featured_image’ => __( ‘Featured Image’, ‘text_domain’ ),
‘set_featured_image’ => __( ‘Set featured image’, ‘text_domain’ ),
‘remove_featured_image’ => __( ‘Remove featured image’, ‘text_domain’ ),
‘use_featured_image’ => __( ‘Use as featured image’, ‘text_domain’ ),
‘filter_items_list’ => __( ‘Filter portfolio items list’, ‘text_domain’ ),
‘items_list_navigation’ => __( ‘Portfolio items list navigation’, ‘text_domain’ ),
‘items_list’ => __( ‘Portfolio items list’, ‘text_domain’ ),
‘item_published’ => __( ‘Portfolio item published’, ‘text_domain’ ),
‘item_published_privately’ => __( ‘Portfolio item published privately’, ‘text_domain’ ),
‘item_reverted_to_draft’ => __( ‘Portfolio item reverted to draft’, ‘text_domain’ ),
‘item_scheduled’ => __( ‘Portfolio item scheduled’, ‘text_domain’ ),
‘item_updated’ => __( ‘Portfolio item updated’, ‘text_domain’ ),
);
$args = array(
‘label’ => __( ‘portfolio’, ‘text_domain’ ),
‘description’ => __( ‘A custom post type for a filterable portfolio’, ‘text_domain’ ),
‘labels’ => $labels,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
‘taxonomies’ => array( ‘category’, ‘post_tag’ ),
‘hierarchical’ => false,
‘public’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘menu_position’ => 5,
‘show_in_admin_bar’ => true,
‘show_in_nav_menus’ => true,
‘can_export’ => true,
‘has_archive’ => true,
‘exclude_from_search’ => false,
‘publicly_queryable’ => true,
‘capability_type’ => ‘post’,
);
register_post_type( ‘portfolio’, $args );
}
add_action( ‘init’, ‘wpdev_portfolio_post_type’, 0 );
?>
This code registers a custom post type for our portfolio items and sets up some labels.
Creating the Custom Fields
Next, we need to create some custom fields for our portfolio items. We’ll do this using the Advanced Custom Fields plugin.
First, we’ll create a field group for our portfolio items. We’ll call it “Portfolio Item” and add the following fields:
Item Name
Item URL
Item Image
Item Category
Next, we’ll add some code to our plugin file to load the field group:
‘group_5b7ef38b9c0d3’,
‘title’ => ‘Portfolio Item’,
‘fields’ => array(
array(
‘key’ => ‘field_5b7ef3a09c0d4’,
‘label’ => ‘Item Name’,
‘name’ => ‘item_name’,
‘type’ => ‘text’,
‘instructions’ => ”,
‘required’ => 0,
‘conditional_logic’ => 0,
‘wrapper’ => array(
‘width’ => ”,
‘class’ => ”,
‘id’ => ”,
),
‘default_value’ => ”,
‘placeholder’ => ”,
‘prepend’ => ”,
‘append’ => ”,
‘maxlength’ => ”,
),
array(
‘key’ => ‘field_5b7ef3b69c0d5’,
‘label’ => ‘Item URL’,
‘name’ => ‘item_url’,
‘type’ => ‘url’,
‘instructions’ => ”,
‘required’ => 0,
‘conditional_logic’ => 0,
‘wrapper’ => array(
‘width’ => ”,
‘class’ => ”,
‘id’ => ”,
),
‘default_value’ => ”,
‘placeholder’ => ”,
),
array(
‘key’ => ‘field_5b7ef3d09c0d6’,
‘label’ => ‘Item Image’,
‘name’ => ‘item_image’,
‘type’ => ‘image’,
‘instructions’ => ”,
‘required’ => 0,
‘conditional_logic’ => 0,
‘wrapper’ => array(
‘width’ => ”,
‘class’ => ”,
‘id’ => ”,
),
‘return_format’ => ‘array’,
‘preview_size’ => ‘thumbnail’,
‘library’ => ‘all’,
‘min_width’ => ”,
‘min_height’ => ”,
‘min_size’ => ”,
‘max_width’ => ”,
‘max_height’ => ”,
‘max_size’ => ”,
‘mime_types’ => ”,
),
array(
‘key’ => ‘field_5b7ef3e49c0d7’,
‘label’ => ‘Item Category’,
‘name’ => ‘item_category’,
‘type’ => ‘taxonomy’,
‘instructions’ => ”,
‘required’ => 0,
‘conditional_logic’ => 0,
‘wrapper’ => array(
‘width’ => ”,
‘class’ => ”,
‘id’ => ”,
),
‘taxonomy’ => ‘category’,
‘field_type’ => ‘checkbox’,
‘allow_null’ => 0,
‘add_term’ => 1,
‘save_terms’ Where possible use a non-breaking space where there should be a space but it should not wrap to the next line.
2) Create the Custom Post Type
We’re going to be creating a custom post type to store our portfolio projects. This is so we can take advantage of all the great features that come with custom post types, like permalinks, custom fields, etc.
First, we need to register the custom post type. We’ll do this by adding some code to our theme’s functions.php file.
_x( ‘Portfolios’, ‘Post Type General Name’, ‘text_domain’ ),
‘singular_name’ => _x( ‘Portfolio’, ‘Post Type Singular Name’, ‘text_domain’ ),
‘menu_name’ => __( ‘Portfolios’, ‘text_domain’ ),
‘name_admin_bar’ => __( ‘Portfolio’, ‘text_domain’ ),
‘archives’ => __( ‘Item Archives’, ‘text_domain’ ),
‘attributes’ => __( ‘Item Attributes’, ‘text_domain’ ),
‘parent_item_colon’ => __( ‘Parent Item:’, ‘text_domain’ ),
‘all_items’ => __( ‘All Items’, ‘text_domain’ ),
‘add_new_item’ => __( ‘Add New Item’, ‘text_domain’ ),
‘add_new’ => __( ‘Add New’, ‘text_domain’ ),
‘new_item’ => __( ‘New Item’, ‘text_domain’ ),
‘edit_item’ => __( ‘Edit Item’, ‘text_domain’ ),
‘update_item’ => __( ‘Update Item’, ‘text_domain’ ),
‘view_item’ => __( ‘View Item’, ‘text_domain’ ),
‘view_items’ => __( ‘View Items’, ‘text_domain’ ),
‘search_items’ => __( ‘Search Item’, ‘text_domain’ ),
‘not_found’ => __( ‘Not found’, ‘text_domain’ ),
‘not_found_in_trash’ => __( ‘Not found in Trash’, ‘text_domain’ ),
‘featured_image’ => __( ‘Featured Image’, ‘text_domain’ ),
‘set_featured_image’ => __( ‘Set featured image’, ‘text_domain’ ),
‘remove_featured_image’ => __( ‘Remove featured image’, ‘text_domain’ ),
‘use_featured_image’ => __( ‘Use as featured image’, ‘text_domain’ ),
‘insert_into_item’ => __( ‘Insert into item’, ‘text_domain’ ),
‘uploaded_to_this_item’ => __( ‘Uploaded to this item’, ‘text_domain’ ),
‘items_list’ => __( ‘Items list’, ‘text_domain’ ),
‘items_list_navigation’ => __( ‘Items list navigation’, ‘text_domain’ ),
‘filter_items_list’ => __( ‘Filter items list’, ‘text_domain’ ),
);
$args = array(
‘label’ => __( ‘Portfolio’, ‘text_domain’ ),
‘description’ => __( ‘A post type for your portfolio projects.’, ‘text_domain’ ),
‘labels’ => $labels,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’, ‘custom-fields’ ),
‘taxonomies’ => array( ‘category’, ‘post_tag’ ),
‘hierarchical’ => false,
‘public’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘menu_position’ => 5,
‘show_in_admin_bar’ => true,
‘show_in_nav_menus’ => true,
‘can_export’ => true,
‘has_archive’ => true,
‘exclude_from_search’ => false,
‘publicly_queryable’ => true,
‘capability_type’ => ‘page’,
);
register_post_type( ‘portfolio’, $args );
}
add_action( ‘init’, ‘create_portfolio_post_type’, 0 );
?>
This code should be added to your theme’s functions.php file.
Next, we need to create the custom fields for our custom post type. We’ll do this using the Advanced Custom Fields plugin.
Once the plugin is installed and activated, go to Custom Fields > Add New.
Create a new field group and give it a name (e.g. “Portfolio Fields”). Then add the following fields:
– Project URL
– Project Client
– Project Description
Make sure you select the “Portfolio” post type from the “Location” rules.
Your field group should look something like this:
Next, we need to add some code to our theme to output the custom fields on the front-end.
We’ll start by adding a loop to our portfolio.php template file to output the portfolio items.
have_posts() ) {
echo ‘
- ‘;
- ‘ . get_the_title() . ‘
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo ‘
‘;
}
echo ‘
‘;
} else {
// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
?>
This code should be added to your theme’s portfolio.php template file.
Now we need to add some CSS to style our portfolio items. Add the following to your theme’s style.css file.
.portfolio-item {
float: left;
width: 33.33%;
padding: 20px;
}
This code should be added to your theme’s style.css file.
And that’s it! You should now have a working portfolio with custom fields.
Leave a Reply