Issue with WordPress Plugins

One of the benefits of open-source software is that when things aren’t working as expected, you can fix it.

I noticed there was an issue with the accessibility of the site today when I tried to “tab” to the navigation menu. Whenever I hit the tab key, the focus would move to the first link on the page, not the navigation menu. Try as I might, I wasn’t able to access the menu via the keyboard even when I tabbed through the entire page.

When i looked at the site’s HTML, the answer became apparent very quickly: tabindex="-1". For posterity:

<li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1 active">
   <a title="Home" href="http://steve.fm/" tabindex="-1">Home</a>
</li>

Since I wasn’t generating the menu items myself, I could only assume it had to do with the plugin. I did some quick traversing of the files for a place where it said tabindex="-1" and I found it in the nav-menu-walker.php file in the plugin directory for My Bootstrap Menu.

//Menu Item with no children
else {
    $inner_atts_array['href'] = !empty($item->url) ? $item->url : '#';
    /*Review here*/
    $inner_atts_array['tabindex'] = "-1";
}

Apparently, they even had a comment to review the code… Who knows? Anyways, there was no reason to set the tabindex value there… being able to put it in focus doesn’t benefit us in any way.


WordPress Pagination

Initially, I had hoped on working on getting the code blocks to render better, potentially with some inline formatting — but then I realized that my older posts were no longer showing up on the page. Guess I’ve written quite a bit!

As usual, the WordPress Codex has the information I need. Their page on pagination references the next_posts_link() and previous_posts_link() functions that should do the trick. I’ll add this right before the get_footer() function in my index.php file.

<div class="row">
    <div class="col-sm-9 col-md-7 col-sm-offset-2">
        <nav aria-label="pagination">
          <ul class="pager">
            <li class="previous"><?php previous_posts_link(); ?></li>
            <li class="next"><?php next_posts_link(); ?></li>
          </ul>
        </nav>
    </div>
</div>

Wrapping them in Bootstrap, they generate exactly the HTML I want. For now.


Bootstrap Javascript Not Loading

Remember that functions.php file we worked on awhile ago? I actually made a pretty big mistake in it that caused Bootstrap’s javascript and JQuery to not load.

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_styles', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_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');
   }
 ?>

Basically, I created a function called add_theme_styles() and another function called add_theme_scripts(). When adding them to the built-in WordPress actions, I had accidentally used the tag wp_enqueue_styles instead of wp_enqueue_scripts, which isn’t actually called by WordPress. This resulted in my scripts not loading.

Once I updated my code to fix the mistake, things worked fine… but it had me confused for quite awhile.

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_scripts', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_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');
   }
 ?>

Using Bootstrap Navigation in WordPress

The navigation bar of a website, or nav bar for short, is typically a collection of links displayed across the top of a site.

Both Bootstrap and WordPress have opinionated ways for structuring the navigation of a site. There are definite benefits to using WordPress’s menu manager and functions to display the menu items you set up in the Admin panel. Because the functions provided by WordPress output to a different format than Bootstrap, there are a few options to proceed.

  1. We could manually create the navigation bar and its items.
  2. We could build our own styles based on the output of the menu manager’s functions.
  3. We could use a third-party plugin to translate the menu manager’s output into a Bootstrap-friendly format.

The first and second options, while attractive now, probably won’t be best long-term. First — While my site only has a few items now, I’ll save time when I need to add items later if I build a dynamically generated menu. Second — Rolling my own styles only feels like it will save time. Even though I’m planning to modify the Bootstrap nav bar, I’ll probably end up replicating most, if not all, of its responsive functionality in both CSS and Javascript.

