Whipping WPExplorer’s Blogger Template into shape

I recently switched to WPExplorer's Bogger Template, because it is simple and focused on the articles. What's not to love? The main features include:

  • Blog-focused (hence the name)
  • Infinite scroll
  • Responsive
  • Easily adjustable.

But there is still a lot to do to whip this template into shape. To help you out, I've created this post.

Clickable mobile menu

When the site is opened on a mobile or a small window, a mobile menu is shown. Unfortunately it is not clickable on a "normal" computer, because it only reacts to touch events, fortunately this is fixable. Open up js/global.js and add the following after line number 20:

$('#navigation-toggle').click(function(){
 $.sidr('toggle', 'sidr-main');
});

I like my menu's to be fixed on the top, so the user is always able to access it. Open the style.css and add the following to make your top navigation stick:

/* navigation should be fixed */
#site-navigation-wrap {
 display: block;
 top:0px;
 position: fixed;
 z-index:2;
 right:0;
 left:0;
 transition: padding 0.2s linear;
}

/* render nice little shadow */
#site-navigation-wrap:after {
 display:block;
 content: "";
 height: 1px;
 position: fixed;
 top: 3.4em;
 left:0;
 right: 0;
 z-index: 1;
 -webkit-box-shadow: 0px 0px 8px 2px #000;
    -moz-box-shadow: 0px 0px 8px 2px #000;
         box-shadow: 0px 0px 8px 2px #000;
}

/* when the menu is open, move the menu button */
.sidr-open #site-navigation { padding-left:320px; }

/* keep some space on top of the content */
#wrap { padding-top:4em; }

/* compensate for admin-bar */
.admin-bar #site-navigation-wrap{ padding-top:32px; }
.admin-bar #site-navigation-wrap:after { top: 80px; }

Cosmetics

Most of the time styling is a matter of opinion and taste. Here are my modifications to the theme. You can copy them and add them to style.css:

/* make heads a tat less spacious */
h1, h2, h3, h4, h5, .site-text-logo a { letter-spacing:-0.05em;  }

/* justify text by default */
.entry { text-align:justify; }

/* some title are too big, when rendered on two
 * lines, it "feels" like the 2nd line floats:
 * decrease line-height; */
.loop-entry-title { line-height:1.1em; }

/* no bottom margins, 1 line top margin */
.entry h2, .entry h3, .entry h4, .entry h5 { margin-bottom:0; margin-top: 1em; }

/* 2 lines for an h2 */
.entry h2 { margin-top: 2em; }

/* remove space underneath posts */
.entry-footer{ margin-top:0; }

/* show a "hand" cursor, so user knows het can click */
.clickable{ cursor: pointer; }

