TVMDL had an old custom database for its diagnostic tests. The database did not support aliases, fuzzy matching, or relevance-based results, and users found it frustrating to use. Most of the staff didn’t have permission to correct errors, and the interface could not be updated to match the current website design.
As part of the overall site redesign in 2015, I used WP All Import to integrate the test data into WordPress custom post types and fields.
The new test search feature uses Relevanssi Pro to index the custom fields and provide relevance-based results with fuzzy matching and basic English stemming. Additional custom code allows users to leave the search field blank and submit the form using only the species selections. Empty searches with no species selections redirect to the master list of all tests. Relevanssi allows us to specify synonyms, ensuring that veterinarians can find the relevant tests whether they enter “canine” or “dog.”
Each search result row includes a detail view. This data is not retrieved until the user requests it, which keeps the main search result list fast and efficient. On mobile screens, the detail view changes from a side-by-side table layout to a vertical list.
The client requested a “View All” button that would override WordPress’s built-in posts-per-page limit for search results. This was surprisingly tricky to implement; WordPress has failsafes to prevent people from requesting unlimited posts, which would tax the database server on large sites. In this case, the data set is small enough that the occasional use of “View All” does not pose a problem, and of course the pages are cached until the data set changes.
In addition to the many custom fields used in the test database, Advanced Custom Fields Pro offers an easy site-wide options screen where administrators can manage the footer contact information, emergency announcement banners, and the gorgeously detailed photos used as the backdrop for the search feature. Each photo has its own CSS alignment settings for widescreen, tablet/small desktop, and mobile layouts.
The responsive design called for two navigation menus, one for the labs’ locations and one for the main site navigation. On small screens, the location menu is automatically appended to the main menu to save space and avoid confusing visitors.