Do you want to create a gallery portfolio on your website? If you want to create your personal portfolio on your WordPress website. You are in the right place. We are going to show you How to create a portfolio gallery in WordPress with a filtering category.
So many ways to create a portfolio gallery but we will create a portfolio with a custom post type. Before you go ahead. You need to know how to create a post type. We already published an article about How to create post types. You read this article if you don’t know. Then just create a custom post type named “portfolio”. Remember don’t add WordPress default taxonomy like category or tag. Post type arguments named ‘taxonomies’ value must be empty. For our portfolio, we are going to create a custom taxonomy.
If you fail to create a portfolio post type use this code on function.php:
if ( ! function_exists('wpk_register_portfolio_post_type') ) {
// Register Custom Post Type
function wpk_register_portfolio_post_type() {
$labels = array(
'name' => _x( 'Portfolio', 'Post Type General Name', 'wpknifer' ),
'singular_name' => _x( 'Portfolio', 'Post Type Singular Name', 'wpknifer' ),
'menu_name' => __( 'Portfolio', 'wpknifer' ),
'name_admin_bar' => __( 'Portfolio', 'wpknifer' ),
'archives' => __( 'Item Archives', 'wpknifer' ),
'attributes' => __( 'Item Attributes', 'wpknifer' ),
'parent_item_colon' => __( 'Parent Item:', 'wpknifer' ),
'all_items' => __( 'All Items', 'wpknifer' ),
'add_new_item' => __( 'Add New Item', 'wpknifer' ),
'add_new' => __( 'Add New', 'wpknifer' ),
'new_item' => __( 'New Item', 'wpknifer' ),
'edit_item' => __( 'Edit Item', 'wpknifer' ),
'update_item' => __( 'Update Item', 'wpknifer' ),
'view_item' => __( 'View Item', 'wpknifer' ),
'view_items' => __( 'View Items', 'wpknifer' ),
'search_items' => __( 'Search Item', 'wpknifer' ),
'not_found' => __( 'Not found', 'wpknifer' ),
'not_found_in_trash' => __( 'Not found in Trash', 'wpknifer' ),
'featured_image' => __( 'Featured Image', 'wpknifer' ),
'set_featured_image' => __( 'Set featured image', 'wpknifer' ),
'remove_featured_image' => __( 'Remove featured image', 'wpknifer' ),
'use_featured_image' => __( 'Use as featured image', 'wpknifer' ),
'insert_into_item' => __( 'Insert into item', 'wpknifer' ),
'uploaded_to_this_item' => __( 'Uploaded to this item', 'wpknifer' ),
'items_list' => __( 'Items list', 'wpknifer' ),
'items_list_navigation' => __( 'Items list navigation', 'wpknifer' ),
'filter_items_list' => __( 'Filter items list', 'wpknifer' ),
);
$args = array(
'label' => __( 'Portfolio', 'wpknifer' ),
'description' => __( 'Portfolio Description', 'wpknifer' ),
'labels' => $labels,
'supports' => array( 'title', 'thumbnail' ),
'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', 'wpk_register_portfolio_post_type', 0 );
}Create Custom Taxonomy:
If you create a post type with default taxonomy. Other post types like the category of the post come up together. But we want a separated taxonomy for our portfolio. So, The solution is, We will create a custom taxonomy named “Portfolio category”.
Use this code for creating Portfolio category taxonomy:
if ( ! function_exists( 'wpk_register_portfolio_category_taxonomy' ) ) {
// Register Custom Taxonomy
function wpk_register_portfolio_category_taxonomy() {
$labels = array(
'name' => _x( 'Portfolio category', 'Taxonomy General Name', 'wpknifer' ),
'singular_name' => _x( 'Portfolio category', 'Taxonomy Singular Name', 'wpknifer' ),
'menu_name' => __( 'Portfolio category', 'wpknifer' ),
'all_items' => __( 'All Items', 'wpknifer' ),
'parent_item' => __( 'Parent Item', 'wpknifer' ),
'parent_item_colon' => __( 'Parent Item:', 'wpknifer' ),
'new_item_name' => __( 'New Item Name', 'wpknifer' ),
'add_new_item' => __( 'Add New Item', 'wpknifer' ),
'edit_item' => __( 'Edit Item', 'wpknifer' ),
'update_item' => __( 'Update Item', 'wpknifer' ),
'view_item' => __( 'View Item', 'wpknifer' ),
'separate_items_with_commas' => __( 'Separate items with commas', 'wpknifer' ),
'add_or_remove_items' => __( 'Add or remove items', 'wpknifer' ),
'choose_from_most_used' => __( 'Choose from the most used', 'wpknifer' ),
'popular_items' => __( 'Popular Items', 'wpknifer' ),
'search_items' => __( 'Search Items', 'wpknifer' ),
'not_found' => __( 'Not Found', 'wpknifer' ),
'no_terms' => __( 'No items', 'wpknifer' ),
'items_list' => __( 'Items list', 'wpknifer' ),
'items_list_navigation' => __( 'Items list navigation', 'wpknifer' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
);
register_taxonomy( 'portfolio_category', array( 'portfolio' ), $args );
}
add_action( 'init', 'wpk_register_portfolio_category_taxonomy', 0 );
}If you copy those two codes on your function.php. Already A post type and taxonomy created. We are going to create an isotope layout portfolio. So, first we need to enqueue a JavaScript’s file named isotope-min.js and imagesloaded-min.js.
Create Portfolio Gallery Short code:
We created a short code for the portfolio gallery. You can use short codes anywhere on WordPress. short codes were introduced in WordPress 2.5, and the reason to introduce them was to allow people to execute code inside WordPress posts, pages, and widgets without writing any code directly.
Copy This code and paste on your function.php:
function wpk_portfolio_shortcode($atts){
$atts = shortcode_atts( array(
'title' => 'University of Nebraska State Museum - Morrill Hall',
), $atts);
$post_type = 'portfolio';
$taxonomy = 'portfolio_category';
$terms = get_terms( array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
) );
$portfolio = new WP_Query(array(
'post_type' => $post_type,
'post_status' => 'publish',
'posts_per_page' => 9,
));
ob_start();
?>
<div class="wpk-portfolio">
<div class="portfolio-filter" style="text-align: center; padding-bottom: 70px;">
<button class="is-checked" data-filter="*">See All</button>
<?php
if (!empty($terms)) {
foreach ($terms as $term) {
echo '<button class="" data-filter=".'.$term->name.'">'.$term->name.'</button>';
}
}
?>
</div>
<?php if($portfolio->have_posts()): ?>
<div class="wpk-grid-wrap grid-loaded">
<?php
while ($portfolio->have_posts()): $portfolio->the_post();
$term_obj_list = get_the_terms( $post->ID, 'portfolio_category' );
$terms_string = (!empty($term_obj_list))? join(', ', wp_list_pluck($term_obj_list, 'name')):'';
?>
<div class="wpk-grid-item <?php echo $terms_string; ?>" style="width: 33.33%; padding: 0px; margin-bottom: 0;" >
<a href="<?php the_post_thumbnail_url($portfolio->ID) ?>">
<img src="<?php the_post_thumbnail_url($portfolio->ID) ?>" alt="<?php the_title(); ?>">
</a>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php
$output = ob_get_clean();
return $output;
}
add_shortcode('WPK_PORTFOLIO', 'wpk_portfolio_shortcode');You can use this short code:
[WPK_PORTFOLIO]But we need some JavaScript’s requirement.
Requirement: This is an isotope layout. We need to create some javascripts in jQuery.
Copy this code and add on your custom js file. Paste this script under Document dot ready.
Custom Script:
jQuery( document ).ready(function($) {
/*----------------------------------------------------*//*Portfolio Grid
/*----------------------------------------------------*/
$('.grid-loaded').imagesLoaded(function () {
// filter items on button click
$('.portfolio-filter').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue
});
});
// change is-checked class on buttons
$('.gallery-filter button').on('click', function () {
$('.gallery-filter button').removeClass('is-checked');
$(this).addClass('is-checked');
var selector = $(this).attr('data-filter');
$grid.isotope({
filter: selector
});
return false;
});
// init Isotope
var $grid = $('.wpk-grid-wrap').isotope({
itemSelector: '.wpk-grid-item',
percentPosition: true,
transitionDuration: '0.7s',
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.wpk-grid-item',
}
});
});
$('.portfolio-filter button.is-checked').trigger('click');
});Before this script we needed isotope-min.js and images loaded-min.js on your template assets.
Like,
add_action( 'wp_enqueue_scripts', 'wpk_enqueue_portfolio_script', 30);
function wpk_enqueue_portfolio_script() {
wp_enqueue_script( 'isotope-min', 'https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js', array('jquery'), '1.0.0', true);
wp_enqueue_script( 'imagesloaded', 'https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js', array('jquery'), '1.0.0', true);
wp_enqueue_script( 'isotope-custom', get_template_directory_uri(). '/custom.js', array('jquery'), '1.0.0', true);
} If Your edit with your child themes. You can replace get_template_directory_uri with get_stylesheet_directory_uri.
Conclusion:
The portfolio gallery is most common and popular. Also, This isotope layout is popular for galleries. You can create an archive page but we are shown creating shortcodes. Because you can use shortcodes anywhere you want. Now You know How to create a portfolio gallery in WordPress.
You can complete your custom project and client jobs. We hope this article helped you. If you face any problem with it, Feel free to contact us or comment below.