After doing some research, it seems like there’s a plugin for WordPress that does exactly what I want: [https://wordpress.org/plugins/my-bootstrap-menu/]. When getting up to speed quickly, I find that it’s typically best to try before you buy, and buy before you build. If I followed my own advice on this project, I’d probably be using Medium, but I don’t just want to write — I want to build.

Once I have a menu in place, the My Bootstrap Menu plugin will let me use it and will automatically style it. To get a menu to show up in WordPress admin, I’ll have to register it within my functions.php file.

add_action( 'init', 'register_my_menu' );
function register_header_menu() {
        register_nav_menu('header-menu',__( 'Header Menu' ));
}

Now that I’ve built it in the admin, I’ll add it to my header.php file by using the wp_nav_menu() function.

<!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>
        <?php echo get_bloginfo('name'); ?> &mdash;
        <?php echo get_bloginfo('description'); ?>
    </title>

    <script src="https://use.typekit.net/uqh7odo.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

    <?php wp_head(); ?>
</head>
<body>
    
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-sm-offset-2 col-md-offset-2 col-sm-10">
                    <h2><?php echo get_bloginfo('name') ?> <br>
                    <small><?php echo get_bloginfo('description') ?></small></h2>
                </div>
            </div>
        </div>
    </div>

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
    
    <div class="container">

It’s not Bootstrap themed yet, but it’s there. Now I’ll update the settings in the My Bootstrap Menu plugin to recognize that menu and convert it to Bootstrap’s navigation format.

It was that easy…

It is, however, not exactly how I want. I’d like the Home link to be aligned with my blog’s title and the content. Ideally, I’d also like the Caverly link to be right-aligned, but I can deal with everything left-aligned for now.

How’d we get there?

I added the following to my stevefm.less file:

.navbar-inner .navbar-collapse {
    .row;
    > div {
        .make-md-column(7);
        .make-sm-column(9);
        .make-sm-column-offset(2);
    }
}

Looking at the source code that My Bootstrap Menu generated for WordPress, I was able to apply some of Bootstrap’s mixins to the menu structure so it would align correctly. Basically, I made the generated elements behave like a .container class with a .row and .col-* classes depending on the screen size.


Tinkering

If this is my first post on tinkering, I should get a medal. If not, well… that’s to be expected.

I tend to enjoy messing with things until I get them right.

Currently, I’m stuck in a bit of a hard spot. I want to get a few things squared away before my next post, but I might just post this one describing where I’m stuck now with the site, and we’ll see how we work it out.

The site has three priorities right now, as I see it:

  1. Get navigation up and running.
  2. Figure out good typefaces at appropriate sizes for the body text, headings, and code… maybe the navigation while we’re at it.
  3. Update the style of the code samples to be a little less “Bootstrap-y”, maybe with some syntax highlighting.

Right now, the blog looks more-or-less like this


Displaying Dates for Every Post

Early on, I noticed a problem where the date was displaying for some of my posts and not others.

I did some quick Googling and found out there’s actually a WordPress Codex page for that the_date() function that recommends using a different function if you want to return the date for multiple posts made on the same day. While some people might just want to display the date for the top post and let others assume that all the posts following are from the same date, I want the date to be on every post.

In case you’re curious, I’m going to update the metadata section in my content.php file to use the get_the_date() function instead:

        <div class="blog-post-metadata">
            <?php the_author(); ?> <br>
            <?php echo get_the_date(); ?>
        </div>

I can also imagine a world where I make a post heading that contains the date for all posts within that date… and where I remove the author information tag as well. It doesn’t make much sense to display the author long-term for a site where I plan on being the only author. The name of the blog should give some indication.


Customizing the Post Layout

When I first launched the blog, I didn’t care much how content was laid out, I just wanted to make sure things were displaying. Now that i’ve got this worked out, I want to get my posts set up a little nicer.

Ideally, I’ll have the post metadata on the lefthand side of the post, de-emphasized, and the post content to the right of it.

When the site gets scaled down to smaller devices, I want the metadata to shift below the post, rather than being before it. On left-to-right layouts, this tends to be an issue because typically the contpent that comes first left-to-right will be on the top for mobile devices. Bootstrap has a solution to this problem.

In Bootstrap’s responsive grid layouts, they have the option to push or pull columns for different size classes. What this means is that you can basically shift the contents when the devices get larger than a certain size. The actual order of blog post elements is:

  1. Title
  2. Content
  3. Metadata

So I’ll start off by structuring my content.php file with that in mind:

<!-- Title Row -->
<div class="row">
    <div class="col-sm-offset-2 col-md-offset-2 col-sm-8 col-md-6">
        <h2 class="blog-post-title"><?php the_title(); ?></h2>
    </div>
</div>

<!-- Content & Metadata Row -->
<div class="row">

    <!-- Content Column -->
    <div class="col-sm-8 col-md-6">
        <div class="blog-post">
            <?php the_content(); ?>
        </div>
    </div>

    <!-- Metadata Column -->
    <div class="col-sm-2 col-md-2">
        <div class="blog-post-metadata">
            <?php the_author(); ?> <br>
            <?php echo get_the_date(); ?>
        </div>
    </div>
</div>

<hr>

Larger Devices

Smaller Devices

While it’s not quite what we want for larger devices, it works well for smaller ones. Before we go into pushing and pulling, it helps to have a basic understanding about how Bootstrap’s grid system works.

Bootstrap grids are basically divided up into twelve columns. Twelve makes a lot of sense because it’s a relatively small and manageable number that’s evenly divisible by a lot of other numbers:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Those numbers can then be combined to make other combinations of numbers, leaving you with a lot of possibilities for how you arrange your grid. In fact, you don’t even have to get to twelve if you don’t want to. You can see in the code above, the content takes up 8 columns on small devices, but only 6 columns on medium-sized devices.

Once you specify the number of columns to use for an element, it will use that number of columns for all larger devices until you specify it again. For example, I’ve specified 8 columns on small — if I had not specified anything for medium, it would use 8 columns for medium, large, and extra large devices. For any devices smaller than “small”, the column would span the entire width of the device.

Now that we’ve got that under our belts, pushing and pulling should make a little more sense. Let’s say I have an element (A) that’s using 8 columns, then an element (B) that’s using 2 columns.

You can see that element A is using columns 1-8 and element B is using columns 9-10. To get element B into element A’s spot, I’ll have to pull it 8 columns. Because I have two different values at two different sizes, I’ll have to specify for each size class.

The code will look like this for the metadata column:

<!-- Metadata Column -->	
<div class="col-sm-2 col-md-2 col-md-pull-6 col-sm-pull-8">
    <div class="blog-post-metadata">
        <?php the_author(); ?> <br>
        <?php the_date(); ?>
    </div>
</div>

Yikes! To get this to display the way it’s supposed to, I also need to push my other content over:

<!-- Content Column -->
<div class="col-sm-8 col-md-6 col-md-push-2 col-sm-push-2">
    <div class="blog-post">
        <?php the_content(); ?>
    </div>
</div>


Fixing Style Bugs

I had a few instances where some tricky bugs were showing up on my site. One was that when images were being loaded from Ulysses, they were displaying as gigantic images, far outside of the width I had set my posts. This made things looks pretty weird.

I fixed this by adding the properties from the responsive image class into my style.less file, which I renamed stevefm.less for clarity. In Less, I’m able to add all the properties of one class to another simply by putting it inside the other class, like so:

.blog-post img {
    .img-responsive;
}

In standard CSS, it would look more like this:

.blog-post img {
    display: block;
    max-width: 100%;
    height: auto;
}

See how Less saves time?

The second bug I ran into was that my blog style was starting to creep into my admin style. This might be tricky to see, but my serif typeface, Garamond, was creeping into everything!

I fixed this by changing the add_action() tag parameter in my functions.php — which is basically the name of the action that the function gets added to. What I didn’t know was that 'init' was also used on the Admin side! The functions.php file now looks like this:

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_styles', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_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');
   }
 ?>

