WordPress provides a very easy way to set up any website or blog. Its customization is very easy than the other CMS (content management system). You must have created blogs in WordPress by simply installing the themes. In that approach, the installed theme has the functions. And you don’t need to code any single line. But, today, I will show you how to create a blog in WordPress using a custom theme. In this post, I will show you how you can fetch posts by using the WordPress function. Also, the posts archive page, and many more. This post will be very interesting to you. So, let’s start with a new setup of WordPress in your localhost.
Prerequisites
I am assuming you are ready with the below configuration for setting up a new WordPress in your localhost.
- PHP version >=7.3
- MySQL >=5.6 OR Maria DB >= 10.1
- Server – Apache/Nginx
- VS Code Editor (Optional)
Create a WordPress Blog
For creating a blog in WordPress, you must install WordPress in your localhost using XAMPP or WAMP. So, first of all, install WordPress in the localhost then come to this post.
Now, I am assuming you have installed WordPress in the localhost. Here, I have installed the WordPress and the default theme is looking like this.
Now, I will be placing a new HTML template inside the installed theme. Also, I will create the custom blog archive page, single post page. So, let’s do step by step.
How to Convert HTML Template to WordPress
Setup an HTML Template Inside the WordPress For Blog
Firstly, I will customize the header and footer of the default template. It means I will place the header and footer of the custom template that I will be using in this blog. Open the project in the VS Code editor. Now, moving to the template. So, the top navigation part will be pasted into the header.php section. You can find the header.php file inside the wp-content->themes->THEME_FOLDER.
<?php
/**
* The header for our theme
*
*/
?><!doctype html>
<html <?php language_attributes(); ?>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blog | Programming Fields</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link href="<?php echo get_template_directory_uri();?>/assets/img/favicon.png" rel="icon">
<link href="<?php echo get_template_directory_uri();?>/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/assets/vendor/line-awesome/css/line-awesome.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/assets/vendor/aos/aos.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/assets/vendor/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/assets/css/style.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- <div id="page" class="site"> -->
<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">Programming Fields</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><a href="index.html" class="nav-link">Home</a></li>
<li><a href="features.html" class="nav-link">Features</a></li>
<li class="active"><a href="pricing.html" class="nav-link">Pricing</a></li>
<li class="has-children active">
<a href="blog.html" class="nav-link">Blog</a>
<ul class="dropdown">
<li><a href="blog.html" class="nav-link active">Blog</a></li>
<li><a href="blog-single.html" class="nav-link">Blog Sigle</a></li>
</ul>
</li>
<li><a href="contact.html" 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, for the bottom navigations and footer areas content will be moved inside the footer.php as showing below.
<?php
/**
* The template for displaying the footer
*
*
*/
?>
<footer class="footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 mb-md-0">
<h3>About Me</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">All Rights Reserved</p>
<div class="credits">
Designed by <a href="https://programmingfields.com">Programming Fields</a>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Vendor JS Files -->
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/jquery/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/jquery/jquery-migrate.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/easing/easing.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/php-email-form/validate.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/sticky/sticky.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/aos/aos.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/vendor/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Main JS File -->
<script src="<?php echo get_template_directory_uri();?>/assets/js/main.js"></script>
<?php wp_footer(); ?>
</body>
</html>
After the above codes, the website is looking like this. Here, the header and footer section as included. Now, we’ll have to work for the content area.
Hence, in the next step, we’ll have to create a custom template page for the blog posts. That means the page will have the latest post lists. Hence for that purpose, I will create a template page and on that page, I will include the header and footer file.
How to Create a Custom Template in WordPress
Create a Custom Template For Blog
For creating a custom template page in WordPress, just create a separate folder as shown below. Here, inside the custom-template folder, I have created a new file named blog.php.
After that, I will create a template file. Then in the template file, I will create a layout for the blog posts.
<?php
/*
* Template Name: Blog
*
*/
get_header();
?>
<main id="main">
<div class="hero-section inner-page">
<div class="wave">
<svg width="1920px" height="265px" viewBox="0 0 1920 265" 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,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-md-7 text-center hero-text">
<h1 data-aos="fade-up" data-aos-delay="">Blog Posts</h1>
<p class="mb-5" data-aos="fade-up" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section">
<div class="container">
<div class="row mb-5">
<div class="col-md-4">
<div class="post-entry">
<a href="blog-single.html" class="d-block mb-4">
<img src="<?php echo get_template_directory_uri();?>/assets/img/img_1.jpg" alt="Image" class="img-fluid">
</a>
<div class="post-text">
<span class="post-meta">December 13, 2019 • By <a href="#">Admin</a></span>
<h3><a href="#">Chrome now alerts you when someone steals your password</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
<p><a href="#" class="readmore">Read more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="post-entry">
<a href="blog-single.html" class="d-block mb-4">
<img src="<?php echo get_template_directory_uri();?>/assets/img/img_2.jpg" alt="Image" class="img-fluid">
</a>
<div class="post-text">
<span class="post-meta">December 13, 2019 • By <a href="#">Admin</a></span>
<h3><a href="#">Chrome now alerts you when someone steals your password</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
<p><a href="#" class="readmore">Read more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="post-entry">
<a href="blog-single.html" class="d-block mb-4">
<img src="<?php echo get_template_directory_uri();?>/assets/img/img_3.jpg" alt="Image" class="img-fluid">
</a>
<div class="post-text">
<span class="post-meta">December 13, 2019 • By <a href="#">Admin</a></span>
<h3><a href="#">Chrome now alerts you when someone steals your password</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
<p><a href="#" class="readmore">Read more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="post-entry">
<a href="blog-single.html" class="d-block mb-4">
<img src="<?php echo get_template_directory_uri();?>/assets/img/img_4.jpg" alt="Image" class="img-fluid">
</a>
<div class="post-text">
<span class="post-meta">December 13, 2019 • By <a href="#">Admin</a></span>
<h3><a href="#">Chrome now alerts you when someone steals your password</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
<p><a href="#" class="readmore">Read more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="post-entry">
<a href="blog-single.html" class="d-block mb-4">
<img src="<?php echo get_template_directory_uri();?>/assets/img/img_3.jpg" alt="Image" class="img-fluid">
</a>
<div class="post-text">
<span class="post-meta">December 13, 2019 • By <a href="#">Admin</a></span>
<h3><a href="#">Chrome now alerts you when someone steals your password</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
<p><a href="#" class="readmore">Read more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="post-entry">
<a href="blog-single.html" class="d-block mb-4">
<img src="<?php echo get_template_directory_uri();?>/assets/img/img_2.jpg" alt="Image" class="img-fluid">
</a>
<div class="post-text">
<span class="post-meta">December 13, 2019 • By <a href="#">Admin</a></span>
<h3><a href="#">Chrome now alerts you when someone steals your password</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
<p><a href="#" class="readmore">Read more</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<span class="p-3 active text-primary">1</span>
<a href="#" class="p-3">2</a>
<a href="#" class="p-3">3</a>
<a href="#" class="p-3">4</a>
</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();
?>Once, you have done with the above steps, now create a new page through the Dashboard. Hence, navigate to Pages->Add New. Give a name and choose the Templates for this page by Page Attributes option.
After publishing the page, you can visit the published page. Currently, the blog page URL is like this. Here, you can see in the URL after the project folder the page name has been added. So, we have to remove this. Actually, we have created a Blog, that’s why I am going to make it the homepage. So that it can be accessed without giving the page name.
http://localhost/wordpress/blog/blog
Find Nearest Location By Latitude and Longitude in Laravel 6
Set Homepage in WordPress
To set a default page for the homepage in WordPress, just go to the Settings–>Reading. In the Reading settings, you will have the option to set the default page for the Homepage. So, simply select the Blog page for the homepage.
Now, save the settings and it is done.
In the next step, we’ll make the blog post to dynamic. Currently, the posts on the Homepage are static. So, let’s do it according to the template page.
Add New Blog Posts in WordPress
Firstly, add some dummy posts in the Posts->Add New. Also, add the featured image as showing below.
Then publish the post. Similarly, add some more dummy posts so that we can fetch it on the Blog page.
How to Fetch Blog Posts in Blog Page
In the blog.php, I have modified the HTML element. Actually, the posts will be retrieved using the loop statement. So inside the loop, we can iterate the HTML element also. So, we need only one div element which contains the blog post. Then that div element will be iterated multiple times as per the number of posts.
WordPress provides the predefined functions for retrieving the posts from the database. So, we will use the below function. Here is the syntax.
$posts = new WP_Query( array(
'posts_per_page' => 3,
) );
if ( $posts->have_posts() ) :
while ( $posts->have_posts() ) : $posts->the_post();
the_post_thumbnail('size of thumbnail');
the_title(); // post title
the_content(); // post content
endwhile;
endif; ?>In the above syntax, the WP_Query() function generates the query for retrieving the posts from the post table. Also, we can check if the category or table has the posts or not. Inside the loop, it will print the title, content, permalink, images, meta fields and many more. So, let’s implement it into our blog page.
<?php
/*
* Template Name: Blog
*
*/
get_header();
?>
<main id="main">
<div class="hero-section inner-page">
<div class="wave">
<svg width="1920px" height="265px" viewBox="0 0 1920 265" 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,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-md-7 text-center hero-text">
<h1 data-aos="fade-up" data-aos-delay="">Blog</h1>
<p class="mb-5" data-aos="fade-up" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section">
<div class="container">
<div class="row mb-5">
<?php
$posts = new WP_Query( array(
'posts_per_page' => 3,
) );
if ( $posts->have_posts() ) :
while ( $posts->have_posts() ) : $posts->the_post(); ?>
<div class="col-md-4">
<div class="post-entry">
<a href="<?php the_permalink();?>" class="d-block mb-4">
<div class="featured-img-section" style="height: 200px;">
<?php the_post_thumbnail('medium');?>
</div>
</a>
<div class="post-text">
<span class="post-meta">December 13, 2019 • By <a href="javascript:void();">Admin</a></span>
<h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
<p><?php echo wp_trim_words( get_the_content(), 30, ' [...] ');?></p>
<p><a href="<?php the_permalink();?>" class="readmore">Read more</a></p>
</div>
</div>
</div>
<?php
endwhile;
endif; ?>
</div>
<div class="row">
<div class="col-12 text-center">
<span class="p-3 active text-primary">1</span>
<a href="#" class="p-3">2</a>
<a href="#" class="p-3">3</a>
<a href="#" class="p-3">4</a>
</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();
?>Save and run the project to see the result.
How to Implement Google Autocomplete Address in Laravel 6
You can see the posts are displaying with the featured image. This is the post listing page in which the post with short content will be displayed. But what about the detailed post?
In the next step, we’ll have to create a detail page for the post. So the post content can be shown there. WordPress architecture calls all the detail posts on the single.php file. This is a predefined hierarchy of WordPress.
Create Single Post Page in WordPress
Inside the current theme folder, you can see a file named single.php. This is the file that is categorized as a predefined hierarchy of WordPress. If the theme hasn’t the single.php file then you can create it.
After that specify the post detail layout inside this file.
<?php
/**
* The template for displaying all single posts
*
*/
get_header();
global $post;
?>
<main id="main">
<div class="hero-section inner-page">
<div class="wave">
<svg width="1920px" height="265px" viewBox="0 0 1920 265" 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,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-md-10 text-center hero-text">
<h1 data-aos="fade-up" data-aos-delay=""><?php echo $post->post_title;?></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="site-section">
<div class="container">
<div class="row">
<div class="col-md-8 blog-content">
<p class="lead mb-5"><?php echo $post->post_content; ?></p>
</div>
</main>
<?php
get_footer();
Conclusion
We have learned to create a basic blog on WordPress. This was a basic demonstration for creating any dynamic blog inside WordPress. Here, we have created own custom page and template to fetch the post using WordPress Query. Also, we have created a detail page (post single page) and changed the template according to our requirement. Similarly, we have fetched the featured image (thumbnail image) for the blog post. So, I hope these things will be easy to understand for you. But, if you stuck in the above steps then please let me know without any hesitation. In the upcoming post, we will be learning the custom sidebar page, comment section, contact form and many more.
Leave a Reply