Featured images: too much of a good thing

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.

Reducing duplicity in the homepage loop while using the ephemera widget on the twentyfourteen child theme

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

How I successfully moved my WordPress Multisite Network to HostGator from 1and1

Just in time for Christmas, I finished migrating brandonmoeller.com from 1and1’s webservers to Host Gator, a Houston-based web hosting company that was running a great deal on all of its hosting plans for Black Friday last month. (I’ve hinted before at some of my frustration with 1and1.)

I jumped on that, saving an estimated 60 percent of web hosting costs over the next two years.

It’s a move I’ve been meaning to make for a long time, as I’ve steadily grown more frustrated with 1and1’s occasional but not frequent downtime and the resources my shared web hosting plan provided. I’ve been with 1and1 since 2004, I believe, when I signed on to a bargain of a deal of the first year or two being free. That’s back when they were entering the web hosting market here in the states.

I don’t have a lot of bad things to say about 1and1, but I was eager to leave for a plan that uses cPanel (another Houston-based company) and that will allow me to more adequately scale my web resources as I need to.

Of course, after purchasing, I discovered that there are plenty of discussions out there about Host Gator’s performance, the reputation of its new owners who are buying out a lot of the key players in the market, and its emphasis on dirt-cheap shared web hosting and loud marketing efforts.

But a bargain is a bargain. I’ve come to love a good bargain.

And the exercise of moving enables me to keep my site in shape so I can move next time there’s a good bargain and I’m out there looking. We’ll see how this goes.

And honestly, folks — so far, so good. HostGator has been a reliable solution that hasn’t failed me or frustrated me yet. I’ll keep you posted. This post and this site is not for sale.

Migrating My WordPress Multisite Network to HostGator

While transitioning this site from 1and1 to HostGator, I found that exporting the MySQL database and importing it at the new host’s phpMyAdmin didn’t work for me. I did this with a manual install of WordPress’ core files and changing my .htaccess and wp-config files to reflect the newly imported database, and in the process, reading this page on WordPress.org over and over again a thousand times.

I even pored over HostGator’s support docs, including this page specific to WordPress MU.

So, I started over and used the WordPress’ admin panel’s export function and added the import plugin to a brand-new install of WordPress that was installed using Fantastico, a script one-click-or-so library that allows HostGator (and other web host users) to quickly install an optimized version of WordPress on their web host’s server. This worked much better, but as such, all of my photos are no longer in the Media Library.

No database, No Media Library

Which meant that any posts that contained a photo gallery created by the media library had to be rebuilt from my computer’s hard drive archive, as the media library no longer recognizes all the photos and the unique IDs they were given when originally installed in the previous database. Lucky for me, I only had to do this three times, as I don’t typically use WordPress’ built in photo gallery feature, instead, opting to use Picasa Web Albums (Google+ Photos) instead. I have a lot of photos. Way back when, I wanted to pick a photo solution that was future-proof, though — heh — I doubt one exists.

They are still all on my site because I was careful to ensure the paths to them didn’t change as I uploaded all of my images and other wp-content goodies via FTP.

In retrospect, I think this was a good decision because it allowed me to start my database, essentially, anew as well as WordPress’ core files as well.

WordPress is great because its team of expert developers at Automattic pride themselves on backward compatibility. However, after time, a WordPress blog that has been around forever seems to be weighed down by past artifacts that are no longer needed, or at least that’s my inclination.

New multisite upload file structure

Another stumbling block I came across was content found on my network subsite.

For my Hire Me site, which is its own WordPress “site” as part of my multisite installation, the way assets are filed in the directory structure changed with one of the more recent versions of WordPress. Since my old multisite network on my old server was installed before this change, WordPress’ backward compatibility features kept everything in the old file structure — and it just worked.

But migrating to a new installation that didn’t know that, my images on my portfolio page were no longer working when I created a new site in my new multisite network, and imported it in.

Using wordpress.org as a resource, I was quickly* able to discover what happened (a change in the Uploaded File Path), change the structure of my images, and then go in and alter every IMG tag to reflect the new file structure, then it worked.

But I was really glad I didn’t have to do this on thousands of pages on multitudes of sites within the network. Then, I’d likely have to use a database search and replace tool like Database Search and Replace Script in PHP from interconnect/it. I did use this tool on my 1and1 server to change the domain name and site URL to another one so I could compare the old version with the new, once my domain name had propagated.

* Once I discovered the problem wasn’t about my DNS settings of my domain propagating to Hostgator’s nameservers, an incredibly slow process thanks to 1and1 and their inability to offer tools like setting TLD to speed it up, alas – another story. 

Conclusion

Moving is never easy. It requires attention to detail, and backups, backups, backups. Make sure you back up your database via phpMyAdmin first, then export your WordPress blog’s XML file via Tools -> Export second, then make a back up of every thing in your wp-content folder before you even begin shopping for a new web host.

Then, when you finally make a decision and purchase a new space, then make another back up.

You can’t have too many backups.

Once you have a new web hosting provider, and you’ve changed the nameservers of your domain name and added your domain name as an add-on domain [This is how cPanel does it; make sure when you’re finished you fix its need to create subdomains off your main domain by redirecting the subdomains (for example: brandonmoeller.mymaindomain.com) to the proper domain, but this is another issue], then and only then try importing your MySQL database. Maybe it will work for you. It should — I really can’t explain why it didn’t work for me, especially considering I was keeping the same domain name and everything.

