In WordPress, you can create your own custom template. This custom template can be used as the main template inside your pre-installed theme. The architecture of WordPress is very easy to understand. WordPress allows us to customize any pre-built theme or by using any theme you can create any custom template page. As I had shown you in my previous WordPress post, we had already learned to convert the HTML template into WordPress. So, in this post, I will be showing you how you can create your own WordPress custom template. if you are an absolute beginner in WordPress then I recommend you to go through my previous post first. So, that you will have much understanding of WordPress themes and it’s customization.
Prerequisites
Before continuing to this WordPress post, your system must be ready with the below tools.
- PHP version >=7.3
- MySQL >=5.6 OR Maria DB >= 10.1
- Server – Apache/Nginx
- VS Code Editor (Optional)
You can use any editor as per your usability.
WordPress Custom Template
I am assuming you have a fresh WordPress setup and configured in your system. If you don’t know how to install WordPress in the localhost then please go to the WordPress installation post. So, I have an already setup of WordPress in which, I will be creating the custom template for WordPress.
But before moving to the custom template, let’s dive into the themes and templates in WordPress. So, here I have the default template which is installed with WordPress installation. You can select any other theme inside the WordPress dashboard by navigating Appearance->Themes.
Here, I have run my application and the default theme is showing below.
RESTful APIs in Laravel 6 with Passport Authentication
In the Dashboard section under the Appearance->Themes, you will see the default activated theme. You can delete the rest themes from the theme section. So, that we’ll have only one theme activated in the theme list. Inside that particular theme, I will be creating a custom template.
WordPress File Structure
Open the project inside the VS code editor or any other that you like most. Now, we’ll understand some basic architecture of WordPress. So, you will be aware of the file structure of WordPress.
How to Upload Multiple Images in Laravel 6 with Validation
- Inside WordPress, the first folder is wp-admin. This file is related to the admin dashboard, in which you are already logged in. All the files related to the admin dashboard will be residing inside this folder.
- wp-content – This folder contains the front-end related files, themes, and plugins. You can find the installed themes and plugins here.
I will be moving to the plugins in the upcoming posts. So, for this post, let’s move to the themes section.
WordPress Themes
Inside the wp-content navigate to the themes folder. The default active theme is twentytwenty here. Inside this theme, you can see the files like assets (CSS, js, and images), header, footer, and other required files.
How to Resize Image in Laravel 6 Before Upload
WordPress themes contain the header, footer, sidebar, widgets, post single, taxonomy, archive, and several other files. These all are the necessary file on which WordPress platform works. We’ll see all these in our upcoming sections.
Create a Custom Template in WordPress
Inside the theme folder (twentytwenty) just create a new folder. I have created the folder with the name custom-template.
Now, create a new file inside the folder. In my case, the file name is blog-template.php. Now paste the below code which has paired in the comment.
<?php
/**
* Template Name: Blog
* Template Post Type: post, page
*
*/
?>In the above snippet, I have defined the template name and post type. WordPress will understand this commented code to a theme. Because it is defined as Template Name. Similarly, this custom template can be used for the post and page.
How to Use AJAX in Laravel 6 with ToDo Application
Assign Custom Template Design Post/Page
At this time, I haven’t designed the custom template. Before designing the layout, I want to show the template selection from the post/page section. So, just move to the dashboard section. Now, inside the Posts section, just create a new post or simply open the default post titled Hello World.
On the right side at the bottom section, you will see the Post Attribute feature. This is available in the post. If you will open the page or will create any new page, then you will see the Page Attribute there.
Now, when you click on the Post Attribute->Templates then inside the dropdown list, you will see the Blog template that we have created above.
Now, select it to default template for the blog post.
How to Upload Files and Images in Laravel 6 with Validation
Now, publish the post and just open it in the browser. As a result, you will see a blank post.
This is happening actually, we haven’t data in our custom template. That’s why it is showing a blank post. No matter, what content the post has. It will depend upon only the template that has assigned.
Create Homepage Template Using Custom Template
Hence, I am going to create a template for the homepage. Then I will make it the default page for home. So, just proceed further.
Therefore, first of all, download a free bootstrap template if you don’t want to create your own template. Paste the CSS, js and images files inside the themes->twentytwenty->assets folder. Now, navigate to wp-content->themes->twentytwenty->header.php and paste the below code there.
<?php
/**
* Header file for the Twenty Twenty WordPress default theme.
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
?><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<title>My WordPress Demo Website </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="<?php echo get_template_directory_uri();?>/my-template/img/favicon.png" rel="icon">
<link href="<?php echo get_template_directory_uri();?>/my-template/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,700|Roboto:300,400,700&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/line-awesome/css/line-awesome.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/aos/aos.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="<?php echo get_template_directory_uri();?>/my-template/css/style.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body>
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icofont-close js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-lg-4">
<h1 class="mb-0 site-logo"><a href="<?php echo site_url();?>" class="mb-0">My Blog</a></h1>
</div>
<div class="col-12 col-md-8 d-none d-lg-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li class="active"><a href="<?php echo site_url();?> " class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Features</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<li class="has-children">
<a href="#" class="nav-link">Blog</a>
<ul class="dropdown">
<li><a href="#" class="nav-link">Blog</a></li>
<li><a href="#" class="nav-link">Blog Sigle</a></li>
</ul>
</li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-lg-none ml-md-0 py-3" style="position: relative; top: 3px;">
<a href="#" class="burger site-menu-toggle js-menu-toggle" data-toggle="collapse"
data-target="#main-navbar">
<span></span>
</a>
</div>
</div>
</div>
</header>Similarly, in the footer.php file paste the code of the footer section.
<?php
/**
* The template for displaying the footer
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
?>
<footer class="footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 mb-md-0">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam
dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi.</p>
<p class="social">
<a href="#"><span class="icofont-twitter"></span></a>
<a href="#"><span class="icofont-facebook"></span></a>
<a href="#"><span class="icofont-dribbble"></span></a>
<a href="#"><span class="icofont-behance"></span></a>
</p>
</div>
<div class="col-md-7 ml-auto">
<div class="row site-section pt-0">
<div class="col-md-4 mb-4 mb-md-0">
<h3>Navigation</h3>
<ul class="list-unstyled">
<li><a href="#">Pricing</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<h3>Services</h3>
<ul class="list-unstyled">
<li><a href="#">Team</a></li>
<li><a href="#">Collaboration</a></li>
<li><a href="#">Todos</a></li>
<li><a href="#">Events</a></li>
</ul>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<h3>Downloads</h3>
<ul class="list-unstyled">
<li><a href="#">Get from the App Store</a></li>
<li><a href="#">Get from the Play Store</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-7">
<p class="copyright">© Copyright Programming Fields. All Rights Reserved</p>
<div class="credits">
</div>
</div>
</div>
</div>
</footer>
</div> <!-- .site-wrap -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/jquery/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/jquery/jquery-migrate.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/easing/easing.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/php-email-form/validate.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/sticky/sticky.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/aos/aos.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Main JS File -->
<script src="<?php echo get_template_directory_uri();?> /my-template/js/main.js"></script>
<?php wp_footer(); ?>
</body>
</html>Now, we have the header and footer Hence, now we need the main content, so for that, we will create a custom template file. Therefore, inside the custom-template folder create a new file. Put the name homepage.php. Enter the template name and the main content snippet as showing below.
<?php
/**
* Template Name: Homepage
*
*/
?>
<main id="main">
<div class="hero-section">
<div class="wave">
<svg width="100%" height="355px" viewBox="0 0 1920 355" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
<path
d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,757 L1017.15166,757 L0,757 L0,439.134243 Z"
id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12 hero-text-image">
<div class="row">
<div class="col-lg-7 text-center text-lg-left">
<h1 data-aos="fade-right">Promote Your App with SoftLand</h1>
<p class="mb-5" data-aos="fade-right" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</p>
<p data-aos="fade-right" data-aos-delay="200" data-aos-offset="-500"><a href="#"
class="btn btn-outline-white">Get started</a></p>
</div>
<div class="col-lg-5 iphone-wrap">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/phone_1.png" alt="Image" class="phone-1" data-aos="fade-right">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/phone_2.png" alt="Image" class="phone-2" data-aos="fade-right" data-aos-delay="200">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5" data-aos="fade-up">
<h2 class="section-heading">Save your time to using SoftLand</h2>
</div>
</div>
<div class="row">
<div class="col-md-4" data-aos="fade-up" data-aos-delay="">
<div class="feature-1 text-center">
<div class="wrap-icon icon-1">
<span class="icon la la-users"></span>
</div>
<h3 class="mb-3">Explore Your Team</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
<div class="feature-1 text-center">
<div class="wrap-icon icon-1">
<span class="icon la la-toggle-off"></span>
</div>
<h3 class="mb-3">Digital Whiteboard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<div class="feature-1 text-center">
<div class="wrap-icon icon-1">
<span class="icon la la-umbrella"></span>
</div>
<h3 class="mb-3">Design To Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5" data-aos="fade">
<div class="col-md-6 mb-5">
<img src="<?php echo get_template_directory_uri(); ?>/my-template/img/undraw_svg_1.svg" alt="Image" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="step">
<span class="number">01</span>
<h3>Sign Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4">
<div class="step">
<span class="number">02</span>
<h3>Create Profile</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4">
<div class="step">
<span class="number">03</span>
<h3>Enjoy the app</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section pb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 mr-auto">
<h2 class="mb-4">Seamlessly Communicate</h2>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur at reprehenderit optio,
laudantium eius quod, eum maxime molestiae porro omnis. Dolores aspernatur delectus impedit incidunt
dolore mollitia esse natus beatae.</p>
<p><a href="#">Download Now</a></p>
</div>
<div class="col-md-6" data-aos="fade-left">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/undraw_svg_2.svg" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 ml-auto order-2">
<h2 class="mb-4">Gather Feedback</h2>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur at reprehenderit optio,
laudantium eius quod, eum maxime molestiae porro omnis. Dolores aspernatur delectus impedit incidunt
dolore mollitia esse natus beatae.</p>
<p><a href="#">Download Now</a></p>
</div>
<div class="col-md-6" data-aos="fade-right">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/undraw_svg_3.svg" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section border-top border-bottom">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-4">
<h2 class="section-heading">Review From Our Users</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-7">
<div class="owl-carousel testimonial-carousel">
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Excellent App!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam
aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,
provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/person_1.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Doe</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>This App is easy to use!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam
aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,
provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/person_2.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Johan Smith</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Awesome functionality!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam
aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,
provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/person_3.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Thunberg</span>, — App User
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section cta-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 mr-auto text-center text-md-left mb-5 mb-md-0">
<h2>Starts Publishing Your Apps</h2>
</div>
<div class="col-md-5 text-center text-md-right">
<p><a href="#" class="btn"><span class="icofont-brand-apple mr-3"></span>App store</a> <a href="#"
class="btn"><span class="icofont-ui-play mr-3"></span>Google play</a></p>
</div>
</div>
</div>
</div>
</main>
<?php
get_footer();
?>
Laravel 6 CRUD Application For Beginners
Create a Blank Page in WordPress
Once, you are done with the above steps, now, simply create a blank page in the WordPress dashboard section. This page will be assigned to the WordPress custom template that we have created in the above step. Inside the page attributes, you will see the template name. So, just select the Homepage template from the list.
Then publish the page. Now, you have the homepage with WordPress custom template design. To see the result, just open it in the browser.
In my case, this is the URL.
http://localhost/wordpress/wordpress-custom-template/homepage/
In the above result, you can see the WordPress custom template design has been called to the homepage. But one more thing to notice here, in every anchor tag there is a default underline. This is actually happening with the CSS. Actually, the problem is the default WordPress theme that we are using to create a custom template has somewhere linked with its own CSS file. So, sometimes it overlaps both the CSS (custom template CSS and theme CSS). Hence, we have to unlink the default CSS of WordPress theme.
How to Implement Google Autocomplete Address in Laravel 6
Unlink CSS of Default WordPress Themes
To break the link of default CSS and JS file in the WordPress theme, just navigate to the functions.php file inside the theme folder.
You will have the entire code of that particular theme which is installed. Simply find out the wp_enqueue_style(). The function is used to call the CSS file inside the theme. So, we don’t need the default CSS if we are creating the custom template in the WordPress themes. See the result.
How to Implement Pagination in Laravel 6 with Example
Now, comment or delete the line there. Here is the snippet after commenting the wp_enqueue_style().
function twentytwenty_register_styles() {
$theme_version = wp_get_theme()->get( 'Version' );
// wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );
wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
// Add output of Customizer settings as inline style.
wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
// Add print CSS.
// wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );
}Now, save and refresh the homepage which is already running in your browser. In the below result, you can see the template page is showing perfectly. Now, in the anchor tags, there is no underline property of the CSS.
Make Homepage to Custom Page
In the URL you have noticed that after the project directory name the page name is showing.
http://localhost/wordpress/wordpress-custom-template/homepage/We will have to remove the page name for the homepage. Actually, the homepage will be the index page for this WordPress project. So, we will have to make it the default index page. For this, you will have to navigate to the Settings->Reading.
You will see an option for Your homepage displays. The default is the latest posts. If you are creating a blog then it is perfect to make all the latest posts on the homepage. But what, if you are creating any informative website or custom website apart from the blog. Or in some cases of the blog, if you don’t want to show the blog page to the homepage then, in that case, you will have to create a separate page.
So, in the settings, just click on A static page for the homepage. Then from the dropdown list, just select the page that you want to make the Homepage. Hence, we have only a single page that we have created here. So, just make it to the homepage. Then save the settings open the website.
http://localhost/wordpress/wordpress-custom-template/Now, the homepage can be called without giving the page name. Because now, it is our index page of the website. Hence, the index page doesn’t require the name it self.
Drag and Drop File Upload in Laravel 6 Using Dropzone js
Conclusion
Through this post, I have tried to make a clear understanding of the WordPress themes, WordPress file structures, WordPress Custom template. We have learned how to integrate the HTML template to WordPress. Also, we have learned to create the WordPress custom template. In the custom template, we have put the custom CSS and JS for making it more pretty as per the themes. So, I hope guys you will understand the basic idea behind creating any basic WordPress website with your own custom template. If you will have any queries regarding this post then kindly share your query by putting a comment in the comment section. In the next post, we’ll be learning how to create a custom blog in WordPress. So stay updated with us.
I am trying to find out if weather its possible to upload a Child Theme without a WP business account? My Child Theme doesn’t show in the Dashboard and I can’t find the error in my style.css and functions.php. Very greatful for help and advice/Emma
Have you created any custom child theme or using any third parties?
For using the Child theme it doesn’t require any kind of business account. It seems there could be the issue of WordPress file permission.