This is the custom grid to display the list of speakers as presented in WordCamp Seattle 2014. It focuses on the speaker program developed for the Bellevue Breakfast Rotary Club. The other posts in this series are:
WordCamp Seattle 2014 Custom Prev and Next Post Filters
WordCamp Seattle 2014 Speaker Program Dashboard Filters

Speaker Program Grid Search Collpased

To achieve the correct order and to get the correct custom posts, we need to pass the corect arguments to WP_Query. The grid itself uses the jQuery Datatables plugin to display the results. The permalink is stored in a hidden column which allows us to navigate to the single Rotary Speakers post.

So, what are the query parameters and how does this work?

To get the basic results we pass in these query arguments:
post_type => rotary_speakers
posts_per_page] => -1
orderby => meta_value
meta_key => speaker_date

But notice how we have not addressed actually putting the WP_Query call together. That is because we use the advanced search feature the appears at the top of the page. When “Advanced Search” is clicked it reveals the form you see below, allowing the speakers to be searched by a several different criteria. The search is implemented using WP Advanced Search and that is how we implement the query.

Speaker Grid Search Expanded

Advanced Search

Setting Up the Form Fields

This displays the data for the fields

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

$args = array();
$args['wp_query'] = array('post_type' => 'rotary_speakers',
							'posts_per_page'  => -1,
							'orderby' => 'meta_value',
							'meta_key' => 'speaker_date');
$args['fields'][] = array('type' => 'meta_key',
						  'format' => 'text',
						  'default' => '',
						  'compare' => 'LIKE',
						  'label' => 'First Name',
                          'meta_key' => 'speaker_first_name');
$args['fields'][] = array('type' => 'meta_key',
						  'format' => 'text',
						  'compare' => 'LIKE',
                          'label' => 'Last Name',
                          'meta_key' => 'speaker_last_name');
$args['fields'][] = array('type' => 'meta_key',
						  'format' => 'text',
						  'compare' => 'LIKE',
                          'label' => 'Organization',
                          'meta_key' => 'speaker_company');
$args['fields'][] = array('type' => 'meta_key',
						  'format' => 'text',
                          'label' => 'Job Title/Position',
                          'compare' => 'LIKE',
                          'meta_key' => 'speaker_title');
 
$args['fields'][] = array('type' => 'taxonomy',
                          'label' => 'Category',
                          'format' => 'select',
                          'allow_null' => 'Select a Category',
                          'taxonomy' => 'rotary_speaker_cat');
 
$args['fields'][] = array('type' => 'taxonomy',
                          'label' => 'Tag(s)',
                          'format' => 'select',
                          'allow_null' => 'Select a Tag',
                          'taxonomy' => 'rotary_speaker_tag');
 
 
$args['fields'][] = array('type' => 'meta_key',
						  'format' => 'text',
                          'label' => 'About the Speaker',
                          'compare' => 'IN',
                          'meta_key' => 'speaker_bio');
 
$args['fields'][] = array('type' => 'meta_key',
						  'format' => 'date',
                          'label' => 'Speaker Dates',
                          'compare' => '>=',
                          'data_type' => 'DATE',
                          'placeholder' => 'mm/dd/yyyy',
                          'meta_key' => 'speaker_date_from',
                          'sublabel' => 'From');
$args['fields'][] = array('type' => 'meta_key',
						  'format' => 'date',
                          'label' => ' ',
                          'sublabel' => 'To',
                          'compare' => '<=',
                          'data_type' => 'DATE',
                          'placeholder' => 'mm/dd/yyyy',
                          'meta_key' => 'speaker_date_to');
 
 
$args['fields'][] = array('type' => 'reset',
						  'value' => "Reset Filters");
$args['fields'][] = array('type' => 'submit',
						  'value' => 'Search');
$args['form'] = array('method' => 'POST');

Showing the Advanced Search Form

Showing the form is much simpler than setting up all of the form field values:

1

$speaker_search->the_form();

Running the Query

Just like showing the form running the query is just a few lines of code:

1
2

$query = new WP_Query(); 
$query = $speaker_search->query();

Processing the query results just uses a standard WordPress loop.

Using jQuery Datatables

1. Download datatables from http://www.datatables.net/.
2. Enqueue the data tables script in your functions.php file:

1

wp_enqueue_script( 'datatables', get_bloginfo('template_directory').'/includes/js/jquery.dataTables.min.js', array( 'jquery' ) );

3. Create your own custom js and enqueue it. my is rotary-theme.js. So my enqueue function is like this:

1

wp_enqueue_script( 'rotary', get_bloginfo('template_directory').'/includes/js/rotary-theme.js', array( 'jquery' ) );

4. This is how I initialize datatables in my custom js file:

1
2
3
4
5
6
7
8
9
10
11
12
13

$('#speaker-archive-table').dataTable({
	'iDisplayLength': 50,
	'aoColumnDefs': [{
		'sClass': 'hide speakerlink',
		'aTargets': [0]
	}, {
		'sClass': 'speakerDate',
		'aTargets': [1]
	}, {
		'sClass': 'speakerTitle',
		'aTargets': [2]
	}]
});