Cover2 for WordPress

Introducing the new version of the Cover theme for WordPress.

Since roughly January 2014, Eichefam.net has been running on a WordPress theme called Cover. I wrote it from the ground up because I wanted a specific look and feel to the site, and the only way I could get it is if I wrote it myself.

I’ve learned a lot in the past two years, and I felt it was time for a rewrite. To that end, I am happy to introduce to you Cover2 1.0.

Cover2 is a replacement for Cover, but not really

Cover is versioned using Semantic Versioning, and as such, is still on 1.x. To introduce breaking changes (as Cover2 has, since it’s a complete rewrite), it would bump Cover up to 2.x. There aren’t a whole lot of people using Cover, as far as popular themes go (WordPress.org reports that it only has 300 or so installs), but the last thing I want to do is break their sites. So while Cover2 is intended to replace Cover, it won’t actually replace it for existing users. Thus, the new name and new project.

A larger emphasis on accessibility

The biggest change to the way the theme operates is probably the removal of Font Awesome. Admittedly, it is the easiest way to bring in a whole slew of icons for use in a website — we still use it for work — but I’m not convinced that it’s the best for semantic code or accessibility. (Yes, I know there are rebuttals. The cons of using a drop-in icon font still outweigh the pros, in my opinion.)

So instead of Font Awesome, Cover2 is actually using the SVGs used by Font Awesome. This way, the graphics are useable as icons, and screen readers can see them for what they are, instead of interpreting them as “unpronounceable.” (Or, if you’ve turned off font downloads, you’ll still see the graphics. Or… a bunch of other cases. Seriously, go read Tyler’s article.)

A simpler layout

Cover2 has less widget and menu areas than Cover. The social menu is only displayed in the overlay, not the footer, and the search overlay no longer contains any widget areas.

Larger text

Not only are headings much larger, but the body text of posts is bumped up from the default 16px to 20px. It’s not a choice that I think would suit every kind of site, but I like it for informal, story-telling blogs like this one.

Migration from Cover to Cover2

If, like me, you move from the old theme to the new one, there are some things to keep in mind. Cover2 still supports the Aesop Story Engine plugin, so all your existing components will continue to work.

Cover2 removes the option to display the post timestamp as relative (like “2 days ago”), so you will need a plugin for that. (That’s really plugin territory, anyway.) I recommend The Time Ago. It offers more options than most “relative date” plugins.

As I mentioned, Cover2 no longer uses Font Awesome. One benefit of having it available was that you could do things like this right in a post:

<i class="fa fa-heart"></i>

Due to dropping FA, those will no longer display anything at all. In order to fix this, you’ll need to install a Font Awesome plugin. I’m using Better Font Awesome, and it works just fine.

Feedback is welcome

Cover2 is open source. If you want to play around with it on your own, the project is available on GitHub. If you notice something is amiss, please don’t hesitate to let me know, either by raising an issue, sending me an email, or leaving a comment below or on the project page.

5 responses

  1. Very nice theme! Thanks for sharing!

  2. I just want to thank you for Cover, and have used it on two different projects with some minor mods for the front page:

    Creative Commons Certification project http://certificates.creativecommons.org/
    Networked Narratives (an open course) http://netnarr.arganee.world

    Looking forward to experimenting with the new version and the Aesop integration for a friend who wants to use it for online writing.

  3. izaaksom Avatar
    izaaksom

    Nice theme, thank you. Greetings from Mexico.

  4. Hi Paul. First of all: Awesome theme!

    I’ve discovered something … in inc/extras.php you’re using esc_url for the image url css (lines 164, 188, 203). If I use “Media Cloud by ILAB” and imgix, this function is destroying the image urls. So it’s better to use esc_url_raw.
    Should I make a pull request?

    Greetings from Switzerland :)

    1. Thanks for the kind words!

      Absolutely make a PR, if you’re so inclined. :)

Leave a Reply to forsandree Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related