steve.fm

A work in progress

Getting Started with Custom WordPress Themes

WordPress offers some really beautiful themes right out of the box. They’re built to be responsive, which is an industry buzzword that means basically means the site will function well across multiple screen sizes. They also make a point to focus on content, since what you have to say should be front-and-center.

For some reason, I want to roll my own.

Adding Required Files

In the wp-content folder for my WordPress installation, there’s another folder titled themes. I’ll create a new folder for my custom theme, and a file in that folder titled style.css.

WordPress is clear that themes must provide details at the top of style.css within comments. I’ll just take their example and add my own details to get started.

/*
Theme Name: steve-fm
Author: Steve Carroll
Author URI: https://steve.fm/
Description: This is a layout for steve.fm
Version: 1.0
Tags: 
Text Domain: stevefm
*/

The final item I need to create in my new folder is index.php.

Once I’ve added my style.css and index.php files, I should be able to select my custom theme from the Appearance/Themes section in the WordPress admin sidebar.

Building Index.php

At this point, if you were following along, you might notice something: If you have any posts/content/logo/menus/links/etc for your site, they’re not showing up! This is because we haven’t wired up index.php to include any of that information quite yet.

To start, I want my site to have a header and footer that will display across all the pages I’m going to create, as well as the content for each of those pages. I know that down the road, I’ll be using Bootstrap for my styles, but for now, I just want to make sure everything is working as expected.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Steve Carroll">

    <title>steve.fm</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="container">
        This is the header <hr />
	<!-- Everything above this goes in the header.php file -->

        This is the content <hr />

	<!-- Everything below this goes in the footer.php file -->
        This is the footer
    </div>
    
</body>
</html>

Header.php

We’ll add more to the header file in a bit, but at this point it’s most important to get things working. I’ll create a new file called header.php in the same folder as our index.php file then cut and paste the following from index.php

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="Steve Carroll">
 
     <title>steve.fm</title>
     <link rel="stylesheet" href="">
   </head>
   <body>
     <div class="container">
       This is the header <hr />

Your index.php file should now look like this:

	<!-- Everything above this goes in the header.php file -->

        This is the content <hr />

	<!-- Everything below this goes in the footer.php file -->
        This is the footer
    </div>
    
</body>
</html>

Add the the function, <?php get_header(); ?> after the comment about the header. There are several functions built into the WordPress template platform — like it says, this function gets the header. As long as we’ve named our header file correctly, we should now see it load.

Footer.php

Let’s do a similar set of steps for the footer. Create a footer.php file in the same directory as header.php and index.php then cut and paste the following from index.php into footer.php:

		This is the footer
    </div>
    
</body>
</html>

Go ahead and add the function <?php get_footer(); ?> before the comment about the footer in the index.php file. Our index.php should now look like this:

	<?php get_header(); ?>
 This is the content <hr />
 <?php get_footer(); ?>

And, in case you’re curious what our super boring site is supposed to look like at this point… super rough.

Content.php

While my ultimate goal is to get all my posts to load from the database, I just want to get things wired up and make sure they’re working correctly at this point. My content.php looks like this:

<div class="blog-post">
    <h2 class="blog-post-title">My Clever Title</h2>
        <p>This is the content of the post. Not very fancy, but it's loaded.</p>
        <p class="blog-post-metadata">Steve Carroll &mdash; 9:42pm on September 3, 2016</p>
        <hr>
</div>

To load the content into our index.php page, we’re going to use a function called get_template_part() which allows us to load our custom-named templates; other than things like header, sidebar, or footer, for example.

We’ll replace the note about content in our index.php file with <?php get_template_part('content'); ?>.

Now it looks like this:

Beautiful.

The neat thing about being able to declare our own templates with template parts is that I could feasibly be able to treat certain types of posts differently than others. For example, if I had a post that was particularly image heavy — like some photos of food I’ve been cooking — I could set up a gallery post. Another example could be a recipe style post, where it might be helpful to have a different format than traditional blog posts. The options are endless.

Read more about Building Steve.fm