Customizing Bootstrap

While it’s certainly not a bad look, I’d prefer to not use Bootstrap out of the box. Instead, I’ll be modifying some of the core Bootstrap components and adding some of my own styles to make it more my own.

The first thing I’m going to do is create my own custom variables file called stevefm-variables.less and import it right after I import Bootstrap in my style.less file. That way, I can safely overwrite Bootstrap’s variables with my own values.

Because I want to use a custom typeface from Adobe TypeKit, I’ll have to add their embed tag to my header.php within my <head> tags. I’ll put it just before the wp_head(); function.

I’ll also update the header to have my site’s name and description. The updated header file looks like this:

<!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>
        <?php echo get_bloginfo('name'); ?> &mdash;
        <?php echo get_bloginfo('description'); ?>
    </title>

    <script src="https://use.typekit.net/uqh7odo.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

    <?php wp_head(); ?>
</head>
<body>
    
    <div class="jumbotron">
        <div class="container">
            <h1><?php echo get_bloginfo('name') ?></h1>
            <p><small><?php echo get_bloginfo('description') ?></small></p>
        </div>
    </div>

    <div class="container">

While I’m in the process of updating my formatting, I’m also going to take a minute to update the format of my posts in content.php. Right now, the text spans widely across large screens, such as laptops and desktop computers, which makes it difficult to read. I’ll use Bootstrap’s grid formatting with .col-* and .row to achieve the formatting I want at various sizes.

content.php

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

I’ll also get rid of that text in my footer.php that says “this is the footer,” since I know it’s working correctly now.

And last but not least, my style.less now looks like this:

@import '../bower_components/bootstrap/less/bootstrap.less';
@import "stevefm-variables.less";


.blog-post-title {
    .h2;
    // margin-bottom: 0;
}

.blog-post-metadata {
    .small;
}

It’s all coming together!


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.