Using WordPress' Theme Customizer to select page templates that update layout in the preview

I wasn’t sure where to post this question..

I recently discovered WordPress’ “Theme Customizer” and am using it to make the pages easier to update for clients. Rather than the standard way of editing each individual page, clicking update, and then visiting the page to see the changes, I like how the Theme Customizer automatically previews your changes on the right side.

I am trying to get an understanding of how far I can go with the Theme Customizer before I go all out on this…

I’ve created a “Home Page” setting/section/control pictured here:

enter image description here

And here is the code for this:

function get_page_templates_select() {
 $teh_cats = get_page_templates();
 foreach ( $teh_cats as $template_name => $template_filename ) {
     if (stripos(strtolower($template_filename), 'home') !== false) {
        $results[$template_filename] = $template_name;
     }
   }
   return $results;
   echo $results;
}

function get_categories_select() {
 $teh_cats = get_categories();
    $results;
    $count = count($teh_cats);
    for ($i=0; $i < $count; $i++) {
      if (isset($teh_cats[$i]))
        $results[$teh_cats[$i]->slug] = $teh_cats[$i]->name;
      else
        $count++;
    }
  return $results;
}

function prowordpress_customize_register( $wp_customize ) {

    // Settings, Sections, and Controls are defined here

    // HOME PAGE

    $wp_customize->add_setting( 'home_page_text' , array(
        'default'           => 'This is the home page text',
        'type'              => 'option',
        'transport'         => 'refresh',
    ));
    $wp_customize->add_section( 'prowordpress_content_customizations' , array(
        'title'       => __('Home Page', 'prowordpress'),
        'description' => __('Modify the Home Page', 'prowordpress'),
        'priority'    => 30,
    ));
    $wp_customize->add_control( 'home_page_text_control', array(
        'label'      => __( 'Home Page Text', 'prowordpress' ),
        'section'    => 'prowordpress_content_customizations',
        'settings'   => 'home_page_text',
        'type'       => 'textarea',
    ));

    $wp_customize->add_setting( 'home_page_template_select' , array(
        'default'           => 'test',
        'type'              => 'theme_mod',
        'transport'         => 'refresh',
    ));
    $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            'home_page_template_select',
            array(
                'label'          => __( 'Home page template:', 'blankwptheme' ),
                'section'        => 'prowordpress_content_customizations',
                'settings'       => 'home_page_template_select',
                'type'           => 'select',
                'choices'        => get_page_templates_select(),
            )
        )
    );

    $wp_customize->add_setting( 'home_page_posts_select' , array(
        'default'           => 'test',
        'type'              => 'theme_mod',
        'transport'         => 'refresh',
    ));
    $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            'home_page_posts_select',
            array(
                'label'          => __( 'Which post type to display on the home page?', 'blankwptheme' ),
                'section'        => 'prowordpress_content_customizations',
                'settings'       => 'home_page_posts_select',
                'type'           => 'select',
                'choices'        => get_categories_select(),
            )
        )
    );

}

add_action( 'customize_register', 'prowordpress_customize_register' );

Home 1 template:

<?php /* Template Name: Home */

get_header();

echo "theme selected: " . get_theme_mod('home_page_template_select');

$page_id = 5;
update_post_meta( $page_id, '_wp_page_template',    get_theme_mod('home_page_template_select') );

?>

<div style="margin-top:60px;">

    <?php echo get_option('home_page_text'); ?>

</div>

<div style="margin-top:60px;">

    <?php
  $args = array(
    'category_name' => get_theme_mod('home_page_posts_select'),
    'posts_per_page' => 5
  );

  // Displays the category's name
  echo "<h3>" . get_category_by_slug($args['category_name'])->name . "    </h3>";
  $the_query = new WP_Query( $args );

   // The Loop
  if ( $the_query->have_posts() ) :
     //echo "<ul>";
    while ( $the_query->have_posts() ) : $the_query->the_post();
      if(has_post_thumbnail($post->ID)){ 
        $thumbsrc = get_the_post_thumbnail($post->ID,'medium'); 
      } else {
        $thumbsrc = "<img src=\"images/no_featured_image.jpg\" alt=\"" . get_the_title() . "\">";
      }
      $link = get_permalink();
      $title = get_the_title();
      $content = get_the_content();
      echo '<div style="width:302px;float:left;height:502px;margin- right:20px;">';
     echo $thumbsrc . '<br>';
      echo '<a href="' . $link . '">'  . $title . '</a><br>' . $content;
      echo '</div>';
    endwhile;
    //echo "</ul>";
  endif;

  // Reset Post Data
  wp_reset_postdata();

?>

</div>

<?php get_footer(); ?>

You can see in the screenshot I’ve added a select menu for “Home page template”…

Is it possible I could set it up where the client can choose an existing “page template” from this select menu and then have the page preview/layout on the right hand side automatically inherit the page template settings and adjust the layout in real-time?

Again, I’m just trying to understand if this is feasible, and if anyone has tried something similar before. I realize this may require some AJAX or something along those lines.

Thanks for the help!

Solutions Collecting From Web of "Using WordPress' Theme Customizer to select page templates that update layout in the preview"

My answer to this is not to continue down this path. It is a good idea to be able to choose a template from the customizer, however, this code looks like it is attempting to save all page data as options and theme mods, and that is a bad idea.

  1. Theme Mods are a single option row in the database, and specific to ONLY the theme you are using. Therefore, any data saved to it is lost to any other theme you may want to use in the future.

  2. Options are single rows in a single table with limited columns and are not considered post data in WordPress, outside of this concept.

Selecting a page_template or other post_meta is available in the Customizer, as seen in a few plugins that are viable for this type of situation.