But since it didn’t work, I think it allows me to keep my database more slim and trim because my previous entries in the Media Library no longer exist.

One of the immediate benefits I’ve found with my new web hosting home at HostGator is that I can now upload larger images into my media gallery, previously, I was capped at a very laughable 1 MB (though, it did force me to watch my page weight).

What’s next for BrandonMoeller.com?

As we approach a new year on a new host, I think now is as good a place as any to detail some plans for this site in the coming year.

  • New Twenty Fourteen child theme for the new default theme that ships with WordPress — And this time, I hope to share it with the community by uploading it to wordpress.org’s theme repository. Get a sneak peek at it as I develop it.
  • More long form articles like this one aimed at sharing what I have learned about WordPress and web development in general during my time hacking away at sites for fun and profit since 1997.
  • More links to other articles that have helped me learn.
  • More, more, more (Don’t want to commit to all the crazy ideas I have right now.)

New color palette, new Genericons and goodbye chat post formats

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:

spine-lower-swatch50-more

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:

genericons
Standard, aside, image, gallery, video, status, quote, link, art (chat), audio

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

today-screenshot

Thoughts?

Latest News for Bauer College launches

Previously called The Ticker, the new theme for the C. T. Bauer College of Business public relations blog Latest News launched today.

The new theme is actually a child theme of Drew Morris’ Foundation, for WordPress theme, which is a starter theme based on Zurb’s Foundation 4.0.

It’s expected that we’ll cross the 600 posts-mark this year on Latest News. So when designing this theme, it was important to ensure that previous posts’ featured images work as well as new posts that now use the more modern standard of WordPress’ “featured image” function. The previous methods of displaying the thumbnail image were to hide an image (yeah – display: none inline CSS) for a javascript to render or a custom field with a URL; neither solution was very much fun. But with a few lines in the functions.php file, backward compatibility was ensured.

It was also essential that the new theme match the design and spirit of the newly launched redesigned Bauer website.

Another clear goal of the project was to improve the sharing buttons and increase the ease of conversation.

Old

Here's what the old theme's homepage looked like.
Here’s what the old theme’s homepage looked like.
Here's what a sample story used to look like.
Here’s what a sample story used to look like.
Here's what comments used to look like.
Here’s what comments used to look like.

New

Here's what the new theme's homepage looks like.
Here’s what the new theme’s homepage looks like.
Here's what a sample story looks like.
Here’s what a sample story looks like.
Here's what comments look like.
Here’s what comments look like.

Getting WordPress for Android to work with 1and1

I’ve been stumped the last few days, trying to figure out why I was unable to update my self-hosted WordPress blog hosted on a medium-tier shared hosting space at 1and1 … it was just not working with the Android app.

It used to work. Back when I had a smartphone, I used the Android app a few times to post to WordPress … but it’s been awhile since I wanted to do it and now that I have the new Nexus 7.2 tablet, I thought I’d give the always-improving Android WordPress app another shot. But I’ve read that with WordPress 3.5, there was a change in the xml-rpc mechanism that WordPress uses (for instance, admins can no longer toggle it on or off from the control panel) and now that WordPress version 3.6 is out, who knows – but, the point is, it no longer worked for me.

After trying everything else it seemed — messing with the .htaccess and php.ini files, re-installing WordPress, reinstalling the Android app, etc etc — finally, I tried something that worked.

I renamed my xmlrpc.php file and uploaded this plugin, modified it, then activated it.

Rename XMLRPC (Jorge, daniloercoli and Automattic) y’all are my hero. According to the official WordPress Android app’s help page, excerpted below, this is likely my host’s fault.

My Host Blocks XML-RPC Access! How do I fix that?

Needing someone or something to blame when things go wrong, I’m blaming you, 1and1 – and it’s just about the final straw and I know I’ve said that before. But this, on top of another problem I’ve been experiencing on this WordPress installation that prevents me from uploading an image bigger than 1MB (yes, I know! What year is it?) makes me wonder if maybe it’s just not time to start over, somewhere else.

Pack up the database, migrate it all over and move the domain registrar and everything. I’ve been with 1and1 for almost ten years now, but maybe it’s time to move on up and leave the Wal-Mart of webhosts.

I remember the last time I had to rebuild my WordPress database, when I created this MultiSite version. I’m pretty sure it took all weekend, but that was years ago and I didn’t know then what I know now. Knowing more now means it will likely take twice as long.

Anyway, I wanted to put this out there in case anyone else with 1and1 is suddenly finding they have trouble publishing to their blog via the great apps that now exist to make the WordPress platform better than ever.

Montessori House for Children website launches

I’m proud to announce the recent launch of the Montessorihouseforchildren.com website, a website for a local school serving students up to nine years old.

I was tasked with migrating the site from an outdated Drupal installation to a state-of-the-art responsive WordPress site that the staff of the school can maintain themeselves.

The new website allows teachers to update news about their classrooms and requires parents to sign in before accessing it, protecting the privacy of the students. Parents are also encouraged to sign up for e-mail updates which is powered by RSS Mailchimp campaigns to send parents emails the day following a new post about the classrooms they’re interested in.

It also features a prominent call to action button that encourages prospective parents to fill out a contact form to schedule a visit at the school, which has been reported to be very effective in driving new enrollment.

Before

via archive.org
via archive.org

After

circa Dec. 2013
circa Dec. 2013