WordPress how to make a custom page template

Hi, today we will learn WordPress page template development, contact us page with contact form , using contact form 7 plugin, contact form 7 plugin will provide a short code which have 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 admin panel.

Step 2.

Get the HTML design code and paste on it.

Step 3.

Place <?php get_header(); ?> in the common portion for header template. , Place <?php get_footer(); ?> in the portion for footer template and if needed use <?php get_sidebar(); ?> for the sidebar portion for sidebar template 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 write <?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 setup a contact form and get the short code 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 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 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.