1

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!

  • Absolutely, the transport method of refresh should attempt to query the page with the new data selected. – Nathan Powell Apr 28 '16 at 23:53
  • I am trying to use this code at the top of each template to get the selected template: $page_id = 5; update_post_meta( $page_id, '_wp_page_template', get_theme_mod('home_page_template_select') ); However it is not refreshing the layout when I select a different template in the preview mode. Any suggestions how to accomplish this? – cpcdev Apr 29 '16 at 1:16
  • It would be helpful to see the full code of your "page template". Can you update your question with the name of the template and the code used there? – Nathan Powell Apr 29 '16 at 1:26
  • Thanks for your help. Heres the paste: pastebin.com/t170jym0 I pasted the full code. Here's what's interesting: When I switch the "template" option.. the preview does not change.. however, if I then modify one of the other fields (like the "home page text" or "post category") then after it refreshes I see the new layout! There must be a mistake in my code somewhere. Thank you again! Also I put a lot of whitespace in the paste to help separate the functions and individual template code (Home, Home 2) – cpcdev Apr 29 '16 at 1:31
  • I'm sorry, pastebin is not sufficient. Please update your question with the code. – Nathan Powell Apr 29 '16 at 1:32
0

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.

| improve this answer | |
  • I appreciate your input. I am thinking it over. I am building this with a very "templated" theme in mind where the site is not very complex and there are only a few areas to update. My goal is to deliver a central location for updating the pages and the live preview is a good help to these users who don't know what they are doing. – cpcdev Apr 29 '16 at 4:13
  • Check out the plugins linked in the article, the developers are well known and respected. You can learn a lot from the code they offer for free by looking it over and trying for yourself. Good luck! – Nathan Powell Apr 29 '16 at 4:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.