I have a site, linked here, which was previously created in another cms, but is being moved to WordPress. I am seeking some guidance on moving one of the more complex features over to WordPress.

Specifically, the Find a Restaurant search and filter below the hero is what I am having issues replicating in WordPress. Previously this component was built using Angular, but due to the current CMS being discontinued, we need to move the site over to WordPress. I believe we might be able to achieve similar search and filtering functionality using wp query and some javascript, and nothing else. If possible, I would like to avoid using plugins and leverage what is natively in .

Currently, I have a custom post type, called Restaurant, which represents each restaurant “card” in the filterable content, and have a custom taxonomy called Dining Categories associated with the Restaurant. This Dining Categories taxonomy is meant to represent the tags on each restaurant card, such as “American”, “Seafood”, “Pub”, etc.

These custom post types and taxonomy are set up as follows:

function register_restaurant_post_type() {
    $supports = array(
        'title', // post title
        'thumbnail', // featured images
        'custom-fields', // custom fields
    );
    $labels = array(
        'name' => _x('Restaurants', 'plural'),
        'singular_name' => _x('Restaurant', 'singular'),
        'menu_name' => _x('Restaurants', 'admin menu'),
        'name_admin_bar' => _x('Restaurants', 'admin bar'),
        'add_new' => _x('Add New', 'add new'),
        'add_new_item' => __('Add New Restaurant'),
        'new_item' => __('New Restaurant'),
        'edit_item' => __('Edit Restaurant'),
        'view_item' => __('View Restaurant'),
        'all_items' => __('All Restaurants'),
        'search_items' => __('Search Restaurants'),
        'not_found' => __('No restaurants found.'),
    );
    $args = array(
        'supports' => $supports,
        'labels' => $labels,
        'public' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'restaurants'),
        'has_archive' => true,
        'hierarchical' => false,
        'exclude_from_search' => true,
        'menu_icon' => 'dashicons-food'
    );

    register_post_type('restaurant', $args);

    register_taxonomy( 'dining-categories', array('restaurant'), array(
        'hierarchical' => true,
        'label' => 'Dining Categories',
        'singular_label' => 'Dining Category',
        'rewrite' => array( 'slug' => 'dining-categories', 'with_front'=> false )
        )
    );

    register_taxonomy_for_object_type( 'dining-categories', 'restaurant' ); // Better be safe than sorry
}
add_action( 'init', 'register_restaurant_post_type' );

Within each Restaurant, I am using Advanced Custom Fields to create the needed fields to enter details about each Restaurant such as address, phone, etc. while keeping the Title for each restaurant to the native WordPress Title field. All that being said, the search input field on the front end will need to be able to search the ACF fields AND the native WordPress fields of each Restaurant to find a potential matches in either place.

I’m pretty novice with PHP and wordpress, but have quite a bit of experience with javascript and json and the like. Any guidance or help is much appreciated.

Thanks so much.