First, create a single states
page.
Add a query var to hold the state value, wpd_state
:
function wpd_query_vars( $qvars ) {
$qvars[] = 'wpd_state';
return $qvars;
}
add_filter( 'query_vars', 'wpd_query_vars' , 10, 1 );
Add a rewrite rule to capture the state from the URL, set the wpd_state
query var, and load the page states
:
function wpd_rewrite_rule() {
add_rewrite_rule(
'states/([^/]+)/?$',
'index.php?pagename=states&wpd_state=$matches[1]',
'top'
);
}
add_filter( 'init', 'wpd_rewrite_rule' );
You can then use get_query_var( 'wpd_state' )
to fetch the requested state, which you can use to pass to your enqueued javascript via wp_localize_script
.