This is How to Remove the CPT Slug with Hierarchical in WordPress
As a WordPress developer, you've likely encountered the challenge of working with custom post type (CPT) slugs, especially when you need to remove the slug or make it hierarchical. This is a common problem that many WordPress users struggle with, and up until now, there hasn't been a definitive solution.
In this article, we'll dive deep into the problem and provide you with a step-by-step guide on how to remove the CPT slug with hierarchical functionality in WordPress. We'll also explore the benefits of this approach and why it's important for your website's user experience and SEO.
Understanding the Problem with CPT Slugs
WordPress, by default, generates a unique slug for each post, page, and custom post type. This slug is typically based on the title of the content and is used in the URL structure. For example, if you create a custom post type called "Products" with a post titled "Widget 2.0", the default slug would be "/products/widget-2-0".
While this default behavior can be useful in many cases, it can become problematic when you need to create a more intuitive and user-friendly URL structure. For instance, you may want to remove the "products" part of the slug and have a URL like "/widget-2-0" instead.
Additionally, if you have a hierarchical custom post type, such as a product catalog with subcategories, the default slug structure can become unwieldy and difficult to manage. In this case, you may want to create a hierarchical URL structure that reflects the content's organization, like "/products/category-a/widget-2-0".
The Benefits of Removing the CPT Slug with Hierarchical
Removing the CPT slug with hierarchical functionality can provide several benefits for your WordPress website:
-
Improved User Experience: A clean and intuitive URL structure can make it easier for your website's visitors to understand the content structure and navigate your site more effectively.
-
Enhanced SEO: Search engines, such as Google, often place importance on the URL structure when determining the relevance and authority of a page. By removing the CPT slug and creating a hierarchical structure, you can improve your website's SEO performance.
-
Better Organization and Maintainability: A hierarchical URL structure can help you better organize and manage your website's content, especially when dealing with complex custom post types or large product catalogs.
-
Increased Flexibility: By removing the CPT slug, you can have more control over your website's URL structure and adapt it to your specific needs, without being constrained by the default WordPress behavior.
Step-by-Step Guide to Remove the CPT Slug with Hierarchical
Now that you understand the problem and the benefits of removing the CPT slug with hierarchical functionality, let's dive into the step-by-step process to implement this solution.
Step 1: Create the Custom Post Type
First, you need to create a custom post type in your WordPress website. You can do this by using the register_post_type()
function in your theme's functions.php file or by using a plugin like Advanced Custom Fields or Custom Post Type UI.
Here's an example of how you can create a custom post type called "Products" with hierarchical functionality:
function create_products_cpt() {
$labels = array(
'name' => __( 'Products', 'textdomain' ),
'singular_name' => __( 'Product', 'textdomain' ),
'add_new' => __( 'Add New', 'textdomain' ),
'add_new_item' => __( 'Add New Product', 'textdomain' ),
'edit_item' => __( 'Edit Product', 'textdomain' ),
'new_item' => __( 'New Product', 'textdomain' ),
'view_item' => __( 'View Product', 'textdomain' ),
'search_items' => __( 'Search Products', 'textdomain' ),
'not_found' => __( 'No products found', 'textdomain' ),
'not_found_in_trash' => __( 'No products found in Trash', 'textdomain' ),
'parent_item_colon' => __( 'Parent Product:', 'textdomain' ),
'menu_name' => __( 'Products', 'textdomain' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'description' => 'Products custom post type',
'supports' => array( 'title', 'editor', 'thumbnail', 'revisions', 'custom-fields' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => array( 'slug' => 'products' ),
);
register_post_type( 'products', $args );
}
add_action( 'init', 'create_products_cpt' );
In this example, we've created a custom post type called "Products" with hierarchical functionality. The 'hierarchical' => true
parameter ensures that the post type can have parent-child relationships, which is essential for creating a hierarchical URL structure.
Step 2: Remove the CPT Slug
Now that we've created the custom post type, we need to remove the default slug. To do this, we'll use the post_type_link
filter to modify the URL structure.
function remove_cpt_slug( $post_link, $post, $leavename, $sample ) {
if ( 'products' != $post->post_type || 'publish' != $post->post_status ) {
return $post_link;
}
$post_link = str_replace( '/' . $post->post_type . '/', '/', $post_link );
return $post_link;
}
add_filter( 'post_type_link', 'remove_cpt_slug', 10, 4 );
In this code, we're using the post_type_link
filter to check if the current post type is "products". If it is, we replace the "/products/" part of the URL with a forward slash ("/"), effectively removing the CPT slug.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Step 3: Create Hierarchical URLs
To create a hierarchical URL structure, we'll need to use the pre_post_link
filter to generate the desired URL based on the post's parent-child relationships.
function create_hierarchical_urls( $post_link, $post ) {
if ( 'products' !== $post->post_type ) {
return $post_link;
}
$post_slug = $post->post_name;
$post_parent = $post->post_parent;
if ( 0 === $post_parent ) {
return home_url( '/' . $post_slug . '/' );
}
$parent_post = get_post( $post_parent );
$parent_slug = $parent_post->post_name;
return home_url( '/' . $parent_slug . '/' . $post_slug . '/' );
}
add_filter( 'pre_post_link', 'create_hierarchical_urls', 10, 2 );
In this code, we're using the pre_post_link
filter to check if the current post type is "products". If it is, we generate the URL based on the post's parent-child relationships.
- If the post has no parent (i.e., it's a top-level product), the URL will be "/post-slug/".
- If the post has a parent, the URL will be "/parent-slug/post-slug/".
This ensures that the URL structure reflects the hierarchical nature of your custom post type, making it more user-friendly and SEO-friendly.
Real-World Example and Proof
To demonstrate the effectiveness of this approach, let's look at a real-world example.
Imagine you have a custom post type called "Products" with the following hierarchy:
- Laptops
- Ultrabooks
- Gaming Laptops
- Desktops
Without removing the CPT slug and creating a hierarchical URL structure, the default URLs would look like this:
- /products/laptop-1/
- /products/ultrabook-1/
- /products/gaming-laptop-1/
- /products/desktop-1/
- /products/all-in-one-1/
- /products/tower-1/
However, by implementing the solution we've provided in this article, the URLs would look like this:
- /laptop-1/
- /laptop-1/ultrabook-1/
- /laptop-1/gaming-laptop-1/
- /desktop-1/
- /desktop-1/all-in-one-1/
- /desktop-1/tower-1/
As you can see, the hierarchical URLs are much more intuitive and user-friendly, making it easier for your website's visitors to understand the content structure. Additionally, this approach can have a positive impact on your website's SEO performance, as search engines often give more weight to clean, hierarchical URL structures.
Conclusion
Removing the CPT slug with hierarchical functionality in WordPress is a powerful technique that can significantly improve your website's user experience and SEO performance. By following the steps outlined in this article, you can easily implement this solution and enjoy the benefits of a more intuitive and user-friendly URL structure.
Remember, the key to success is to thoroughly test your implementation and monitor the results to ensure that your website's performance and user experience are optimized. And if you need further assistance, consider exploring the powerful features of Flowpoint.ai, a web analytics solution that can help you identify and fix technical errors that impact your website's conversion rates