Hi, in this WordPress common page template development we are going to learn to create the default page template the page.php file for WordPress theme development. If you are not going to select any page template from WordPress admin panel while creating a page then the page.php file the default page template will be called for showing or displaying the page. Now start to develop the default page template step by step.
Step 1. Select an HTML page that is used in most of the pages.
Step 2. Now remove the common Header, Footer and sidebar portion
Step 3. Save the file as page.php file in your theme folder as page.php file.
Step 4. Get the Header, Footer, Sidebar template in the page.php files.
- To get Header template use the code <?php get_header(); ?>
- To get Footer template use the code <?php get_footer(); ?>
- And to get Sidebar template use the code <?php get_sidebar(); ?>
Step 5. Now after <?php get_header(); ?> get the post content entered for the page, and for that use the code <?php if(have_posts()): while(have_posts()): the_post(); endwhile; endif; ?>
Step 6. After getting all the post content have to get the title , content and featured image for the page. To print the title use the code <?php the_title(); ?> the title can be stored in variable also for that use the code <?php $title = get_the_title(); ?> Similarly to to print the content use the code <?php the_content(); ?> the content can be get in variable also and for that use the code <?php $content = get_the_content(); ?> And for the featured image I am advice to get the link location of the image as if you have to use some special class or id for the image like img-responsive then need to get the location and for that use the code
<img class=”img-responsive” src=”<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID)); ?>” />
Now I am going to show the sample code for the page.php file.
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): ?>
<?php the_post(); ?>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4”>
<?php get_sidebar(); ?>
</div>
<div class=”col-md-8”>
<div class=”featured-image”>
<img class=”img-responsive” src=”<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID)); ?>” alt=”<?php the_title(); ?>” />
</div>
<div class=”heading”>
<?php the_title(); ?>
</div>
<div class=”content”>
<?php the_content(); ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
And you have created the default page template the file page.php and if not selected any page template while creating a page form WordPress admin panel the age will be used to display the content of the page.
Next, we are going to learn about the Develop WordPress custom page template contact us page with contact form using contact form 7 plugin