Projects Engine
  • Home
  • Blog
  • Invoice
  • Courses
  • Contact
  • Login
  • Home
  • Hooks
  • How to Add Custom Filters like Date Range in Posts List Admin Area

How to Add Custom Filters like Date Range in Posts List Admin Area

How to add custom filters like date range in post list admin area 4 minutes read

Almost every part of the WordPress core can be modified using hooks. They can be added to your plugin or a theme and can be used to change how WordPress displays data. If you are new to hooks, here is a whole article about them explaining how they interact with WordPress. We’ll use hooks as well to modify the posts list in the admin area. We suggest adding this functionality to a plugin.

Let’s get started.

Hooks we need

  • restrict_manage_posts
  • pre_get_posts
  • admin_enqueue_scripts

We’ll use the restrict_manage_posts to create the field for filtering. The second hook we’ll be used for filtering the posts, and the third one we’ll be used to include the jquery-ui-datepicker script because it is not automatically included in the admin area.

If successful, the posts list should look something like this:

The code

In your main plugin or a theme file add these hooks (it is up to you how you would like to structure your plugin):

<?php

add_action( 'restrict_manage_posts', 'form_select' );
add_action( 'pre_get_posts', 'query_filter' );
add_action( 'admin_enqueue_scripts', 'jqueryui' );

Create a function (or a method if you are using a class) for each callback:

<?php

function form_select() {
    $post_type = (isset($_GET['post_type'])) ? $_GET['post_type'] : 'post';

    if ($post_type == 'post') {
	// please use unique name
	$from = ( isset( $_GET['pe_date'] ) && $_GET['pe_date'] ) ? $_GET['pe_date'] : '';

	echo '<input type="text" name="pe_date" placeholder="Date From" value="' . esc_attr( $from ) . '" />
		
		   <script>
		      jQuery( function($) {
			  let from = $(\'input[name="pe_date"]\');

			  // the dates look like this "April 3, 2017" by default
			  // you can schoose something different, for example
			  from.datepicker( {dateFormat : "yy-mm-dd"} );
			
		     });
		   </script>';
     } // end if
}

You can include the filter in any post type you want.

function query_filter( $admin_query ) {
	global $pagenow;
	$post_type = (isset($_GET['post_type'])) ? $_GET['post_type'] : 'post';

	if ( $post_type == 'post' && $pagenow == 'edit.php' && isset( $_GET['pe_date'] ) && !empty( $_GET['pe_date'] ) ) {
		$admin_query->set(
			'date_query', // date_query appeared in WordPress 3.7!
			array(
				'after' => sanitize_text_field( $_GET['pe_date'] ),
				'before' => sanitize_text_field( $_GET['pe_date'] ),
				'inclusive' => true, // include the selected days as well
				'column' => 'post_date' // 'post_modified', 'post_date_gmt', 'post_modified_gmt'
			)
		);
	}

	return $admin_query;
}

Do the filtering by date only if the custom post type is post, if we are on the edit page, and if the pe_date field is not empty.

<?php

function jqueryui () {
	wp_enqueue_style( 'pe-jquery-ui', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css' );
	wp_enqueue_script( 'jquery-ui-datepicker' );
}

Include the script and the styling for the datepicker.

This is it. Now, let’s make things more interesting and add another filter that will display the posts by status.

Tweak the form_select function like this:

function form_select() {
	$post_type = ( isset($_GET['post_type']) ) ? $_GET['post_type'] : 'post';

	if ($post_type == 'post') {
		// please use unique name
		$from = ( isset( $_GET['pe_date'] ) && $_GET['pe_date'] ) ? $_GET['pe_date'] : '';
		$current_status = $_GET['pe_status'] ?? '';
		$statuses = get_post_statuses();

		echo '<input type="text" name="pe_date" placeholder="Date From" value="' . esc_attr( $from ) . '" />';

		?>

		<select name="pe_status">
			<option value=""><?= __('All statuses', 'projectsengine'); ?></option>

			<?php

			foreach ($statuses as $key => $status) {
				printf(
					'<option value="%s"%s>%s</option>',
					$key,
					$key == $current_status ? ' selected="selected"' : '',
					$status
				);
			}
			?>
		</select>

		<?php


		echo '<script>
		jQuery( function($) {
			let from = $(\'input[name="pe_date"]\');
	
			// the dates look like this "April 3, 2017" by default
			// you can schoose something different, for example
			from.datepicker( {dateFormat : "yy/mm/dd"} );
			
		});
		</script>';
	}
}

get_post_statuses() will return all of the statuses that are currently registered on your website. Add them as options to a select field.

Tweak the query_filter function like this:

function query_filter( $admin_query ) {
	global $pagenow;
	$post_type = (isset($_GET['post_type'])) ? $_GET['post_type'] : 'post';

	if ( $post_type == 'post' && $pagenow == 'edit.php' ) {
		if ( isset( $_GET['pe_status'] ) && ! empty( $_GET['pe_status'] ) ) {
			$admin_query->set('post_status', $_GET['pe_status'] );
		}

		if ( isset( $_GET['pe_date'] ) && ! empty( $_GET['pe_date'] ) ) {
			$admin_query->set(
				'date_query', // date_query appeared in WordPress 3.7!
				array(
					'after'     => sanitize_text_field( $_GET['pe_date'] ),
					'before'    => sanitize_text_field( $_GET['pe_date'] ),
					'inclusive' => true, // include the selected days as well
					'column'    => 'post_date' // 'post_modified', 'post_date_gmt', 'post_modified_gmt'
				)
			);
		}
	}

	return $admin_query;
}

We’ll modify the posts query only if the fields/filters are not empty.

custom filterwp posts admin
Facebook Twitter linkedin

Was this article helpful?

Yes No

Post navigation

Previous post
Next post

Subscribe

Subscribe to our mailing list to get the new updates.

Follow us

Latest posts

  • How to create a Log in with GitHub button for users to log in on your website in PHP

    How to create a Log in with GitHub button for users to log in on your website in PHP

    26.03.2023
  • How to modify menu items and menu locations in WordPress in various ways

    How to modify menu items and menu locations in WordPress in various ways

    21.03.2023
  • How to convert an array to a comma-separated list in PHP in various ways

    How to convert an array to a comma-separated list in PHP in various ways

    20.03.2023

Popular posts

  • How to convert an array to a comma-separated list in PHP in various ways

    How to convert an array to a comma-separated list in PHP in various ways

    20.03.2023
  • How to Edit the WooCommerce Single Product Template Programmatically with Examples

    How to Edit the WooCommerce Single Product Template Programmatically with Examples

    13.03.2023
  • How to edit the WooCommerce single product template

    How to Edit the WooCommerce Single Product Template Programmatically

    03.04.2021
Projects Engine
Projects Engine provides code and tutorials for your themes and plugins you need to create remarkable sites on WordPress that will drive your business forward faster. The primary purpose of this site is to give high-quality WordPress tips, tricks, hacks, and other tools to help WordPress developers improve their site(s) and skills. Projects Engine was founded in December 2020 by Dragi Postolovski.
Copyright 2023 Projects Engine
  • Home
  • Privacy Policy
  • Terms and Conditions
  • Disclaimer
  • Courses
  • Dictionary
  • Plugins
  • Contact

Our website uses cookies to improve your experience. Learn more

I understand!