Custom editable content for front page from Theme Customizer

It’s an interesting thought to use the theme customizer to completely build the front page. Here is how I would start it.

First, let’s build a section that only shows on the front-page:

add_action( 'customize_register', 'wpse_205445_customizer' );
function wpse_205445_customizer($wp_customize) {
     $wp_customize->add_section( 'custom-front-page', array(                                             
           'title'           => "Custom Front Page",
           'priority'        => 10,
           'active_callback' => 'is_front_page'
     ));
}

Second, lets make some settings. Just one example here, a dropdown list to select the main page setup. Beware that transport must be refresh, because we’ll need a complete page load further on.

$wp_customize->add_setting('main-page-setup', array(
    'default'                   =>  '',
    'type'                      =>  'theme_mod',
    'capability'                =>  'edit_theme_options',
    'theme_supports'            =>  '',
    'transport'                 =>  'refresh',
    'sanitize_callback'         =>  'sanitize_text_field'
    ));

Third, the setting must have a control:

$control_args = array(
    'label'                     =>  'My Main Page Setup',
    'section'                   =>  'custom-front-page',
    'settings'                  =>  'main-page-setup',
    'priority'                  =>  20,
    'type'                      =>  'select',
    'choices'                   =>  array('one-column', 'twocolumns', 'threecolumns'),
    );
$wp_customize->add_control( new WP_Customize_Control ($wp_customize, 'main-page-setup', $control_args));

Now we have a dropdown select in the customizer, showing on the frontpage only, that gives three options. Now, let’s move to front-page.php. Here we need to call that mod:

$main-page-setup = get_theme_mod('main-page-setup');
switch ($main-page-setup) {
    case 'one-column'    : get_template_part ('front-page-one-column');
    case 'two-columns'   : get_template_part ('front-page-two-columns');
    case 'three-column ' : get_template_part ('front-page-three-columns');
    default              : get_template_part ('front-page-default');
    }

So, there it is, a method to complete change the layout of your front page using the customizer. Of course, instead of loading template parts, you can also switch between images or between different post queries to change the content.