[Resolved] How to add month and year dropdown filters for an archive search?

[Author]

Posts

[eldonM]

Trying to create searchable/filterable archives for events and other post-types. The filter would be for both year and month.

Unable to find documentation on how to do this using user search and filter. Most results seem to be creating views.

I haven't been able to find any examples.

What is the link to your site? hidden link

[Waqar]

Hi Eldon,

Thank you for contacting us and I'll be happy to assist.

I looked at the page that you've shared ( hidden link ) and noticed that it is already showing posts, using a Toolset View.

To filter these posts, based on year and month, you can add query filters, as explained in this guide:
https://toolset.com/documentation/user-guides/filtering-views-query-by-date/

1. The first step would be to add two separate query filters, one for a year and the other for a month.
Example screenshot: hidden link

2. Since the front-end search filters for these two fields are not available out-of-the-box, the next step would be to include to search filter fields to pass on these two parameters, manually:

<div class="form-group">
	<label>Year</label>
	<select id="wpv_control_select_year-filter" name="year-filter" class="js-wpv-filter-trigger form-control">
		<option value="">Select year</option>
		<option value="2015">2015</option>
		<option value="2016">2016</option>
		<option value="2017">2017</option>
		<option value="2018">2018</option>
		<option value="2019">2019</option>
	</select>
</div>
<div class="form-group">
	<label>Month</label>
	<select id="wpv_control_select_month-filter" name="month-filter" class="js-wpv-filter-trigger form-control">
		<option value="">Select month</option>
		<option value="1">January</option>
		<option value="2">February</option>
		<option value="3">March</option>
		<option value="4">April</option>
		<option value="5">May</option>
		<option value="6">June</option>
		<option value="7">July</option>
		<option value="8">August</option>
		<option value="9">September</option>
		<option value="10">October</option>
		<option value="11">November</option>
		<option value="12">December</option>
	</select>
</div>

Note:

a). The above code for fields, should be included in between "[wpv-filter-controls] ... [/wpv-filter-controls]" shortcode, in the "Search and Pagination" section.

b). Feel free to include or exclude years, as needed.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[eldonM]

My issue is resolved now. Thank you for making it so simple to follow and understand.

[eldonM]

Is there a way to do this with custom fields for event dates? So now the filter would be looking at the event-start-date instead of the published date.

[Waqar]

Hi Eldon,

Thanks for the update and glad it helped.

The filter settings shared in the last message work with only the built-in date fields like post's published or modified dates.

For the date type custom fields you can add front-end search filter which works for the complete date ranges, but not for a year and/or month ranges.
( ref: https://toolset.com/documentation/user-guides/front-page-filters/ )

You're welcome to submit this as a feature request at:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

For now, you can use a workaround in which each event's year and the month is saved separately in a new "Event Year" and "Event Month" custom fields ( which would be a "Number" type field and not a "Date"). Those custom fields can then be used directly for a front-end search filter for the year and month.

Website's admin can either fill these values manually in these new fields or you can use a custom PHP function to update them automatically.
( ref: https://toolset.com/documentation/customizing-sites-using-php/updating-types-fields-using-php/ )

For more personalized assistance around custom code, you can hire a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar