Technical details about my new blog

When you’re into web design, of course you can’t simply install WordPress and be done with it. The current default WordPress theme, Twenty Sixteen, is nice and clean, but a few tweaks here and there made it look a bit better and even less noisy.

Update February 2019: The blog has been redesigned and this post no longer describes the current state of the blog.

I started by installing Apache/​MySQL/​PHP on my Linux system (commonly called LAMP). I first used tasksel to install the stack, but I didn’t RTFM and screwed up big time during this process and had to reinstall the whole OS.1

Luckily I have a dedicated home partition, and my Linux setup was just a week old anyway with all significant changes I did outside of /home added to a bash script in my home folder. So I just reinstalled and ran this script and voilà, an hour later I was back where I started. Gotta love Linux.

After successfully installing the web server stack (manually this time), I installed WordPress and started fiddling around until I was comfortable I could get the look I wanted. I knew absolutely nothing about customizing WordPress before I started, and now I know just a little, which is still vastly more than nothing.

Importantly, I learned that when editing a WordPress theme, you should make a child theme so that updates to the parent theme will not undo your edits. So I made a child theme of Twenty Sixteen and started customizing to my liking.

My goal in customizing the theme was to get an elegant design with a a distraction-​free reading experience, preferably while still communicating some stuff I wish to communicate (like games I’m playing in the sidebar of game-​related posts, etc.).

I have made both stylistic and structural changes to the theme, as well as installed numerous plugins.

Stylistic changes to theme

Removed black border

I didn’t care for the black border on the Twenty Sixteen theme. Setting the background color to white only made the border white, meaning that content still scrolled into and out of view before reaching the edge of the viewport. Removing the border entirely was slightly more complicated than I thought – the left and right margins were added using margins, but the top and bottom ones were added using :before and :after selectors which needed to be hidden.

/* Remove page borders */
#page { margin: 0; }
body:not(.custom-background-image):before,
body:not(.custom-background-image):after {
  display: none;
}

Current post category highlighted in menu

For example, when you’re reading this post, “Tech” is highlighted in the menu. This was easy:

/* Highlight current category in menu */
.current-menu-item, .current-post-ancestor {
  font-weight: bold;
  background: #eee;
  border-radius: 0.7em;
}

The current-menu-item class is added to items that corresponds to the currently rendered page, and the current-post-ancestor class is added to all hierarchical ancestors of the currently rendered page. I assume I’ll need the latter if I ever make sub-​categories in a drop-​down list from the parent category menu item (for example a category “Reviews” under “Gaming”); for now, it remains untested.

Remove next/​previous post links at bottom of posts

.nav-links { display: none; }

Super easy. I don’t see the point in having these links. They were big and annoying and I really don’t see any of my readers getting to the bottom of the page, below comments and all, and thinking, “gee, I sure want to see the chronologically next published item on this highly sectioned blog!”

Remove menu at the bottom on small viewports

/* remove categories at bottom of page on small viewports */
footer .menu-categories-container { display: none; }

Again, something I’d rather clean up. The menu is at the top, I don’t see why it’s needed at the bottom too. It just adds to the noise.

Google Fonts

The brilliant plugin Easy Google Fonts gives you all of Google Fonts at your fingertips. I am using Raleway for the body copy, a beautiful font I quite like and have used on a previous website I made. I like the look and find it both easy to read and elegant at the same time. I’ve used Bitter for the headings, because it seems to harmonize well with Raleway. The blog title is set in Cabin Sketch, and for the menu items I use Catamaran, which seemed to work well with Cabin Sketch.

Fonts are definitely not my strong suit, though. Apart from Raleway, I basically just flicked through font after font until I found some I liked. If I get feedback indicating I’ve made a poor choice of fonts, I might change them.

Structural changes to theme

Move featured image above heading

I didn’t like the featured image appearing between the excerpt/​tagline and the post content, so I moved it up above the heading. This was done both in content.php (for post listings) and content-single.php (for single posts). Basically it just entailed moving <?php twentysixteen_post_thumbnail(); ?> up above <header class="entry-header"> in both files.

Move search icon to main menu

