Category: BrandonMoeller.com

I like featured images. In moderation. But nothing about WordPress irritates me more than when themes display them … everywhere.

On the homepage is fine — in fact, it’s the only place I prefer to see them, in some kind of design element whether it be a slideshow or a grid of images that serve a functional purpose to show the readers the most important content.

But I don’t like clicking these links and then seeing the featured image again, above the headline of the post. That seems to be a popular place to put it, for most of the recent default themes. While creating my own custom child themes, it’s always one of the first things I change.

And I don’t like seeing it above posts that aren’t currently “featured” on the homepage or on other archive pages (categories, tags, month, etc).

Most of the recent WordPress default themes (twentyfourteen, twentyeleven, etc) display featured images in this way on default, with few if any controls built in allowing theme users to customize it.

As I’m developing my twentyfourteen child theme, I thought I’d share with you how I removed featured images from the eight content- templates.

The nine files you will want to re-create by duplicating them from the parent them into your child theme are:

content.php
content-aside.php
content-audio.php
content-gallery.php
content-image.php
content-link.php
content-quote.php
content-video.php

These files are the content templates, they control the structure of how posts are displayed, depending on their post format.

In the TwentyFourteen theme, each and every one of these post formats include the featured image before the headline of the post. I liked this behavior in the default theme TwentyTen, but that was back when the technique was new to me and it was at the very top of the page.

To prevent the featured image from displaying on these post formats, remove the following code from the second line of code of each of the files, right after the opening article tag.

<?php twentyfourteen_post_thumbnail(); ?>

That’s it! So simple, it makes you wonder why the default themes don’t come with a checkbox allowing one to quickly disable featured images from appearing above headlines in the single post page and archive pages.

How much do you hate featured image overuse? Tell me in the comments.

-OR-

Say something once, why say it again?

Step one toward a better WordPress twentyfourteen child theme

Today, I launched my new child theme for WordPress’ new default theme, twentyfourteen, which will be a running work in progress on this site likely for the next few weeks leading to the official initial release of it in the WordPress theme repository.

As I’m developing it, I will post here about new features and ways I’ve chosen to craft the theme to my liking.

Some of the first adjustments I have made include tweaking the width of the theme to display better at full width on my 17″ laptop screen and adjust the themes colors to a custom palette. But I’m not finished in these departments, so I will wait until I am completely satisfied before I elaborate more here.

Today’s adjustment focuses on adjusting the main loop of the theme so that it doesn’t repeat content found in the ephemera widget floated to the right of the main content. The ephemera widget has come with the last few incarnations of the default theme, and allows the user to display posts of a certain post format of their choosing … However, that content, on default, is also displayed in the main loop, which means the day you post a new post in that format, identical content will run side-by-side. It’s a shame that a solution to this problem isn’t offered in the default theme twentyfourteen, but below, find the solution I implemented by creating a functions.php file for my new child theme and adding the following code to it (between the opening and closing PHP tags, of course):

function exclude_post_formats( $query ) {
	if ( $query->is_main_query() && $query->is_home() ) {
		$tax_query = array(
			array(
				'taxonomy' => 'post_format',
				'field' => 'slug',
				'terms' => array(
					'post-format-link'
				),
				'operator' => 'NOT IN',
			)
		);
		$query->set( 'tax_query', $tax_query );
	}
}

add_action( 'pre_get_posts', 'exclude_post_formats' );

This function will exclude posts with the link post format from the homepage loop query, because I prefer to have those posts display in the ephemera widget floated to the right of the main content, and the duplicity is irksome. I learned how to do this by reading the article Modifying the default WordPress loop to exclude specific post formats by Jeffrey Barke.

Initially, I tried doing this by duplicating the index.php file from twentyfourteen, and then using an advanced taxonomy query to tell the homepage loop what to display by telling it what NOT to display (as suggested by Roy Scribner and Otto); but this didn’t work, because the twentyfourteen theme takes a different approach to doing this via the pre_get_posts action in the file inc/featured-content.php … so the above function that runs along side it works great in my new twentyfourteen child theme, and filters out the post-format-link posts while keeping the other query features of the parent twentyfourteen theme in tact.

As I’m continuing to alter the default WordPress Twenty Thirteen theme via my own child theme on this site, most of my concern up to this point has been focused on post formats.

Though I like Twenty Thirteen’s bold colors and diversity of styles and formatting for every post format, I knew I wouldn’t be happy until I made it my own.

Colors

I have taken the original child theme I was using called Twenty Thirteen Blue  and changed all of the colors — here is what I have most recently settled on, for now:

It’s such a large color palette because I wanted a distinct color for just about every post format.

Genericons

I’ve also added to the child theme’s CSS styles to ensure that every post format has its own Genericon, as selected from Automattic’s flexible icon font for blogs, which comes bundled with the Twenty Thirteen theme.

Here are the Genericons I am now using on this website:

Look for these Genericons on each post on the blog index pages and on the posts themselves. Find them near the article posted date.

To get each post format to display a different Genericon, I had to include variations of this CSS code in the stylesheet:

.format-chat .entry-meta .date a:before {
 content: 'f408';
 margin-right: 2px;
}

Not that chatty

I love WordPress post formats, as you can tell. It’s a great feature, and I can’t wait to continue to alter the template for each of these ten distinct taxonomies.

But I have no real use for the post format: Chat. I just don’t have any interest in sharing chats that I have with others on this blog, and if I did, I could still decide to select the Standard, Aside, Quote or Status post formats.

In its place, I wanted a different post format for Art. These types of posts will mainly contain images that are artistic, or — heh — at least not of the family or other usual subjects. Most, if not all, of the posts in this post format will be categorized as Art, though some posts in the art category may have different post formats like Aside, Image or Status.

To make this happen, I had to copy over one of Twenty Thirteen’s key functions concerning post formats and alter it in my child theme. Here’s the important part of what I came up with as I modified the twentythirteen_entry_date function:

if ( ! function_exists( 'twentythirteen_entry_date' ) ) :

function twentythirteen_entry_date( $echo = true ) {
if ( has_post_format( array( 'status', 'aside', 'audio', 'gallery', 'image', 'link', 'quote', 'video', ) ) )
$format_prefix = _x( '%1$s on %2$s', '1: post format name. 2: date', 'twentythirteen' );
else if ( has_post_format('chat') )
$format_prefix = 'Art on %2$s';
else
$format_prefix = '%2$s';

...

endif;

Where we are now

Thoughts?