steve.fm

A work in progress

Adding Site Information

Clicking around on the WordPress admin, I noticed that you can customize site information. For example, you can customize the Site Identity, which includes the Site Title, Tagline, and even a Site Icon to display.

I want to do something simple with the Tile and Tag Line. For now, I just want to add them within the <title> tags for my site so they’ll display that name in the web browser’s tabs. More details about different customization options can be found on the Appearance Customize Screen guide offered by WordPress.

Thankfully, getting the info that I want is fairly simple. It can be surfaced by using the get_bloginfo() function. I updated the title tag in my header.php file to the following:

<title>
        <?php echo get_bloginfo('name'); ?> &mdash; 
        <?php echo get_bloginfo('description'); ?>
</title>

Read more about Building Steve.fm

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

Why WordPress.org?

I tend to be one of those people who likes to own the whole experience of a product. Basically, if I’m going to be using a platform, I want to be in control of the version, I want to be able to install any plugins I want to install, and I want to be able to get it to look and work exactly as I want it.

My requirements are:

  • Customizable Styles
  • No Advertisements
  • Custom Plugins
  • Coding Optional

Because of these requirements, the WordPress.com free and paid tiers weren’t going to fit my needs. WordPress.org was the better fit.

Step 1: Pick a Host

A host is basically where the data that makes up your website lives. Admittedly, with the way that modern websites and applications work, it’s more complicated than that… but it’s a way to keep it simple.

One of the main differences between WordPress.com and WordPress.org is that WordPress hosts your site when you purchase a subscription through WordPress.com — While the core product is free, any premium features are for an additional fee. This means that for WordPress.org, since it doesn’t technically live at WordPress, you’ll have to pay for hosting separately.

The WordPress.org site offers several hosting options that make it easy to set up a WordPress site. I picked one near the top that was cheap because I’m just starting out. I’m banking on not need something super fancy… we’ll see how that works out!

Step 2: Download & Install

While this may be a little more complicated for you, my setup with BlueHost was super easy. All I had to do was register, create my account and log in to their hosting platform. WordPress was automatically installed for me, with a convenient button to press so I could log in to my new WordPress site.

Step 3: Read the Documentation and Get Started

No doubt, I’ll be doing this as I go and sharing my experiences and struggles along the way. The first thing I already encountered was an issue with having my domain registered outside of my web host. The name servers are still attempting to update, so I can’t even get on it at this point to add any posts or update any templates.

In the meantime, I’m making do by writing about it and by installing WordPress locally on my Mac so that I can get started working on stuff right away.

Read more about Building Steve.fm

Why Move Now?

I currently run two websites on two different platforms. The idea with this is that they both can have their own focus and I can figure out what I like about one platform versus another, and I get to experience different products with different users in mind. One of my sites, caverly.co is on Squarespace while the other steve.fm is on Tumblr.

While the Squarespace site is beautiful, and they offer many additional ways to make it even more beautiful, I’ve never really found it to be the place I want to write. I thought Tumblr might be a better fit for that, but it wasn’t either. It was just too much work to open up an application for either of the platforms and type something in. Tumblr is more of a social-blogging platform anyways, and since I’m not really involved with the greater community, I didn’t get to realize the benefit of those features like other users have.

In the past, I’ve had a few blogs on WordPress, and I really enjoy it as a content management solution — although I don’t plan on using its interface to write. I have Ulysses for that.

Ulysses is a writing app that’s offered for Apple’s ecosystem that, just by owning it, makes me want to write more. That’s nothing short of a miracle. In a recent feature update, they announced that they’re now supporting a “publish to WordPress” option. As soon as I heard about this, I couldn’t stop thinking about switching over to WordPress — especially since my favorite place to write could now become my favorite publishing platform.

In short, I’ve opted to move my Tumblr-based site to WordPress.

Read more about Building Steve.fm

About

I write a lot about writing. In fact, most of my writing is about how I haven’t written enough recently; which ends up being just more writing about writing. Since I’d like to break that streak, I’ve decided to start something new.

One of my not-so-secret delights in life is to try new things. In fact, I enjoy it so much that I’m going to start telling you about the new things I’m trying to do and what I’ve been discovering along the way.

Read more about Building Steve.fm