Posts

This theme focusses on blogs and already does a good job, but there are some little enhancements will make it even better.

Fixing post classes

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 navigatable; 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.

Gettin’ some cool page links

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; }