This Is How To Display A Dropdown Of A Custom Post Type Using wp_dropdown_page()
As WordPress developers, we often need to create custom post types to manage unique content on our websites. Sometimes, we also need to display these custom post types in the form of a dropdown menu. This is where the wp_dropdown_pages()
function comes in handy.
However, many developers struggle with getting the wp_dropdown_pages()
function to work correctly with their custom post types. The common problem is that the dropdown doesn't display the custom post type options as expected.
In this blog post, we'll explore a simple solution to this issue and show you how to display a dropdown of a custom post type using the wp_dropdown_pages()
function in WordPress.
The Problem: Displaying A Dropdown Of A Custom Post Type
Typically, when you want to display a dropdown of pages in WordPress, you would use the wp_dropdown_pages()
function. This function generates an HTML <select>
element populated with the titles of all the pages on your site.
However, the wp_dropdown_pages()
function is designed to work specifically with the post_type
of page
. If you try to use it with a custom post type, it won't work as expected.
Here's an example of how you might try to use wp_dropdown_pages()
with a custom post type called "brands":
wp_dropdown_pages(array(
'id' => 'marque0',
'name' => 'marque0',
'post_type' => 'brands'
));
The problem with this approach is that the wp_dropdown_pages()
function doesn't recognize the 'post_type' => 'brands'
argument. Instead, it will only display the default WordPress pages in the dropdown.
The Solution: Set 'hierarchical' => true In Your Custom Post Type
Surprisingly, the solution to this issue is quite simple. All you need to do is set the 'hierarchical'
argument to true
when you register your custom post type.
Here's an example of how you might register a custom post type called "brands" with the 'hierarchical'
argument set to true
:
register_post_type( 'brands', array(
'labels' => array(
'name' => __( 'Brands', 'your-text-domain' ),
'singular_name' => __( 'Brand', 'your-text-domain' ),
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'brands' ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => true, // <-- This is the key!
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
));
By setting the 'hierarchical'
argument to true
, you're telling WordPress that your custom post type is hierarchical, just like the default "Page" post type. This allows the wp_dropdown_pages()
function to recognize and display your custom post type options in the dropdown.
Now, when you use the wp_dropdown_pages()
function, you can simply specify the 'post_type'
argument as 'brands'
, and it will work as expected:
wp_dropdown_pages(array(
'id' => 'marque0',
'name' => 'marque0',
'post_type' => 'brands'
));
This will generate an HTML <select>
element with the titles of all the "Brands" custom post type items as the options.
Real-World Example: Displaying A Dropdown Of Brands
Let's take a look at a real-world example of how you can use this technique to display a dropdown of a custom post type called "Brands" on a WordPress website.
Imagine you have a website that sells various products, and you want to allow users to filter the products by the brand they're associated with. You can create a custom post type called "Brands" and then display a dropdown of those brands on your product filtering page.
Here's the code you might use to achieve this:
// Register the "Brands" custom post type
register_post_type( 'brands', array(
'labels' => array(
'name' => __( 'Brands', 'your-text-domain' ),
'singular_name' => __( 'Brand', 'your-text-domain' ),
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'brands' ),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => true, // <-- This is the key!
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
));
// Display the "Brands" dropdown on the product filtering page
function display_brands_dropdown() {
?>
<label for="brand-filter">Filter by brand:</label>
<?php
wp_dropdown_pages(array(
'id' => 'brand-filter',
'name' => 'brand-filter',
'post_type' => 'brands',
'show_option_all' => 'All Brands',
'selected' => isset($_GET['brand-filter']) ? $_GET['brand-filter'] : ''
));
?>
<?php
}
add_action( 'woocommerce_before_shop_loop', 'display_brands_dropdown', 20 );
In this example, we first register the "Brands" custom post type with the 'hierarchical'
argument set to true
. Then, we create a function called display_brands_dropdown()
that uses the wp_dropdown_pages()
function to generate a dropdown of all the "Brands" custom post type items.
We add the display_brands_dropdown()
function to the 'woocommerce_before_shop_loop'
action hook, which will display the dropdown on the WooCommerce product listing page.
When a user selects a brand from the dropdown, the selected brand ID is passed to the URL as a query parameter (e.g., ?brand-filter=123
). You can then use this parameter to filter the product listings accordingly.
Conclusion
In this blog post, we've shown you how to display a dropdown of a custom post type using the wp_dropdown_pages()
function in WordPress. The key is to set the 'hierarchical'
argument to true
when registering your custom post type.
By following this simple technique, you can easily create dropdown menus for your custom post types, allowing your users to navigate and filter your content more effectively.
If you're looking for a way to better understand your website's user behavior and generate recommendations to improve conversion rates, be sure to check out Flowpoint.ai. Flowpoint's advanced analytics and AI-powered recommendations can help you identify and fix technical issues that may be impacting your website's performance
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.