Dropdown Select Menu displaying post titles from Custom Term “National Clients” from Custom Taxonomy “Client Status” from Custom Post Type “Clients”
This is for a music recording studio, displaying National Clients and Local Clients via a dropdown select menu. The PHP and HTML code is placed on the WordPress site via Code Snippets WordPress plugin.
Overview of the function:
- The function displays the dropdown select menu
- The
if
conditional tells the code which page to be displayed on - The action hook tells the code where on the page to be displayed
How to hook it into kadence_before_content hook: https://webnolo.com/how-to-show-a-widget-area-using-a-hooked-element-in-kadence/
Full code:
/*
* Dropdown Select Menu displaying post titles from Custom Term "National Clients" from Custom Taxonomy "Client Status" from Custom Post Type "Clients"
* How to hook it into kadence_before_content hook: https://webnolo.com/how-to-show-a-widget-area-using-a-hooked-element-in-kadence/
*/
function dropdown_working() {
if( is_category( 'photos' ) ) { // Display in JUST Photos Category. NOW need to get it to display on JUST client_status, national-clients, local-clients, client, music_project
// Start custom code
/*************************
* 2 Dropdown Select Menus: National Clients and Local Clients
**************************/
// Query Arguments for National Clients
$args_national_clients = array(
'posts_per_page' => '-1', // use -1 for all posts - From https://developer.wordpress.org/reference/classes/wp_query/ User Contributed Notes section
'orderby' => 'title', // From https://tomelliott.com/wordpress/get-posts-custom-taxonomies-terms
'order' => 'ASC', // From https://tomelliott.com/wordpress/get-posts-custom-taxonomies-terms
'post_type' => 'client', // the post type or custom post type
'tax_query' => array( // Custom taxonomy query is an array of arrays
array(
'taxonomy' => 'client_status', // the custom taxonomy
'field' => 'slug',
'terms' => array('national-clients'), // term slug(s)
),
),
);
// Query Arguments for Local Clients
$args_local_clients = array(
'posts_per_page' => '-1', // use -1 for all posts - From https://developer.wordpress.org/reference/classes/wp_query/ User Contributed Notes section
'orderby' => 'title', // From https://tomelliott.com/wordpress/get-posts-custom-taxonomies-terms
'order' => 'ASC', // From https://tomelliott.com/wordpress/get-posts-custom-taxonomies-terms
'post_type' => 'client', // the post type or custom post type
'tax_query' => array( // Custom taxonomy query is an array of arrays
array(
'taxonomy' => 'client_status', // the custom taxonomy
'field' => 'slug',
'terms' => array('local-clients'), // term slug(s)
),
),
);
// The new Query for National Clients
$query_national_clients = new WP_Query( $args_national_clients );
// The new Query for Local Clients
$query_local_clients = new WP_Query( $args_local_clients );
?><!-- swap from PHP to HTML -->
<!-- Start div for CSS styling -->
<div class="wrapper-clients-dropdown">
<div class="box empty1">Empty 1</div>
<div class="box item1"><!-- DIV for National Clients items/elements inside CSS-Grid https://gridbyexample.com/examples/example32/ --->
<?php // swap from HTML to PHP
// The Loop for National Clients
if ( $query_national_clients->have_posts() ) : // Start the if statement. NEW CODE from https://wordpress.stackexchange.com/questions/101055/get-all-posts-from-a-custom-post-type
?><!-- swap from PHP to HTML so select tag & onchange JS work properly -->
<select onchange="window.document.location.href=this.options[this.selectedIndex].value;"><!-- onchange from: https://wp-mix.com/javascript-redirect-url-select/ -->
<option selected="selected">NATIONAL CLIENTS</option><!-- Initial option in dropdown select menu; must be before the while loop https://www.tutorialrepublic.com/faq/how-to-populate-dropdown-list-with-array-values-in-php.php -->
<?php // swap from HTML to PHP
while ($query_national_clients->have_posts()) : $query_national_clients->the_post();
?><!-- swap from PHP to HTML -->
<option value="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></option><!-- The heart of the dropdown select menu. Displays custom post titles and their permalink URLs. -->
<?php // swap from HTML to PHP
endwhile; // End the while Loop
?><!-- swap from PHP to HTML -->
</select><!-- Close the select tag for the dropdown select menu -->
<?php // swap from HTML to PHP
endif; // End the if statement
wp_reset_postdata(); // reset global $post
?><!-- swap from PHP to HTML -->
</div><!-- End DIV for National Clients items/elements inside CSS-Grid --->
<div class="box item2"><!-- DIV for Local Clients items/elements inside CSS-Grid https://gridbyexample.com/examples/example32/ --->
<?php // swap from HTML to PHP
// The Loop for Local Clients
if ( $query_local_clients->have_posts() ) : // Start the if statement. NEW CODE from https://wordpress.stackexchange.com/questions/101055/get-all-posts-from-a-custom-post-type
?><!-- swap from PHP to HTML so select tag & onchange JS work properly -->
<select onchange="window.document.location.href=this.options[this.selectedIndex].value;"><!-- onchange from: https://wp-mix.com/javascript-redirect-url-select/ -->
<option selected="selected">LOCAL CLIENTS</option><!-- Initial option in dropdown select menu; must be before the while loop https://www.tutorialrepublic.com/faq/how-to-populate-dropdown-list-with-array-values-in-php.php -->
<?php // swap from HTML to PHP
while ($query_local_clients->have_posts()) : $query_local_clients->the_post();
?><!-- swap from PHP to HTML -->
<option value="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></option><!-- The heart of the dropdown select menu. Displays custom post titles and their permalink URLs. -->
<?php // swap from HTML to PHP
endwhile; // End the while Loop
?><!-- swap from PHP to HTML -->
</select><!-- Close the select tag for the dropdown select menu -->
<?php // swap from HTML to PHP
endif; // End the if statement
wp_reset_postdata(); // reset global $post
?><!-- swap from PHP to HTML -->
</div><!-- End DIV for Local Clients items/elements inside CSS-Grid --->
<div class="box empty2">Empty 2</div>
</div><!-- End CSS styling -->
<?php // swap from HTML to PHP
/*************************
* END 2 Dropdown Select Menus: National Clients and Local Clients
**************************/
// End custom code
} // Close is_category
} // close function
add_action( 'kadence_before_content', 'dropdown_working' );