steve.fm

A work in progress

Deploying Local WordPress to a Server

Early on in registering my site with my hosting provider, I had an issue where the domain wouldn’t map over right away. Normally, this wouldn’t be a big deal, but since I had a chunk of time to really dig into building a WordPress site, I didn’t want to waste any of it waiting.

To get up an running quickly, I installed MAMP: Macintosh, Apache, MySQL, PHP. MAMP basically runs an Apache server on my Mac that has a MySQL database and support for the PHP programming language, which WordPress is built with. That way, I would be able to start building while my domain was busy mapping over to my new host from Tumblr.

Now that I have a site with a few posts, I figure it’s time to get it on the internet and continue working on it in the open.

Exporting the Database

Since I’ve already got WordPress installed on my host, I’m hoping this process will be fairly simple. This is a step I think I can actually skip. While I have test posts loaded into my local site, I don’t need the database since I’ll be publishing them using Ulysses. I will need to upload the other files, however.

Transferring Files via FTP

I’m going to use an app for the Mac called Transit. It’s built by a small team of Mac developers that make great software, and I try to support then whenever I can. Their products are always very thoughtful and functional — two keys to a great application.

Looks like I can just click and drag files over into the right directories and I’m done!

Publishing from Ulysses

As I mentioned in an earlier post, I use Ulysses for nearly all of my writing that involves a computer — As soon as they made the announcement that they were releasing an update where I could publish to WordPress, I decided to drop my Tumblr site and move everything to WordPress right away. It’s been a fun adventure so far… All I have to do to publish is click a share icon, enter my credentials, and let the magic happen.

Read more about Building Steve.fm

Adding Bootstrap

I’m going to take a shortcut for my site and install Bootstrap with Bower into my wp-content folder. I’ll update my style.less file to include the bootstrap.less and enqueue JQuery along with the necessary Bootstrap scripts in my functions.php file.

When I updated my style.less file to import the core Bootstrap file and loaded up my page, it didn’t load the styles as I was expecting. After searching around for about an hour, I realized that I had been updating the wrong file… doh!

style.less

@import '../bower_components/bootstrap/less/bootstrap.less';

functions.php

<?php 
    add_action('init', 'theme_enqueue_styles');
    add_action('init', 'theme_enqueue_scripts');

    function theme_enqueue_styles() {
        wp_enqueue_style('style', get_stylesheet_directory_uri().'/stylesheets/style.less');
   }

    function theme_enqueue_scripts() {
        wp_enqueue_script('jquery.min', get_stylesheet_directory_uri().'/bower_components/jquery/dist/jquery.min.js');
        wp_enqueue_script('bootstrap.min', get_stylesheet_directory_uri().'/bower_components/bootstrap/dist/js/bootstrap.min.js');
   }
 ?>

footer.php

        This is the footer
    </div>

    <?php wp_footer(); ?>
    
</body>
</html>

With the Bootstrap styles loaded, my site looks like this:

Read more about Building Steve.fm

Getting Set Up with Less and Some Basic Styles

I’m a big believer that strong typography can make a big difference between a great experience reading what someone has written and a subpar experience. It’s not something most people tend to notice, but when it’s done right, the typeface selection makes reading the site a lot easier.

Before I select the typeface for my site, I want to get it prepared with some basic styles. To do that, I’ll get it set up for the way I normally work.

I like to develop styles with a CSS pre-processor, like Less or Sass, that simplifies the process of writing CSS — Which has a nasty habit of making you repeat properties over and over, when it would be so much easier to just declare variables or functions, and creating stylesheets that are easier to navigate.

WordPress seems to have a great plugin for processing Less, and since it’s baked in to the current stable release of Bootstrap, so Less will be my choice. Who knows, maybe I’ll do a conversion to Sass at some point in the future and the newest version of Bootstrap in the future?

Installing WP Less

Installing WP Less could not have been easier. I just followed their instructions on the installation page in the WordPress Plugin Directory.

  1. Search for the plugin name (WP-LESS)
  2. Click on the install button
  3. Activate it

