This is one way I did it. Products is the parent page with a tree of child pages underneath. Limited to a depth of 2, I guess. After doing this way, realized that the URL doesn’t update and users would not be able to copy the URL and share it. Now looking at adding a query_var and using the pre_get_query filter instead. Also added some javascript to submit form anytime it changes so no need to press submit button. Sharing this code:
/**
* Template Name: Products
* Description: Used to show Products and it's child pages of product categories and subcategories.
*/
add_action( 'genesis_before_loop', 'jht_products_form' );
add_action ( 'genesis_after_loop', 'jht_products_after_loop');
function jht_products_form() {
global $wp_query, $post;
$productPage = get_page_by_path('products');
$parentSelected = 0;
$childSelected = 0;
//TODO Maybe Add event in javascript - can use that to add page_id to query. Could bypass these checks. OR create query_vars to use pre_get_query action
// Check to see if submission and that nonce validates
if( isset($_POST['product_nonce']) && wp_verify_nonce( $_POST['product_nonce'], 'product_selectd')) {
// Sanitize inputs
$parentSelected = isset( $_POST['parent_page_id'] ) ? intval( $_POST['parent_page_id'] ) : 0;
$childSelected = isset( $_POST['child_page_id'] ) ? intval( $_POST['child_page_id'] ) : 0;
// reset childSelected if current childSelected is not a child of parentSelected
$ancestors = get_post_ancestors( $childSelected );
if( !empty( $ancestors ) && !in_array( $parentSelected, $ancestors)) {
$childSelected = 0;
}
}
// Arguments to create the Category Select box
$parent_args = array(
'depth' => 1,
'child_of' => $productPage->ID,
'name' => 'parent_page_id',
'selected' => $parentSelected,
'show_option_none' => 'Choose Category'
);
// Arguments to create the SubCategory Select box (empty if parentSelected is 0)
$child_args = array();
if($parentSelected !== 0) {
$child_args = array(
'depth' => 1,
'child_of' => $parentSelected,
'name' => 'child_page_id',
'selected' => $childSelected,
'show_option_none' => 'Choose SubCategory'
);
}
// Alter $post data depending on what form is showing
if ($parentSelected !== 0) {
if ($childSelected !== 0) {
query_posts(array(
'page_id' => $childSelected
));
} else {
query_posts(array(
'page_id' => $parentSelected
));
}
}
?>
javascript
(function( $ ){
/* javascript code goes here. Will run after page is loaded in the DOM */
console.log( 'my scripts started');
$('document').ready(function() {
//If product form is on page, add event to submit form on change
$('#product_select').on('change', function() {
$('#product_select').trigger('submit');
})
});
})(jQuery);
