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