The template hierarchy in WordPress is a really cool feature to manage a WordPress website. If you are familiar with this architecture then you can build a custom website. The WordPress template hierarchy provides post types, taxonomy, archives, singular page, and many more. Also, it contains the custom post types and WordPress taxonomy. That means we can create our own custom post types and taxonomy. This will work similarly to the predefined. Because the WordPress hierarchy is designed like that it will manage everything automatically. The pages, post types, taxonomy will be called in the same manner. Today, in this post, I will show you to create the custom post types in WordPress.
Prerequisites
I will start with a new setup of WordPress. Hence, for the WordPress installation, you will have to ready with the following tools.
- PHP version >=7.3
- MySQL >=5.6 OR Maria DB >= 10.1
- Server – Apache/Nginx
- VS Code Editor (Optional)
If you are ready then good to go for this project.
Install WordPress in Localhost
Firstly, you will have to download the latest version of WordPress. Then extract it inside the xampp/htdocs folder. Now, hit the file path URL in the browser using the localhost.
It will initiate the installation by opening the installation dialog. Select the preferred language and continue the installation.
How to Create a Custom Taxonomy in WordPress
When you will move to the next dialog box, it will be showing you the database configuration wizard. Hence, you will have to create a database first. To create a database, open the phpMyAdmin. Then create a new database by giving a name.
Once, you have created the database, it will require the configuration.
I have entered the database name and the database user. The default password is blank. If you have set then you will require to enter here.
In the next step, you will have to run the installation.
The installation will move you to the next step. Here, you will have to enter the site detail like title and the username, password for the login.
Hence, fill up the detail and continue to the next step.
It will take a couple of minutes then you are ready to go. On the success of the installation, it will be showing you the the dialog box with success message.
Once the installation has completed, you can login to the dashboard with the username and password.
How to Use Contact Form 7 in WordPress Custom Template
Install Plugin For the Custom Post Types
Before installing the plugin, I have cleaned up the themes and plugins which are not necessary. Now, for creating the custom post types, I will be using the Toolset Types plugin. So, install and activate the plugin in WordPress.
After activating the plugin, you will find it inside the dashboard section.
Just click on it and you will have the Toolset Dashboard.
As you can see in the above dashboard, there are multiple features to create taxonomies, post types, archives, etc.
How to Create Custom Template in WordPress
Convert an HTML Template into WordPress
We will be listing the post types and posts on a template layout. So, before creating the post type, you will require to convert a HTML template into WordPress. Then on the basis of that layout, we will be creating the post types, taxonomies and all.
Firstly, create a template or you can use any open source template for this. I am using a free bootstrap 4 template.
Secondly, we will copy the assets files like CSS, js, and Images into the WordPress project folder inside the wp-content/themes/twentyseventeen. Here, the twenty seventeen is the currently active theme in our project.
Lastly, we will be creating the custom template file. So, to make it separate, I have created a folder named custom-template. Then inside this folder, I have created a template file named homepage-template.php.
How to Create a Custom Blog in WordPress
Create Header and Footer
In WordPress, we have the header.php and footer.php file. You will get these files inside the themes folder. Hence, according to our new template file, we will modify these two files here. From the new template, copy the header section into the header.php file as showing below.
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since Twenty Seventeen 1.0
* @version 1.0
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Agency - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri();?>/custom-template/assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="<?php echo get_template_directory_uri();?>/custom-template/css/styles.css" rel="stylesheet" />
</head>
<body id="page-top" <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/navbar-logo.svg" alt="" /></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ml-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Similarly, add the footer section content in the footer.php file.
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since Twenty Seventeen 1.0
* @version 1.2
*/
?>
<?php wp_footer(); ?>
<!-- Footer-->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-left">Copyright © Your Website 2020</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="col-lg-4 text-lg-right">
<a class="mr-3" href="#!">Privacy Policy</a>
<a href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals-->
<!-- Modal 1-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/01-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Threads</li>
<li>Category: Illustration</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/02-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Explore</li>
<li>Category: Graphic Design</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/03-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Finish</li>
<li>Category: Identity</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 4-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/04-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Lines</li>
<li>Category: Branding</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/05-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Southwest</li>
<li>Category: Website Design</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 6-->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/06-full.jpg" alt="" />
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<ul class="list-inline">
<li>Date: January 2020</li>
<li>Client: Window</li>
<li>Category: Photography</li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Contact form JS-->
<script src="<?php echo get_template_directory_uri();?>/custom-template/assets/mail/jqBootstrapValidation.js"></script>
<script src="<?php echo get_template_directory_uri();?>/custom-template/assets/mail/contact_me.js"></script>
<!-- Core theme JS-->
<script src="<?php echo get_template_directory_uri();?>/custom-template/js/scripts.js"></script>
</body>
</html>
Now, we have the header and footer file. So, for the index file, we have created the homepage-template.php file.
<?php
/*
* Template Name: Homepage
*
*/
get_header();
?>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-subheading">Welcome To Our Studio!</div>
<div class="masthead-heading text-uppercase">It's Nice To Meet You</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</header>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">E-Commerce</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Responsive Design</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Web Security</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/01-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Threads</div>
<div class="portfolio-caption-subheading text-muted">Illustration</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/02-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Explore</div>
<div class="portfolio-caption-subheading text-muted">Graphic Design</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/03-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Finish</div>
<div class="portfolio-caption-subheading text-muted">Identity</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/04-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Lines</div>
<div class="portfolio-caption-subheading text-muted">Branding</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/05-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Southwest</div>
<div class="portfolio-caption-subheading text-muted">Website Design</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/06-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Window</div>
<div class="portfolio-caption-subheading text-muted">Photography</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About-->
<section class="page-section" id="about">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/1.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2011</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/2.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/3.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2012</h4>
<h4 class="subheading">Transition to Full Service</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/4.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>
Be Part
<br />
Of Our
<br />
Story!
</h4>
</div>
</li>
</ul>
</div>
</section>
<!-- Team-->
<section class="page-section bg-light" id="team">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row">
<div class="col-lg-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/team/1.jpg" alt="" />
<h4>Kay Garland</h4>
<p class="text-muted">Lead Designer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/team/2.jpg" alt="" />
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/team/3.jpg" alt="" />
<h4>Diana Petersen</h4>
<p class="text-muted">Lead Developer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto text-center"><p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p></div>
</div>
</div>
</section>
<!-- Clients-->
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/envato.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/designmodo.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/themeforest.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/creative-market.jpg" alt="" /></a>
</div>
</div>
</div>
</div>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group mb-md-0">
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0">
<textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="text-center">
<div id="success"></div>
<button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
</div>
</form>
</div>
</section>
<?php
get_footer();
?>Finally, we have the header, footer and index file.
React Login and Registration App Using Laravel 7 API
Create a Page in WordPress
For calling the homepage template, we will require to set it as a template into the WordPress page. So, here, I am going to create a new page for the homepage.
In the next step, you will have to choose the template for this page. So, we have already created the template file. Hence, select the template in the page attribute section.
After that publish the page and open its url into the browser.
You will see the result as showing above. Now, we are ready to go with the custom post types for the above template.
Create a CRUD App in React.js Using Laravel 7 RESTful API
Create Custom Post Types
In the dashboard section, you will find the Toolset. Under the Toolset, click on the Post Types. You will have the following options.
Here in the above image, you can see there are the options to create post types for the media, pages as well as posts. So, we will be creating the post types for the Posts as per our layouts design.
At very first, as per our layout, we have the services section in which there are three posts. So, we can create a post type for services. Then under the post type, we will have the three posts. So, let’s create it, and then we will fetch it through the WordPress script.
Create Post Type For Services
Under the Toolset->Post Types click on Add New. Then you will have the below screen. Now, enter the name and description as showing below. Also, you can set the post type position available in the right side.
You can change the icon too. So, I skipped it as default and saved it. After that, you will see it on the menu at the left sidebar.
How to Implement Google Charts in Laravel 7
Create Post in Custom Post Types
For the service post type, we will be creating the posts. So, according to the template layout, we will require to create three posts here.
Create a new post like this. I am creating here the first post as an E-commerce and in the content section, I have added the dummy content.
Now, publish the post and you will have the first post inside the Services post type. Similarly, add two more posts here.
Fetch Custom Posts in WordPress
In the HTML part, I have removed two posts from the service section. Because, we will fetch it dynamically using the loop. So, I left one post to maintain the structure of the layout. Then I will display the content on it.
WordPress has the function to fetch the post using the WP_query() function. This function takes the parameter as an array. In the array, we will have to pass the post type, status, number of posts per page, etc.
<?php
$args = array(
'post_type' => 'service',
'post_status' => 'publish',
'posts_per_page' => 3,
'orderby' => 'title',
'order' => 'ASC',
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
the_title();
the_excerpt();
endwhile;
?>I have added the above function in the homepage-template.php to show you the content.
I have added a total of three posts in the service post type. Now, these all would be listed out here through the loop. So, just print the title and content at the same place in the HTML section.
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row text-center">
<?php
$args = array(
'post_type' => 'service',
'post_status' => 'publish',
'posts_per_page' => 3,
'orderby' => 'title',
'order' => 'ASC',
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3"><?php the_title(); ?> </h4>
<p class="text-muted"><?php the_excerpt(); ?> </p>
</div>
<?php endwhile; ?>
</div>
</div>
</section>
As a result, the posts are showing the title and the content. But the icons are static here. So, next, we will add the icons inside the post and will fetch here. But this is the font awesome icon. So, we will pass the icon name with the post in the custom fields.
How to Implement Google Charts in Laravel 7
Create Custom Fields For Custom Posts
The toolset allows us to create the custom fields along with the custom fields. The custom fields will be related to the custom posts. You can find it inside Toolset->Post Fields.
Enable Custom Field in Post Type
WordPress allows us to enable and disable the custom fields along with the post type. This functionality comes with the Toolset plugin. Here, you can enable the custom field, the custom field will be stored in the post meta.
Once, the custom field option is enabled, you can see it inside the custom post. Here in the screenshot you can see the custom field option is showing below. Now, pass the field name and value as passed here.
Do the same thing for all the custom post that you have created there. Then in the next step, we will be listing out these custom field along with the post.
Create a CRUD Application in Laravel 7
Get Meta Field in WordPress
To fetch the meta of post, WordPress provides the function get_post_meta(). This function takes parameter as post id. So, we will be passing this function inside the loop that is already executing.
get_post_meta(); while ( $query->have_posts() ) : $query->the_post();
$post_id = get_the_ID();
$custom_post = get_post_meta( $post_id );
echo "<pre>";
print_r($custom_post);
echo "</pre>";
endwhile; ?> As a result, you will have the array as showing below.
Now, at last, we will extract the icon_name from the array and will put it inside the icon class.
So, after adding these all functionalities the homepage-template.php snippet will become like this.
<?php
/*
* Template Name: Homepage
*
*/
get_header();
?>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-subheading">Welcome To Our Studio!</div>
<div class="masthead-heading text-uppercase">It's Nice To Meet You</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</header>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row text-center">
<?php
$args = array(
'post_type' => 'service',
'post_status' => 'publish',
'posts_per_page' => 3,
'orderby' => 'title',
'order' => 'ASC',
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
$post_id = get_the_ID();
$custom_fields = get_post_meta( $post_id );
?>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-stack-1x fa-inverse <?php echo $custom_fields['icon_name'][0];?> "></i>
</span>
<h4 class="my-3"><?php the_title(); ?> </h4>
<p class="text-muted"><?php the_excerpt(); ?> </p>
</div>
<?php
?>
<?php endwhile; ?>
</div>
</div>
</section>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/01-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Threads</div>
<div class="portfolio-caption-subheading text-muted">Illustration</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/02-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Explore</div>
<div class="portfolio-caption-subheading text-muted">Graphic Design</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/03-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Finish</div>
<div class="portfolio-caption-subheading text-muted">Identity</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/04-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Lines</div>
<div class="portfolio-caption-subheading text-muted">Branding</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/05-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Southwest</div>
<div class="portfolio-caption-subheading text-muted">Website Design</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/06-thumbnail.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Window</div>
<div class="portfolio-caption-subheading text-muted">Photography</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About-->
<section class="page-section" id="about">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/1.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2011</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/2.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/3.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2012</h4>
<h4 class="subheading">Transition to Full Service</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/about/4.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>
Be Part
<br />
Of Our
<br />
Story!
</h4>
</div>
</li>
</ul>
</div>
</section>
<!-- Team-->
<section class="page-section bg-light" id="team">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<div class="row">
<div class="col-lg-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/team/1.jpg" alt="" />
<h4>Kay Garland</h4>
<p class="text-muted">Lead Designer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/team/2.jpg" alt="" />
<h4>Larry Parker</h4>
<p class="text-muted">Lead Marketer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="team-member">
<img class="mx-auto rounded-circle" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/team/3.jpg" alt="" />
<h4>Diana Petersen</h4>
<p class="text-muted">Lead Developer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto text-center"><p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p></div>
</div>
</div>
</section>
<!-- Clients-->
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/envato.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/designmodo.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/themeforest.jpg" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/logos/creative-market.jpg" alt="" /></a>
</div>
</div>
</div>
</div>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<form id="contactForm" name="sentMessage" novalidate="novalidate">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" type="text" placeholder="Your Name *" required="required" data-validation-required-message="Please enter your name." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" id="email" type="email" placeholder="Your Email *" required="required" data-validation-required-message="Please enter your email address." />
<p class="help-block text-danger"></p>
</div>
<div class="form-group mb-md-0">
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required="required" data-validation-required-message="Please enter your phone number." />
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0">
<textarea class="form-control" id="message" placeholder="Your Message *" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="text-center">
<div id="success"></div>
<button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Send Message</button>
</div>
</form>
</div>
</section>
<?php
get_footer();
?>Conclusion
We have learned to create custom post types, custom posts, and custom fields. As we have seen the custom post types take an argument of an array in which we have to define the post type name. This is a demonstration to show you the basic idea. You can implement it further as per your requirement. In this post, we have left the WordPress Taxonomy. I will cover it in the next WordPress post. So, stay connected with us. Thank you.
Leave a Reply