How to create demo sites to showcase different layouts?

How are so many theme authors making it possible to show menu links to show the different headers or blog styles and layouts from the same demo? I often see a theme demo with several menu links with the URL containing a ? in it like this example: /?home=masonry

I’d like to start theme demos that can showcase the different layouts live of a blog, different home page layouts, or the different header styles, etc., of a theme, but cannot for the life of me find any tutorial on how to do that.

My header styles, blog layouts. and other options are selected from the WordPress Customizer, so this means you can only see one style, one layout, on the live demo.

I tried looking on Google, but no “how to” tutorials show up for anything like this.

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:

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.


First, thank you for that…although I will need to check this out when I’m more alert and had enough sleep, lol :slight_smile:

I’m thinking child themes are best for the demos so I can maintain the parent theme with updates, especially that my demos are on a WP network setup.

As for my theme structure, my themes generally are setup where the /template-parts/ have the different blog styles, header styles, etc. The style is chosen by the user from the WP Customizer via a radio button group. Same goes for the header styles, and single (full post) layout.

These are the same, could be done via the filter hook easily :slight_smile:


Thank you for your input. I really need help with this question as well.

I’m using radio buttons to display different layouts, which can be customized in customizer setting.

could you please give an example on this one as well.?