/* help user to make the text darker on hover */
.clickable:hover { color:#000; }

/* red arrow at the end */
.clickable .read-more { color:#F00; padding-left:0.5rem;}

/* animate the read-more icon */
.clickable:hover .read-more { padding-left:2.5rem; transition:0.5s ease padding-left; }

Getting rid of the green

The theme uses a light-green color for emphasis. You might want your own color. Just open up style.css and replace #49BA86 with your desired color. Need a cool color scheme? Check this color picker by Adobe.

Fixing post classes

This theme focuses on blogs and already does a good job, but there are some little enhancements will make it even better. I like to have the categories and tags as css classes on my posts. In order to do so, add the following to your functions.php:

// add category nicenames in body and post class
function add_post_categories_as_classes($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
    return $classes;
}

add_filter('post_class', 'add_post_categories_as_classes');

Next open up single.php and change the article tag into:

<article <?php echo post_class('single-post-article boxed clr') ?>>

The post_class method is already used by the home page.

Clickable articles without "Read more..."

I'm not a big fan of "Read more...", because users expect the articles on the homepage to be navigable; excerpt or not. Open up content.php and search for a div with the class loop-entry-content. Replace this div with:

<div class="loop-entry-content entry clr clickable" 
     onclick="window.location = '<?php echo esc_attr(the_permalink('echo=0')); ?>';" 
     title="Read <?php echo esc_attr( the_title_attribute('echo=0')); ?>"
>

Next, we need to open up the style.css and add the following styling:

/* show a "hand" cursor, so user knows het can click */
.clickable{ cursor: pointer; }

/* help user to make the text darker on hover */
.clickable:hover { color:#000; }

And finally edit the settings  of the template at Appearance / Customize / Theme Settings and uncheck the Read More Link check box.

Sometimes I like to create multi-page posts. I like them to have previous and next buttons like this:

Paging

To get them, open up single.php and remove the current paging by removing the call to wp_link_pages.

Scroll to the div with class entry and change it into:

<div class="entry clr">
 <?php the_content(); ?>
 <?php wp_link_pages(array(
     'before' => '<p class="post-pagination">',
     'after' => '</p>',
     'next_or_number' => 'next_and_number', # activate parameter overloading
     'previouspagelink' => __('<i class="fa fa-arrow-left"></i> Previous'),
     'nextpagelink' => __('Next <i class="fa fa-arrow-right"></i>'),
     'pagelink' => '%',
     'link_before' => '<span class="page-link-number">', 
     'link_after' => '</span>',
     'echo' => 1 )
 ); ?>
</div><!-- .entry -->

Next, open up style.php and add the following CSS:

/* gets rid of white space issues */
.post-pagination{ font-size:0; clear:both;}

/* style both link and current page */
.post-pagination > span,
.post-pagination > a {
 color:#777;
 font-size:0.8rem;
 border:solid 2px #EEE;
 display:inline-block;
 padding:2px 8px;
 margin-right:2px;
}

/* arrows should be a little bit higher */
.post-pagination a i{ vertical-align:middle; padding-bottom:2px; color:#BBB; }

/* hover effect */
.post-pagination > a:hover { color:#000; border-color:#000; text-decoration:none; }

/* red arrow on hover */
.post-pagination a:last-child i, .post-pagination a:hover i { color:#F00; }

/* current page style */
.post-pagination > span { border-color:#BBB; }

Widgets

I love the way the widgets are used by this theme. Their color is lighter, so they don't scream for the users attention. But there are some minor modifications that can be done. All style can be added to the style.css file.

Recent

Some of my blog titles are quite long, just use some CSS whip them into shape:

/* renders a nice lines between items, makes it easier
 * to distinguish items when some are multi-line */
.widget_recent_entries li+li {
 margin-top:0.075em;
 padding-top:0.075em;
 border-top:solid 1px #EEE;
}

/* when links are multi-line and a line-height is used
 * the area between the lines might not be clickable.
 * Solve it by displaying the whole area as inline-block */
.sidebar-widget li a { 
 display:inline-block; 
}

Archive

This widget uses by default a hover with a background, while other widgets (like 'recent') use a hover-color. I like a consistent theme, so I commented out lines 171 and 172. This will restored the "normal" hover.

I like my search box to show the text italic. That's why I added the following to the style.css:

/* search widget */
.sidebar-widget .searchform #s { 
 font-style:italic; 
}

I love the implementation of the social media links in the top. It's both elegant and smart. But I was missing Github. It is super simple to add. Open up functions/sociallinks.php and goto the function wpex_social_links. This function has an array with social media platforms. Just add github as another array. This will give you a Github setting in your Theme Settings. It will render the right icon out-of-thebox.

Open in new window

The social media links should open in a new window and have a no-follow attribute. Open up functions/header-aside.php. Line 22 renders the social media links, change it to:

<a target="_blank" 
   rel="nofollow" 
   href="<?php echo get_theme_mod( 'wpex_social_'. $social_option ); ?>" 
   title="<?php echo $name; ?>"><span class="fa fa-<?php echo $icon; ?>"></span>
</a>

Get some fav icons

You might want to add some fav icons for the various devices. I you don't have an icon - like I had - just get one from IconMonstr. Next you can go to this Fav Icon Generator website to generate the icons from the source. Dowload the icons and put them in the root of your blog. Next go to the theme and open up header.php and add the following before the </head>:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#000000">

The theme-color meta tag will adjust the color of your address-bar on Android devices. I've chosen black, as my menu is black as well:

ColorTheme

You might want to add Open Search to your website:

Open search allows website to be searched by the browser.

It's quite simple. Modify this opensearch.xml and add it to the root of your website:

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>KeesTalksTech</ShortName>
  <Description>Search the Tech Blog of Kees C. Bakker</Description>
  <Url type="text/html" method="get" template="https://keestalkstech.com/?s={searchTerms}"/>
  <Image width="16" height="16">https://keestalkstech.com/favicon.ico</Image>
  <InputEncoding>UTF-8</InputEncoding>
  <SearchForm>https://keestalkstech.com/</SearchForm>
</OpenSearchDescription>

So, that's it. Let me know if you have any other ideas about changes.

expand_less