steve.fm

A work in progress

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