Once you activate it, they tell you to use the wp_enqueue_style() function to load in your *.less files.

Loading .less Files

To get started, I’ll create a style.less file in the same folder as my other files with the following:

body {
    font-family: 'Lucida Grande', 'Helvetica Neue', Arial, san-serif;
    padding: 50px;
    padding-top: 150px;
}

Now that this file has been created wit some very basic changes to typography and layout, I’ll need to add it. I’ll create a new file called functions.php that will load my stylesheet file using the wp_enqueue_style(). I’ll also need to include the <?php wp_head(); ?> function in my header.php file to make sure it works correctly:

<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">

    <!-- Load our styles -->
    <?php wp_head(); ?>

Our new functions.php file should look like this:

<?php 
    add_action('init', 'theme_enqueue_styles');

    function theme_enqueue_styles() {
        wp_enqueue_style('style', get_stylesheet_directory_uri().'/stylesheets/style.less');
   }
 ?>

The first parameter we’ve included in this function is name name of our file. The second is for the directory where it’s kept. Since it’s in the same folder as our style.css file, we can use another function that automatically returns the directory it’s in,get_stylesheet_directory_url(). PHP uses dot-syntax to join strings together, so we can use a dot between the stylesheet directory function and our stylesheet directory to specify exactly where our style.less file will be kept.

It’s coming along!

Read more about Building Steve.fm

Dynamic Post Content

Because I don’t have my content.php file set up to load content, if I were to add a few posts to my WordPress site like you might do for other templates, those posts wouldn’t display on my site.

WordPress has a feature that they call “the loop” that lets you iterate over records in a collection. What this basically means is that if you have a bunch of posts, you can display those posts one-by-one. You can even use a template in the body of a loop to make sure that each post gets formatted as it should. With my blog as it currently is, that means the title goes at the top, the content of my post goes in the middle, and the metadata of my post goes at the end.

I’m going to create a loop on my index.php page that loads posts from my blog according to the content.php template I’ve already created.

<?php get_header(); ?>

<!-- Display each post until there are no more posts -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php get_template_part('content'); ?>
<?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts!'); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

Since I’ve added three posts to my site to test, my content.php template should load three times. It won’t yet be dynamic at this point because I haven’t told it to pull any of the values from the posts it’s pulling — only to pull as many times as there are posts.

The function that loops through my posts does a few things. First, it checks to see if there are any posts. Then, it displays the first post it finds. After that, as long as there are more posts to display, it will continue to display them. Once there are no more posts, it stops trying to display them. If it turned out there were never any posts to display in the first place, it would display a message to my site’s visitors that lets them know there are no posts available for their selection.

Why is this important?

Primarily, it’s important because we keep bringing up the word “post”. My posts are an instance of the wp_post class in WordPress. Every post I make on my site has the same properties available as the wp_post class, although the values may be different. This means that I can use the Class Reference for WPPost that WordPress provides to figure out how to display information from my posts.

One of the many concepts I have learned through trying new things over and over again is that figuring how to get to the answer is as important as getting the answer. I’m sure it won’t be long until I have my post content showing up.

My content.php file looks like this currently:

<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>

From this, I have decided that I want to load the title from my posts, as well as the content, author, and date/time it was created. I’m not sure why, but while in the loop instead of individual pages, the properties must be prefixed by “the” instead of “post”. I’ve updated my content.php to access these properties from my posts.

<div class="blog-post">
    <h2 class="blog-post-title"><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
    <p class="blog-post-metadata"><?php the_author(); ?> &mdash; <?php the_date(); ?></p>
    <hr>
</div>

And there you have it!

At this point, I’ve got a basic homepage set up where all my posts will be loaded to the page with new posts positioned at the top. I’ll probably want to handle pagination or some lazy loading at some point in the future, but I don’t have enough written yet to really justify that. So it makes sense at this point to start working on getting everything to look a bit better.

Read more about Building Steve.fm

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