WordPress how to make a custom page template

Hi, today we will learn WordPress page template development, contact us page with the contact form, using contact form 7 plugin, contact form 7 plugin will provide a shortcode which has to place in a wishing editor or in page by

<?php echo do_shortcode(‘[the short code here]’); ?>

 

Now start to create a contact us page step by step

Step 1.

First, create a file inside your theme folder by any name ex template_contact.php and write the code in PHP tag as commenting <?php /*Template Name: Contact Us */ ?> to declare the template name and it will be shown on the admin panel.

Step 2.

Get the HTML design code and paste on it.

Step 3.

Place <?php get_header(); ?> in the common portion for the header template. , Place <?php get_footer(); ?> in the portion for the footer template and if needed use <?php get_sidebar(); ?> for the sidebar portion for the sidebar template.

Step 4.

Now after <?php get_header(); ?> write the code <?php if(have_posts()): the_post(); endif; ?> to get all the post content.

Step 5.

Now in the position of title write the code <?php the_title(); ?> to print the title and in the position of content writing <?php the_content(); ?> and in the position of featured image write the code <img class="img-responsive" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID)); ?>" />

Step 6.

Now go to contact to set up a contact form and get the shortcode and paste in the content portion of the page content or write the code <?php echo do_shortcode(‘[the_shortcode of contact form 7]’); ?> to create contact form 7 and get the shortcode to follow the admin tutorial of contact form 7 plugin

Step 7.

Now for the google map field go to advance custom field menu from admin panel and create fields for the page template to create a field using custom field please follow our advance custom field plugin admin uses tutorial

Step 8.

Now print the field in the template_contact.php page by using <?php the_field(‘here will be the field name’); ?> or you can get the field value by using <?php $field_val = get_the_field(‘here will be the field name’); ?>

Now here is a sample code for contact us page

<?php

/*

* Template Name: Contact Us

*/

?>

<?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=”featured-form”>

<?php echo do_shortcode(‘[contact-form-7 id="36" title="Contact form 1"]’); ?>

</div>

<div class=”heading”>

<?php the_title(); ?>

</div>

<div class=”content”>

<?php the_content(); ?>

</div>

<div class=”map”>

<?php the_field(‘google_map’); ?>

</div>

</div>

</div>

</div>

<?php endwhile;?>

<?php endif; ?>

<?php get_footer(); ?>

 

Now you have learned how to create a custom template page in next post we will learn to develop the WordPress  newsletter  subscription using mail poet newsletter plugin

Thanks for reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.