Creating a WordPress theme from scratch

1. Basic information

Before getting stuck into the build process, it’s important to know how WordPress themes work. If you’ve looked at any prebuilt theme, you’ll notice that it’s all contained in a folder, and there’s around 12 core files. Some themes, including the Default WordPress theme, include more files which allow extra customisation, but aren’t mandatory additions. Here’s an overview of the main files you’ll be working with:

style.css – All the styling for your theme goes here.
index.php – The core file that loads your theme, also acts as the homepage (unless you set your blog to display a static page).

header.php – Contains everything you’d want to appear at the top of your site.
sidebar.php – Contains everything you’d want to appear in a sidebar.
footer.php – Contains everything you’d want to appear at the bottom of your site.
archive.php – The template file used when viewing categories, dates, posts by author, etc.
single.php – The template file that’s used when viewing an individual post.
comments.php – Called at the bottom of the single.php file to enable the comments section.
page.php – Similar to single.php, but used for WordPress pages.
search.php – The template file used to display search results.
404.php – The template file that displays when a 404 error occurs.
functions.php – A file that can be used to configure the WordPress core, without editing core files.

Each of these files then contains a series of PHP template tags. These tags tell WordPress where to insert the dynamic content. A good example is the <?php the_title(); ?> tag, which pulls in the post title and displays it in your theme:

There’s stacks of template tags available, and more often than not there will be one that does exactly what you want – It’s just a case of finding it in the WordPress Codex. I’ve seen many themes that include some complicated PHP coding to achieve a function that’s already available as a simple template tag, so remember to browse the WordPress Codex whenever you’re stuck!

2. Configuring the stylesheet

Copy my stylesheet into style.css. Then at the top I need to put this comment:

/*
Theme Name: Red Penguin
Theme URI: https://www.redpenguin.net
Description: Every line written from scratch!
Version: 1.0
Author: Red Penguin
Author URI: https://www.redpenguin.net
*/

3. header.php

In here I need to paste the header from my static template, past the closing head tag and up to and including the div just before the content. I’ve added in some more comments and code too:

– a comment about where Google Analytics and Favicon code should go
– some php to create the page title dynamically
– this line to pick up the stylesheet:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

– this just before the closing head tag: ACTUALLY THIS CAUSES PROBLEMS SO I COMMENTED IT OUT

<?php wp_head();?>

so we have:

<!DOCTYPE html>
<html>
<head>

<!-- Google Analytics and Favicon info to go here -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

<?php
if (trim($_SERVER['REQUEST_URI']) == "/") {
echo "<title>The Red Penguin</title>";
} else {
echo "<title>" . get_the_title() . " - The Red Penguin</title>";
}
?>

<?php wp_head();?>

</head>
<body>

<div class="wholePage">

<div class="header">

LOGO TO GO HERE

</div>

<div class="menu">

Home About

</div>

<div class="content">

4. index.php

Create the index file. This can be just showing pages from the loop for now.

<?php

get_header();

if ( have_posts() ) {

// Load posts loop.
while ( have_posts() ) {
the_post();

echo '<h2><a href="';
the_permalink();
echo '">';
the_title();
echo "</a></h2>";
the_excerpt();
}

// older and newer links go here

} else {

echo "<h2>Nothing found</h2>";
echo "nothing at all";
}

get_footer();

?>

5. Sidebar and footer

The header had everything up to and including the first content div, so in the footer we can post the end of that div and the rest of the template code.

</div>

<div class="footer">

(c) 2021 New website PLC

</div>

</div>

</body>

</html>

6. Creating the archive

The archive.php file is used to display a list of posts whenever they’re viewed by category, by author, by tag etc. It’s basically the same as the index file, but with the addition of a tag at the very top that renders a useful page title, so the user knows where they are. ‘Browsing the Articles category’ for instance.

// this is the bit I need to show the correct title for the archive page - I might not have done this for pfm
if (is_category()) { ?>
<h2><?php single_cat_title(); ?></h2>
<? } elseif (is_month()) { ?>
<h2><?php the_time(F, Y); ?></h2>
<? }

7. Constructing the page and single view

WordPress is made up of posts and pages. Posts use the single.php template file, whereas pages use the page.php template file. They’re pretty much the same, apart from that you tend to include the comments_template(); tag for posts, and not for pages.

That’s it mainly for the general construction of the theme.

8. Creating a 2 column template

Firstly I need a file called header-2.php. This can be exactly the same as header.php except for the last line. I need use to the leftbar class instead of the content one.

We’re going to have single.php as 2 column, so we need to change the first line of that file to this:

<?php get_header('2'); ?>

Now we can use sidebar.php! In that file paste the following code:

</div>

<div class="rightbar">

This is some info for the rightbar. This is some info for the rightbar. This is some info for the rightbar. <br /><br />
This is some info for the rightbar. This is some info for the rightbar. This is some info for the rightbar. <br /><br />
This is some info for the rightbar. This is some info for the rightbar. This is some info for the rightbar. <br /><br />

We need to ensure that sidebar is being used in single.php only for now. So go to all other .php pages and remove get_sidebar();

9. How to make the menu so that only admin can see it

In header and header-2 files:

<?php
$current_user = wp_get_current_user();

if ($current_user->ID == 1) {
echo '<div class="menu">HELLO PAUL! SECRET MENU!</div>';
}
?>

>> Custom front page

I can now change index.php to read the following:

<?php

get_header();

?>

Welcome to the front door!

<?php

get_footer();

?>

This is useful if I don’t want a ton of links on the front page just yet.

10. Creating an all posts page

Firstly, create a new page called All Posts, leave it blank and publish it.

(tbc)

Monday 25 October 2021, 717 views

Next post: Javascript countdown timer

Creating a WordPress theme from scratch

Monday 25 October 2021, 717 views

Leave a Reply Cancel reply

Programming index