This could be done with add_filter hook easily.
Depends on your theme structure that you have different solutions for that.
Example: if you have two different header layouts, I assume you have header-layout1.php and header-layout2.php
You could call the layout easily in the theme with layout1 as default like this:
$my_header = themename_get_my_header_layout(); // this will return the **layout1** or **layout2** from WP Customizer.
get_header( $my_header );
But you can’t call more demo layouts at Frontend if you use this way, right?
So the solution is you need to pass the $my_header via a filter hook, something like this:
$my_header = themename_get_my_header_layout(); // this will return the **layout1** or **layout2** from WP Customizer.
$my_header = apply_filters( 'themename_set_my_header_layout' , $my_header ); // catch the header variable from url
get_header( $my_header );
Simply, build a demo url like this by manually:
http://my-site.com/?header=layout2
And try to catch the header variable in functions.php file, something like this:
if( ! function_exists( 'themename_demo_set_the_header_layout' ) ){
/**
* Set the demo header layout from child theme.
* @param unknown_type $header
* @return Ambigous <NULL, string>
*/
function themename_demo_set_the_header_layout( $header = 'layout1' ) {
$header = isset( $_GET['header'] ) ? trim( $_GET['header'] ) : null;
// Add more checking conditions here.
return $header;
}
add_filter( 'themename_set_my_header_layout', 'themename_demo_set_the_header_layout', 10, 1 );
}
Now, the visitor can view the header layout 2 if they click on that link.
The code could be placed in the child theme or parent theme, depends on your mind, you could build so many demo layout as you can via the filter hook, that’s the way about how the theme author makes their demo sites with different layouts.
Hope that helps.
