This series is about how to create and develop a WordPress blog theme in 2021 using the correct methods and techniques.
Part 3 is including the settings values, The WordPress loop and pagination. Part 2 was 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.
Settings
Incorporating the WordPress blog settings such as name, description and URL is done with the function get_bloginfo().
There are many parameters you can set to output what has been stated in the settings.
Under Settings/General:
For site title it is get_bloginfo('name'); this will output “My first theme”.
The new header.php
<!DOCTYPE html>
<html lang='<?php echo get_bloginfo('langauge'); ?>'>
<head>
<meta charset='<?php echo get_bloginfo('charset'); ?>'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta name='description' content='<?php echo get_bloginfo('description'); ?>'>
<meta name='author' content='<?php echo get_the_author_meta('display_name'); ?>'>
<title><?php echo get_bloginfo('name'); ?></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='<?php echo get_bloginfo("wpurl"); ?>'><?php echo get_bloginfo("name"); ?></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='<?php echo get_bloginfo("wpurl"); ?>'>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>
Fetching posts; The loop
Now for the homepage to fetch the latest posts. This is done with the WordPress loop. The loop has the process of “when there are posts, loop through the posts and display the posts”.
This is the loop:
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;Put this into your index.php
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
Create several more dummy blog posts and check 127.0.0.1/firstheme
It will now be listing the posts.
Pagination
Pagination is giving access to view the next or previous set of data, in this case it is posts, their title and URL. The main key to pagination is:
- The first page cannot have a previous/back method
- The last page must not have a next method (there is no more to view).
Homepage posts pagination is done firstly with a check for the previous or next posts link, if it exists then output the button to go in that direction.
Using previous_posts() and next_posts()1,2 returns the URL for the respective page change. This means you can use that URL in a link or button. Having the parameter as false just means this URL isn’t echoed rather stored in the variable.
<?php
if (get_previous_posts_link()) :
$link = previous_posts(false);
echo "<a class='btn btn-primary float-left' href='" . $link . "'>Newer Posts</a>";
endif;
if (get_next_posts_link()) :
$link = next_posts(0, false);
echo "<a class='btn btn-primary float-right' href='" . $link . "'>Older Posts</a>";
endif;Put this in the page section of index.php
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
<div class="clearfix">
<?php
if (get_previous_posts_link()) :
$link = previous_posts(false);
echo "<a class='btn btn-primary float-left' href='" . $link . "'>Newer Posts</a>";
endif;
if (get_next_posts_link()) :
$link = next_posts(0, false);
echo "<a class='btn btn-primary float-right' href='" . $link . "'>Older Posts</a>";
endif;
?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
A hint to better test the pagination is to change the posts shown per page in the settings to a low value such as 3.
