We’re going to make a WordPress site from scratch. And, yes, it’s free and above all we will write the code.
Above all, to make it happen, we need to have a basic knowledge of PHP, HTML and CSS. Because we have planned to make our WordPress site by coding.
Therefore, this knowledge becomes necessary, particularly in this article.
However, if you don’t know any of these, that also doesn’t hold from reading this article. As I’ll explain things in a simple way.
Moreover, if you have already read our articles on basic WordPress coding, it will help you.
As we know any WordPress theme starts with two files. The first one is a CSS file and by naming convention it should be “style.css”.
On the other hand, another mandatory file is a PHP file. The “index.php”.
However, we cannot make a complete WordPress site with only two files. The other necessary files include all PHP files.
- header
- footer
- content
- front-page
- page
- single
- archive
To start with we need first four pages. At present, let’s forget the last three pages. But later we’ll definitely add them, as we progress.
Let us take a look at the header PHP file. Although the code is not complete. For full code please visit the respective GitHub repository.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to PHP 8 and Flutter tutorials</title>
<?php wp_head( ); ?>
<link rel="stylesheet"
href="<?php bloginfo( 'template_url' ); ?>/style.css"
/>
</head>
<body>
<!-- NAVBAR-->
<nav class="navbar navbar-expand-lg py-3 navbar-dark bg-dark shadow-sm">
<div class="container">
....As we have added the header PHP file, it looks like the following image:
However, in original theme, the content part looks different. We’ll see that in a minute.
How do I make a WordPress site from scratch free?
We’re building this WordPress site from scratch and it’s free. Because in style CSS file, we used free Bootstrap styling.
/*
Theme Name: WordPress Coding
Author: Anonymous
*/
/*-------------------------------------------------------------------*/
/* === Import Bootstrap functions and variables === */
/*-------------------------------------------------------------------*/
/* === Import template variables === */
/*-------------------------------------------------------------------*/
/* === Boostrap Main SCSS === */
/*!
* Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #5e50f9;
--indigo: #6610f2;
--purple: #6a008a;
...With reference to this Bootstrap theme, we have downloaded it free.
Now the content PHP file holds the body section.
<div class="container py-5">
<!-- First Row [Statistics]-->
<h2 class="font-weight-bold mb-2">Latest Posts</h2>
<p class="font-italic text-muted mb-4">Get Latest Posts from all Categories.</p>
<div class="row pb-5">
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
<!-- Card-->
<div class="card rounded shadow-sm border-0">
...And with the original theme it looks like this:
And the footer section also have its own unique look like the following image.
However, we want our WordPress posts should appear on the front page body section.
To do that, we can use a special WordPress function.
<!-- Card-->
<div class="card rounded shadow-sm border-0">
<?php
$worldPosts = new WP_Query(array(
'posts_per_page' => 1,
'category_name' => 'Flutter'
));
while ($worldPosts->have_posts()) {
$worldPosts->the_post(); ?>
...The special feature of WordPress Wp_Query() method lets us allow to pass the category name and it also permits to restrict the number of posts.
In each Card, which represents the row, we call one category and the latest post appears on the body section now.
In Dashboard add new categories section we’ve added four categories.
Flutter, WordPress, PHP and Dart.
And after that we’ve also added two posts to each category.
For that reason, in the body section our latest posts start appearing.
Certainly, we can make it look much better. And that’s possible.
To that we have added a front-page PHP file so the Home page looks like this.
<?php get_header( ); ?>
<?php get_template_part( 'content' ); ?>
<?php
get_footer( );
?>We have written about get template part function of WordPress earlier.
However, we want to make the blog post look a little different. Subsequently, we change the index PHP file to this:
<?php get_header( ); ?>
<h1>
This is Blog Page.
</h1>
<?php
get_footer( );
?>As a result when we try to see the Blog posts it looks different than the front page.
Now in the blog page no longer the posts are appearing.
Instead of that, it shows a simple heading.
Does WordPress website require coding?
As we can see, coding WordPress website from scratch is not difficult. Although, for the beginners who has no idea of PHP programming, it does not require coding.
But being said that, we can also assure that we cannot make our WordPress website look like as we want to make it look.
In the next article we’ll try to develop the index PHP file so the blog page looks different and also it shows all blog posts with a nice pagination.
Leave a Reply