Search code examples
wordpresscustomization

Display a specific page of the template in WordPress customization

Full Edit:

My previous question was not clear, that's why I completely edited my question.

I have created a file called example.php in the main root of my template.

I have put the following code in the example.php file:

<?php /* Template Name: Template Example */ ?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
    
<body>

<?php echo get_theme_mod('setting_input_contactUs'); ?>

</body>

</html>

In order for this page to be created automatically, I have put the following code in the functions.php file:

$check_page_exist = new WP_Query( array(
    'pagename'       => 'TemplateExample',
    'posts_per_page' => 1,
    'no_found_rows'  => true,
    'fields'         => 'ids',
  ) );
  
  $template_slug    = 'example.php';
  
  if ( empty( $check_page_exist->posts ) ) { 
       $page_id = wp_insert_post(
         array(
              'comment_status' => 'close',
              'ping_status'    => 'close',
              'post_author'    => 1,
              'post_title'     => ucwords( 'Template Example' ),
              'post_name'      => strtolower( str_replace( ' ', '-', trim( 'TemplateExample' ) ) ),
              'post_status'    => 'publish',
              'post_content'   => ' ',
              'post_type'      => 'page',
              'post_parent'    => ' ',
              'page_template'  => $template_slug,         
         )
     );
      
  }

Now I want to put a controller in it through WordPress customization. For this purpose, I have again put the following code in the functions.php file, which is a simple input controller:

function customize_contactUs($wp_customize){

$wp_customize->add_section('section_input_contactUs', array(
    'title' => esc_html__('Contact us sheet', 'section'),
    'priority' => 5,
));  

    
    $wp_customize->add_setting( 'setting_input_contactUs', 
 array( 
     
    'type'       => 'theme_mod', 
     'transport'  => 'refresh',  //postMessage
 ) 
);
    

$wp_customize->add_control( 'setting_input_contactUs',
   array(
     
      'section' => 'section_input_contactUs',
      'type' => 'text',
      'input_attrs' => array(
         'placeholder' => __( 'Default text' ),
      ),
       
   )
);

}
add_action( 'customize_register', 'customize_contactUs' );

When I go through settings > Display > customization the theme home page is displayed by default in the live preview. Now when I click on the input controller that I created for the example.php file the controller works correctly but the live preview still shows the main page.

I have put the following tag on the main page so that I can go to the page I want through customization:

<a href="https://localhost/site/templateexample">Go To Example</a>

But clicking on it only refreshes the page and I am not redirected to any page.

But if I click on this link outside of WordPress customization, I enter the (example) page correctly.

Please help me how can I access the (example) page for customization through live preview.

Edit:

The reason for not displaying the created page in live preview is the lack of the following shortcodes:

<?php get_header(); ?>

<?php get_footer(); ?>

The page I'm trying to render in live preview has no need for <?php get_header(); ?> and <?php get_footer(); ?> does not have And if I use these two codes; The codes that I put in the created page interfere with the designed template and as a result the template is broken.

Is there a way around this?

Solution

  • I think the documentation from the official WordPress website will help you. https://developer.wordpress.org/themes/template-files-section/page-template-files/

    For your custom template you need to name the file page-contact-us.php OR ensure that in the header of your custom file, you have the following:

    <?php /* Template Name: Example Template */ ?>

    If you choose the latter, you will have to edit the page attributes from your editor and select the page template from the drop down.