steve.fm

A work in progress

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