This series is about how to create and develop a WordPress blog theme in 2021 using the correct methods and techniques.
This Part 2 is splitting the theme into different sections as well as theme naming and details. Part 1 was the installing and setup of WordPress and base theme.
For this guide you will need a local webserver with PHP and MySQL, I will be using XAMPP and HeidiSQL for this series.
Dividing the page
WordPress themes are split up into page components to make the organisation and layout sharper. Instead of everything under the one file (index.php) it can be split up as a header, content, post, menu/sidebar and footer.
Dividing the theme up is done with the WordPress hook functions, these “fire” the action when called.
Breaking it down
For this example, index.php will be divided out into header.php and footer.php. A mock blog post will be made as content.php.
wp_head() before the closing head tag for the header file.
header.php
<!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>Bootstrap WordPress blog template</title>
<!-- Bootstrap core CSS -->
<link href="https://write.corbpie.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet'
type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Bootstrap blog</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"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Bootstrap Blog</h1>
<span class="subheading">A very simple Blog Theme</span>
</div>
</div>
</div>
</div>
</header>For the footer file, wp_footer() action is called just before the closing body tag.
footer.php
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<p class="copyright text-muted">Copyright © Your Website <?php echo date("Y"); ?></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://write.corbpie.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://write.corbpie.com/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>The content (sample blog post) HTML is from here, rename this as content.php
Putting it back together
Your index.php file will now be this:
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<?php get_template_part('content', get_post_format()); ?>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>get_header() and get_footer() functions retrieve header.php and footer.php respectively. Whilst get_template_part('content', get_post_format())gets content.php and its “slug” which is irrelevant right now.
As you can see pagination still needs modification away from bare HTML and implementation of the WordPress blog homepage method to fetch the post titles/links.
With this theme file splitting things should be in a more organised and easier to read manner.
Theme naming and details
If you want to publish or share your theme here are the basics of naming and detailing your theme. In a way this is the theme’s metadata, it states information about the theme like its name, author, description and tags.
You can open up a WordPress supplied default theme style.css (wp-content/themes/twentytwentyone/style.css) to see how it is done e.g
/* Theme Name: Twenty Twenty-One Theme URI: https://wordpress.org/themes/twentytwentyone/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog. Requires at least: 5.3 Tested up to: 5.6 Requires PHP: 5.6 Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyone Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready */
You can now do your own in wp-content/themes/sampletheme/style.css
/* Theme Name: Sample Theme Author: corbpie Author URI: https://corbpie.com/ Description: Sample theme is an introductory theme built from learning WordPress theme development. Requires at least: 5.3 Tested up to: 5.6 Requires PHP: 5.6 Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sampleTheme Tags: one-column, accessibility-ready, custom-colors */
Theme screenshot/thumbnail
To have a screenshot or thumbnail for your theme you will need to create a screenshot from the themes page in your web browser. Crop it to size 1200 x 900, save it named as screenshot in either JPG or PNG format.
Put this screenshot.png or screenshot.jpg into the theme directory (same place as style.css).
This is just the basics to having your theme published, there are many guidelines and even testing done to your theme before it can be made public.
Part 3 will be pagination and settings.