Cover is a content-driven blogging theme for WordPress. Built on top of Automattic’s _s (Underscores) and bundled with Font Awesome, Cover allows you to focus on your writing. There are no sidebars to mess with, just a single column view of your content.
Cover is designed for any size screen. No matter the device, Cover always looks beautiful.
Drawing special attention to featured images, from the homepage to posts, category archives to pages, your blog is made uniquely yours. Of course, you don’t have to use images. Cover’s clean typography lets your writing stand on its own.
When you use a featured image in Cover, it displays as a background image behind the title. Images taller than 600 pixels will be displayed full-screen.
Cover is bundled with Font Awesome, allowing you to include any of its icons on any post or page.
Cover puts your content first, exactly where it should be. But that doesn't mean you can't have widgets and menus, and that's where the overlay comes in.
The overlay is a full-screen menu and widget display. You can define two menus (a regular one and a social media one) and as many widgets as your little heart desires. You can also put a social menu in the footer.
So, about those social menus. All you have to do is create a menu with links to your favorite social media accounts, and Cover will do the rest. It will detect the URL of the site in question and display the appropriate icon, courtesy of Font Awesome.
Supported sites:
- CodePen
- Dribbble
- Flickr
- GitHub
- Google+
- RSS
- Soundcloud
- Tumblr
- Vimeo
- WordPress
- YouTube
If you would like to request support for a site's icon, please raise an issue. Or create a pull request and add it yourself!
Cover was built from the ground up with Aesop Story Engine in mind. Break out of the content area with full-width components like images, galleries, maps, and more.
Automattic's Jetpack plugin comes packed with modules for any theme to use, but Cover is designed to work nicely with these:
-
Site Logo
In the Customizer, you can not only set the site title and tagline, but also a site logo. You can enable and disable any combination of these three options. -
Featured Posts
In the Customizer (again), you'll find the option to assign a specific tag to featured posts (the default is "featured"). Tagging a post will give it a special place on your blog's home page: it's displayed larger than the normal post listing, with its featured image displayed prominently behind it. Please note that Cover currently only shows a single featured post, even though you may tag more than one post as featured. -
Infinite Scroll
The Infinite Scroll module already works just fine, and we're not messing with that. But Cover allows you to have a social menu in the footer, so now Jetpack responds accordingly. If you have infinite scrolling enabled and no footer menu, scrolling down will load more posts, just as it's meant to do. But if you do have a footer menu, you will see a button to click in order to load more posts. (Otherwise, you'd never see the footer!)
Using the Color Posts plugin will allow Cover to match the header's color to the color of a post's featured image. Please note that this plugin requires Jetpack.
Cover includes six templates for use with YARPP: 2-across grid, 3-across grid, normal-width slider, full-width slider, comma-separated list, and bullet list.
Adding a featured video will make a large play button appear on the the post's cover image. Clicking this will show the video in full screen and immediately start playing. (Some mobile devices, such as iPhones and iPads, do not support autoplay.)
If you’re a developer and want to play around with Cover, the stylesheet is built using Sass. To that end, in the project you’ll find the /assets/sass
folder which holds all the components required to compile the stylesheet, including the bundled Font Awesome styles. (Similarly, the JavaScript used in Cover is compressed, but the uncompressed code is provided in the /assets/js
directory.)
You can download the latest official release from WordPress.org on your self-hosted site's theme admin page. Follow these steps to activate Cover:
- In your admin panel, go to Appearance > Themes and click the Add New button.
- Search for "Cover" and, once you've found the theme, click Install.
- Click Activate to start using Cover.
You can download the latest from GitHub. Follow these steps to activate Cover:
- Download the latest release.
- In your admin panel, go to Appearance > Themes and click the Add New button.
- Click Upload and Choose File, then select the theme's zip file. Click Install Now.
- Click Activate.
So you want to build the project yourself. Great! Please follow these directions.
-
How do I set the background image behind the post title?
When you use a featured image in Cover, it displays as a background image behind the title. Images taller than 600 pixels will be displayed full-screen. -
Can I change the font size?
Cover does not allow you to change the default font size. I recommend creating a child theme before making changes to the theme. -
I am receiving an error in the Customizer, what should I do?
Disable any caching plugins that you may have activated. -
How do I make links look like buttons?
A normal like looks like this:
<a href="https://wordpress.org">WordPress</a>
To make the link look like a gray button, add the
button
class, like this:<a href="https://wordpress.org" class="button">WordPress</a>
To make the link look like a button with the same link color as defined in the Customizer, add the optional
default
class, like this:<a href="https://wordpress.org" class="button default">WordPress</a>
If you see something wrong, or you want to improve on what I've got here, feel free to submit an issue or create a pull request.
Cover is GPL v2.0 or later.
Image used in screenshot.png - https://unsplash.com/photos/1uxV8fAfhVM/download by Luke Chesser
License - http://creativecommons.org/publicdomain/zero/1.0/
All other resources are licensed as follows:
- Font Awesome - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- Headroom - MIT - https://github.com/WickyNilliams/headroom.js/blob/master/LICENSE
- Unslider - WTFPL - https://github.com/idiot/unslider/blob/master/readme.md
- jquery.event.move - WTFPL - http://www.wtfpl.net/txt/copying/
- jquery.event.swipe - WTFPL - http://www.wtfpl.net/txt/copying/
- Vimeo player.js - https://github.com/vimeo/player.js/blob/master/LICENSE.md