How to Build a WordPress Theme from Scratch: the Basics

SitePoint
How to Build a WordPress Theme from Scratch: the Basics

In this tutorial, we’ll explore WordPress theme file structure in depth, and learn how to create a basic WordPress theme from scratch.

In the first part of this series, we introduced WordPress theming, and the fundamental terminology relating to WordPress theme development. We covered templates, partials, template hierarchy, WordPress post types, the style.css stylesheet, WordPress filter and action hooks, WordPress loop, conditional tags, and we briefly took a look at a typical simple WordPress theme file structure.

Creating the Bare Minimum Theme

The first thing we’ll do is install a plugin that will enable us to batch create WordPress posts and other content. This way, we’ll be able to quickly populate our development website without losing too much time. One plugin that serves this purpose is FakerPress by Gustavo Bordoni, available in the WordPress plugin repository.

[video width="1280" height="720" mp4="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/11/1542590261faker.mp4"][/video]

We quickly install and activate the plugin via WP-CLI.

Now, when we log in to the admin dashboard, we’ll see that FakerPress is installed, and we can create all sorts of content in batch, including any custom post types we have.

FakerPress is installed

Now, using this plugin, we’ll create some fake content. This is the result, using the default TwentySeventeen WordPress theme:

The TwentySeventeen theme with placeholder content

Now, we quickly dive in and set up a bare minimum theme that consists of the catch-all index.php file, and style.css, which we need for the WordPress templating system to recognize the theme:

/* Theme Name: Botega Simple Theme Theme URI: https://botega.co.uk Author: Tonino Jankov Author URI: https://botega.co.uk Description: Basic WordPress theme for Sitepoint theme building tutorial Text Domain: bsimple Version: 1.0.0 License: GNU General Public License v2 or later */

This is the style.css, which consists only of meta CSS comments for now. These comments are required.

This is the index.php file. It will catch all the requests for now:

<?php /** * * @package Botega_Scratch_Theme */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <?php wp_head(); ?> </head> <body> <header> <h1><?php bloginfo('name'); ?></h1> <h3><?php bloginfo('description'); ?></h3> </header> <?php if ( have_posts() ) : /* Start the Loop */ while ( have_posts() ) : the_post(); endwhile; endif; ?> </body>

We now upload and activate the minimal theme we have. I activate it using WP-CLI:

[video width="1280" height="720" mp4="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/11/1542592865activating.mp4"][/video]

The theme is now visible to WordPress, and is active:

The theme is now activated

We haven’t provided a screenshot, so the display in the backend is basic.

If we visit our website now in the browser, this is what we’ll see:

The current home page

Obviously, we have work to do.

If we view the source code of the home page, we’ll see that the wp_head() function has outputted a lot of default WordPress tags in the <head>, like CSS, JavaScript, link and meta tags.

The bloginfo() function is used to output website information.

Our home page is empty, because we aren’t outputting anything inside the Loop — a pattern that WordPress uses in all of its templates to output content.

The Codex page about the Loop goes deep into details about it. A typical structure for the loop — which is based on PHP while control structure — looks like this:

<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?>

We need to fill that while loop with content — or with content-outputting WordPress tags.

If we change our loop, by adding the_title(), the_excerpt(), and we add HTML markup and the_ID(), to look like this:

<?php if ( have_posts() ) : while ( have_posts() ): the_post(); ?> <div id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> <div class="post-excerpt"><?php the_excerpt(); ?></div> </div> <?php endwhile; endif; ?>

We’ll now get a list of posts on our home page, with no style applied:

Unstyled output

WordPress shows A blog page — an archive page for all the blog posts — by default.

If we now visit single post URL — something like http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/ — we’ll see something like this:

Our current single post layout

Our loop, albeit very crude, actually works.

The post How to Build a WordPress Theme from Scratch: the Basics appeared first on SitePoint.

Comments

Post a Comment

Popular posts from this blog

Visual Studio Code: A Power User’s Guide

Image
In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow. This article is written for beginners who may be using Visual Studio Code for the first time. VS Code, as it’s commonly known, is considered a "lightweight" code editor. In comparison with full integrated development environment (IDE) editors which occupy gigabytes of disk space, VS Code only uses less than 200MB when installed. Despite the "lightweight" term, VS Code offers a massive number of features which keep increasing and improving with every new update. For this guide, we'll cover the most popularly used features. Every programmer has their own tool set which they keep updating whenever new workflows are discovered. If you want to learn every tool and feature VS Code has to offer, check out their official documentation . In addition, you may want to keep track of updates for new and improved features. Prerequisites In order to follow alo
Read more

6+ Best Websites for Free Fonts in 2020

Image
I firmly believe that, in order to strike the optimal balance between minimalism and visual appeal, a user interface should display no more than what’s absolutely necessary while making those necessary elements look visually appealing. Keep it simple, but make the simple look amazing. But, what does simple look like exactly? Well, strip away all of the over-the-top marketing gimmicks, redundant features, and cluttering visuals, and most of what’s left is the UI copy and text content. As boring as this sounds, let’s be honest: this is the most important aspect of any app or website. Information and the ability to navigate it is the entire reason users are using our app or website. So with the right typeface coupled with the right font styles (see “ Font vs typeface: the ultimate guide ”), we can create designs that are quite simple and yet visually appealing at the same time. This emphasizes the most important aspects of the design while usin
Read more

How to Contribute to Open Source TypeScript Projects

Image
If you think of the ideas of open source applied to information in an encyclopedia, you get to Wikipedia – lots and lots of small contributions that bubble up to something that’s meaningful. – Matt Mullenweg One of my favorite aspects of open source is the fact that anyone can contribute! It’s like “productive volunteering” (if you’ll humor me). It’s a fantastic way to build something bigger than you, give back to the community, and level up your skills. In this article, we’re going to talk about practical ways for you to get involved in open source TypeScript projects. We’ll first cover assessing your level then jump into how you can find opportunities. Assessing Your Level Before you get started contributing to open source, you want to find your comfort level. Where are you at skill-wise? What level of complexity are you wanting to solve? How much time do you want to spend? These are important questions to consider before diving in. This
Read more