Dropdown Select Menu Displaying Post Titles of Custom Post Type

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' );

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *