This blog teaches how to create a custom post type with a taxonomy filter in WordPress without a plugin.
Certainly! Here’s a step-by-step explanation of the process of creating a custom post type with a taxonomy filter without using a plugin in WordPress:
Create a portfolio template page
- Create a new page in your WordPress admin panel and title it, such as “Portfolio.”
- In your theme files, create a new template file for the Portfolio page. Name it something like ‘
template-portfolio.php‘. - Open the ‘
template-portfolio.php‘ file and add the following code:
<?php
// Template Name:Portfolio
?>
<!doctype html>
<html lang="en">
<head>
<title>portfolio</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<style>
.isotope-toolbar{
text-align: center;
padding: 25px 0;
}
button {
display: inline-block;
padding: 10px 20px;
margin: 0px 5px;
background-color: #fff;
color: #000;
font-size: 18px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.5s;
border: none;
outline: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
font-family: cursive;
}
button:hover {
outline: none;
background-color: #000;
color: #fff;
}
button.active {
outline: none;
background-color: #000;
color: #fff;
}
.isotope-box{
display: flex;
width: 100%;
}
.isotope-item{
width: 20%;
height: 100px;
background-color: green;
margin: 25px;
position: absolute;
left: 0px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: cursive;
transition: all 0.5s;
border-radius: 5px;
}
.red{
background-color: red;
color: #fff;
}
</style>
<body>
<h1 class="text-center mt-5 mb-5">Portfolio</h1>
<div class="isotope-wrapper">
<div class="isotope-toolbar">
<button class="isotope-toolbar-btn active" data-type="*" name="isotope-filter">
<span>All</span>
</button>
<?php
$categories = get_terms('portfolio_cat'); // Replace 'portfolio_cat' with the actual taxonomy slug for your custom post type.
if (!empty($categories) && !is_wp_error($categories)) {
foreach ($categories as $category) { ?>
<button class="isotope-toolbar-btn" data-type="<?php echo esc_html($category->name) ?>" name="isotope-filter">
<span><?php echo esc_html($category->name) ?></span>
</button>
<?php
}
} else {
echo 'No categories found.';
}
?>
</div>
<div class="isotope-box">
<?php
$args = array(
'post_type' => 'portfolio',
'posts_per_page' => 100,
);
$loop = new WP_Query($args);
while ($loop->have_posts()) {
$loop->the_post();
$categories = get_the_category();
?>
<?php
$categories = get_the_terms($post->ID, 'portfolio_cat'); // Replace 'portfolio_cat' with the actual taxonomy slug for your custom post type.
if (!empty($categories) && !is_wp_error($categories)) {
?>
<div class="isotope-item red" data-type="<?php echo esc_html($categories[0]->name); ?>">
<?php
// echo '<span class="category">' . esc_html( $categories[0]->name ) . '</span>';
}
?>
<h1><?php the_title(); ?></h1>
</div>
<?php
}
?>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script id="rendered-js">
// external js: isotope.pkgd.js
// init Isotope elements
var $box = $(".isotope-box").isotope({
itemSelector: ".isotope-item"
});
// filter functions
// bind filter button click
$(".isotope-toolbar").on("click", "button", function () {
var filterValue = $(this).attr("data-type");
$(".isotope-toolbar-btn").removeClass("active");
$(this).addClass("active");
if (filterValue !== "*") {
filterValue = '[data-type="' + filterValue + '"]';
}
console.log(filterValue);
$box.isotope({ filter: filterValue });
});
// change is-checked class on buttons
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Add Code to functions.php
Open your theme’functions.php‘ file and add the following code:
function create_portfolio_function()
{
$labels = array(
'name' => _x('portfolio', 'post type general name', 'your_text_domain'),
'singular_name' => _x('portfolio', 'post type Singular name', 'your_text_domain'),
'add_new' => _x('Add portfolio', '', 'your_text_domain'),
'add_new_item' => __('Add New portfolio', 'your_text_domain'),
'edit_item' => __('Edit portfolio', 'your_text_domain'),
'new_item' => __('New portfolio', 'your_text_domain'),
'all_items' => __('All portfolio', 'your_text_domain'),
'view_item' => __('View portfolio', 'your_text_domain'),
'search_items' => __('Search portfolio', 'your_text_domain'),
'not_found' => __('No portfolio found', 'your_text_domain'),
'not_found_in_trash' => __('No portfolio on trash', 'your_text_domain'),
'parent_item_colon' => '',
'menu_name' => __('Portfolio', 'your_text_domain')
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array('slug' => 'portfolio'),
'capability_type' => 'page',
'has_archive' => true,
'hierarchical' => true,
'menu_position' => null,
'menu_icon' => 'dashicons-admin-media',
'supports' => array('title', 'editor', 'thumbnail')
);
$labels = array(
'name' => __('portfolio cat'),
'singular_name' => __('portfolio cat'),
'search_items' => __('Search'),
'popular_items' => __('More Used'),
'all_items' => __('All News cat'),
'parent_item' => null,
'parent_item_colon' => null,
'edit_item' => __('Add new'),
'update_item' => __('Update'),
'add_new_item' => __('Add New portfolio cat'),
'new_item_name' => __('New')
);
register_taxonomy(
'portfolio_cat',
array('portfolio'),
array(
'hierarchical' => true,
'labels' => $labels,
'singular_label' => 'portfolio_cat',
'all_items' => 'portfolio_cat',
'query_var' => true,
'rewrite' => array('slug' => 'portfolio_cat')
)
);
register_post_type('portfolio', $args);
flush_rewrite_rules();
}
add_action('init', 'create_portfolio_function');
Once you have completed these steps, you will have a Portfolio page template that displays portfolio items and allows users to filter them by category. A custom post type “portfolio” and a taxonomy “portfolio_cat” will also be created.
After following these steps, you should have a Portfolio page template that displays the portfolio items and allows you to filter them by category.
Note:- Remember to replace
'your_text_domain'with your actual text domain in the code.