Site search seemed to be available only as a widget. I don’t think people will be using the page search enough to warrant a permanent placement in the sidebar, yet I wanted it to be easily available when needed. I created a link at the end of the menu, used the search icon as the “link text” (<span class="genericon genericon-search"></span>) and had it link to a normal WordPress page where I have inserted the search form (this required the Search shortcode plugin).

Add reading time

When reading articles longer than a few hundred words, I like to get an idea of how long it is before I start reading. Some blogs and websites have a “time to read” info near the top, and I like that. (I don’t like the sticky “progress bars” as you read though – they’re distracting and you’ll never see those here.) I use a plugin called Post Reading Time. You use this by inserting post_read_time() somewhere in your theme. I chose to put it at the bottom on the byline/​timestamp area, which is at the top left of the article body on large viewports. Specifically, it’s added at the bottom of the function twentysixteen_entry_meta() in functions.php.

Reading time on small viewports

On small viewports, the byline/​timestamp area is moved to the bottom (it is, after all, a <footer>). There’s no point in displaying time to read at the bottom of the page, so I added another reading time indicator below the featured image which is visible on the relevant viewports. I could of course do this for all viewports, but it’s more distracting there than in the footer, so I’d rather not.

The code I’m currently using is this:

<?php if (function_exists(post_read_time)) {
	echo '<p class="readingtime">';
	post_read_time();
	echo '</p>';
} ?>

It’s added just below <?php twentysixteen_post_thumbnail(); ?> in the previously mentioned content-single.php. Here’s the necessary CSS:

p.readingtime {
  text-align: right;
  margin: -2em 7.6923% 1.4736842105em 7.6923%;
  color: #686868;
  font-size: 80%;
}
@media screen and (min-width: 44.375em) {
  p.readingtime {
    margin-right: 23.0769%;
  }
}
@media screen and (min-width: 56.875em) {
  p.readingtime {
    margin-right: 0;
  }
}
@media screen and (min-width: 61.5625em) {
  p.readingtime {
    display: none;
  }
}

Remove author bio

For a single-​user blog, the author bio at the bottom of posts just seemed like noise between the end of the post and the comments section. Basically I just removed everything from biography.php.

Plugins

Some highlights:

• Akismet seems like a good choice to eliminate spam comments.
• Broken Link Checker checks automatically for broken links. Nice to have.
• Crayon Syntax Highlighter seems to be the gold standard for syntax highlighting.
• WP-​Bigfoot for inline notes.2 I’m not really that fond of this myself when reading stuff (it interrupts the flow and doesn’t work when reading articles on my Kindle). But they are nice to have in certain circumstances, like the digression at the beginning of this post.
• Keep Emoticons as Text disables automatic conversion of e.g. :) to those yellow smilies. For some inexplicable reason, WordPress removed that option from its settings.
• Recent Posts Widget Extended is used here to show recent posts from a category when viewing a post in that category.
• Widget Logic allows me to specify on what kind of pages certain widgets should appear. Only on the front page, only in a certain category, etc.
• wp-​Typography automates things such as hyphenation, space control, intelligent character replacement, etc. Nice to have for a typography quasi-​nerd like me.
• Yoast SEO seems to be the golden standard for SEO plugins.

Bonus: Correct fonts when writing posts

To get the correct fonts in the editor, first we need to add Google Fonts’ stylesheets for the relevant fonts:

function my_theme_add_editor_styles() {
  $font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Raleway:400' );
  add_editor_style( $font_url );
  $font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Bitter:400' );
  add_editor_style( $font_url );
  add_editor_style( 'custom-editor-style.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

Then we include a separate stylesheet that sets the correct fonts:

/* custom-editor-style.css */
body#tinymce.wp-editor { font-family: Raleway, sans-serif; }

body#tinymce.wp-editor h1, body#tinymce.wp-editor h2,
body#tinymce.wp-editor h3, body#tinymce.wp-editor h4,
body#tinymce.wp-editor h5, body#tinymce.wp-editor h6 { 
    font-family: Bitter, sans-serif;
}

And that’s basically it for the changes I made.