Building A Basic WordPress Theme

Creating a WordPress theme only requires three files. style.css, index.php, functions.php. However since we’ll be needing them later lets include header.php and footer.php.

Some of the code samples get a little busy in this section so I’ve provided them in a Bitbucket snippet for easier reading and download.

Tip: Before beginning consider setting wp_debug to true in wp-config.php this will expose any errors or warnings encountered during your theme building process.

style.css

WordPress relies on style.css to provide basic information about your theme. Some fields are required while others are optional.

/*
Theme Name: Scratch JD
Theme URI: https://joseph-dickson.com/scratch-jd
Author: Joseph Dickson
Author URI: https://joseph-dickson.com
Description: Scratch is a no thrills theme.
Version: 1.0.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: scratch-jd
*/

functions.php

This is where we enqueue our theme’s stylesheet and run a simple setup function to check that our theme is calling its own functions.

<?php
/**
 *	@since Scratch JD 1.0.0
 *
 * 	Proper way to enqueue scripts and styles
 */

function scratch_jd_scripts() {

	wp_enqueue_style( 'scratch-jd', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'scratch_jd_scripts' );

header.php

<?php
/**
 * The template for displaying the header
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @since Scratch JD 1.0.0
 */
wp_head();

footer.php

<?php
/**
 * The template for displaying the footer
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @since Scratch JD 1.0.0
 */
wp_footer();

index.php

The index.php file is a primary fallback for all WordPress templates. It can be overridden by more specific files by using the template hierarchy.

Because I promised we’d keep things simple index.php will only contain four WordPress hooks and the WordPress loop.

• The Loop
• the_title()
• the_content()
• get_header()
• get_footer()

The Loop: Retrieves a post’s content from the WordPress database and displays it on the current post, page, index or archive.

the_title(): Retrieves a post’s title from the database and allows for adding html around it

the_content(): Retrieves the post’s content from the database

get_header(): Retrieves header.php from your theme.

get_footer(): Retrieves footer.php from your theme.

<?php
// Get the Header
get_header();

// The Loop
if ( have_posts() ) {
        while ( have_posts() ) {
                the_post(); 

                // Display the post title and HTML              
                the_title();
                
                // Display post content
                the_content();
                
        } // end while
} // end if

// Get the Footer
get_footer();

Archiving and Testing

Once all the files are ready we can either copy them directly to our localhost and test live or install it.

Copying the folder to your localhost in Ubuntu

sudo cp scratch-jd/ /var/www/html/scratch/wp-content/themes/ -r

Create a Zip Archive in the bash terminal

zip -r scratch-jd .

Uploading and activating scratch-jd.zip and the desired results.

Albeit not very interesting this theme technically works, It pulls in both the header and footer scripts a cascading stylesheet as well as The Loop.

In the next post we’ll learn about creating navigational menus.

---

To the extent possible under law, Joseph Dickson has waived all copyright and related or neighboring rights to Building a WordPress Theme From Scratch. This work is published from: United States.