peiche / cover

Simple WordPress theme focused on content.

Cover

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.

Features

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.

Full-width featured images

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.

Scalable vector icons

Cover is bundled with Font Awesome, allowing you to include any of its icons on any post or page.

Put widgets in their place

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.

Social menus

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
• Facebook
• Flickr
• GitHub
• Google+
• Instagram
• LinkedIn
• Pinterest
• RSS
• Soundcloud
• Tumblr
• Twitter
• 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!

Recommended Plugins

Aesop Story Engine

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.

Jetpack

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!)

Color Posts

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.

Yet Another Related Post Plugin

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.

Featured Video Plus

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

Built with Sass

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

Installation

WordPress.org

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:

1. In your admin panel, go to Appearance > Themes and click the Add New button.
2. Search for "Cover" and, once you've found the theme, click Install.
3. Click Activate to start using Cover.

GitHub

You can download the latest from GitHub. Follow these steps to activate Cover:

1. Download the latest release.
2. In your admin panel, go to Appearance > Themes and click the Add New button.
3. Click Upload and Choose File, then select the theme's zip file. Click Install Now.
4. Click Activate.

Building

So you want to build the project yourself. Great! Please follow these directions.

FAQ

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

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

3. I am receiving an error in the Customizer, what should I do?
   Disable any caching plugins that you may have activated.

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

Contribute

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.

License

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

cover's Issues

Post Listing Style

In customizer -> Cover View Options, under columns it reads:

Applied when Cover View Options -> Post Listing Style is set to Grid.

But my only Listing styles are Minimal and Card- I am guessing Card = Grid ? Just trying to make sure I have not missed a style.

Page scrolls when overlay is open

The page still scrolls with a mousewheel when an overlay (either search or menu) is open in Chrome, even though the top-level element <html> has overflow: hidden applied.

Manage version number via Gruntjs

Currently the version number is listed in 3 files: bower.json, package.json, and /sass/style.scss (which is compiled to style.css). Ideally, upping the version number would be a change to a single file, not multiple files.

Missing 1.5.6?

The changelog is at 1.5.6, but you updated packages and such to 1.5.6.1. Perhaps you skipped a beat locally?

https://github.com/peiche/cover/pull/36/files#diff-0a08a7565aba4405282251491979bb6bL3
https://github.com/peiche/cover/pull/36/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L3

Manual excerpt is not overriding "read more"

The theme currently uses the "read more" before the manual excerpt. Change it so that the manual excerpt is used first.

Trying to get property of non-object in ... inc/template-tags.php on line 61

Hi,

I'm getting this entry in my server log when I open the latest post in single-post view:

Trying to get property of non-object in [...]/wp-content/themes/cover/inc/template-tags.php on line 61

It looks like the reference to $next->ID on said line is causing this; there's no next post from the newest, obviously. There is a test for ! $next && ! $previous on line 51, but I'm guessing the block generating $next_img_array for next_post_link should also be wrapped with a separate test for the existence of $next, to suppress the error.

Customizer conflict

Upon working with Cover in the customizer, I received an error notice and was not able to do any further customizations. After some time in FTP, Git, and MySQL, it seems like the error is coming from Cover. Very strange.

Update to Headroom.js 0.8

Waiting on this issue.

Text domain

content-none.php displays "_s" as text domain. Change to "cover" text domain.

Featured image now overlays over posts

After last update, the featured image now sits over the front page and hides the top stories. It should push content beneath it. Affects all devices.

Screen grab: https://goo.gl/photos/hsND4Geiat3F8DKn9

Test ticket from Code Climate

Remove unused hooks

Remove instances of do_action() hooks.

Issue with Color Posts?

Hi,

Sorry to bother you once again. Today, we started getting this error message at theferret.scot

Have disabled Color Posts in the interim.

Warning: extract() expects parameter 1 to be array, string given in .... public_html/wp-content/themes/cover/inc/color-posts.php on line 22

Your help is really appreciated.

Thanks,

Al

Character module only displays image and name, no caption

See https://twitter.com/joisigurdss/status/710488468867125248

Parallax galleries not working on mobile after latest update.

After latest update parallax galleries don't seem to display correctly - or fall back to a full static image - on mobile.

Example: https://theferret.scot/resistance/

Extra margin on infinite scroll

There is top-margin for the first .hentry block in subsequent infinite scroll pages.

Featured image margin

Since updating theme to latest version, there's an issue with the featured image. On desktop, whitespace has appeared on the left margin, which I can't see how to get rid of using CSS.

Here's a screen grab. It makes no difference whether I use "old" cover-featured.php code which retains the excerpt display or the latest version of cover-featured.php

https://goo.gl/photos/JXDHxhDFxfDZcYkc9

All help much appreciated.

Curious on file name

Is GruntFile.js intended to be camel cased?

hentry:first-of-type margin missing in SCSS files

Hi,
Thanks for great theme.
I'm trying to build my custom version from SCSS files. It's almost done. :)
But after checking with original version (downloaded from wordpress.org), I figured out that the space between first post (when there is no featured post) and header is missing.

Would you put complete styles in these scss files?
Thanks.

Test ticket from Code Climate

Captioned image with alignnone class aligned with screen left instead of content left

Steps to reproduce

Add an image to a post, type in a caption and set alignment to 'None'.

What I expect to happen

I'd expect the captioned image to be left-aligned with the main content column's left, in line with <p> elements.

What happens

The image is left-aligned to the left edge of the screen. My attachment is a screenshot of a post with one uncaptioned and one captioned alignnone image.

Crash bug in Aesop Story Engine Video component on IE11

Using the ASE video component in a post or page crashes IE11 in Windows 7.

Also see this issue: hyunsupul/aesop-core#313

Font facing must be translatable

cover-404.php line 9
404.php line 20

https://codex.wordpress.org/I18n_for_WordPress_Developers

Default Gravatar Broken Icon in Header

I'm not sure the default images for user w/o gravatar is broken URL; see as an example:

https://certificates.creativecommons.org/2016/04/help-us-build/

where the code for the author image is:

get_avatar( get_the_author_meta( 'ID' ), 35, 'avatar_default', 'Profile Picture for ' . esc_html( get_the_author() ) )

results in bad image URL for avatar http://i0.wp.com/avatar_default

whereas the code for the author in the bio

get_avatar( get_the_author_meta( 'ID' ), ( is_author() ? 120 : 80 ) );

works fine.

Fix infinite scroll behavior

Make Jetpack's infinite scroll behavior smart enough to know whether or not a social media menu is defined for the footer.

Syntax error in /inc/template-tags.php

Error encountered in WP theme review:

Parse error: syntax error, unexpected '[' in C:\Program Files (x86)\Ampps\www\themereview_dev\wp-content\themes\cover\inc\template-tags.php on line 60

Social sharing icons not aligned correctly

First off, thanks for an awesome theme. It's exactly what I've been looking for.

I am having a bit of an issue with the Jetpack social sharing icons and WordPress like button not correctly aligned. instead of being aligned with the left-edge of the content in a post, they both float to the left side of the screen. I've tested this in Chrome, Firefox and Edge. I've attached a screenshot, and here is a link to a post if you have second to check out . Scroll to the bottom and you'll see the icons out of alignment.

Appreciate any help. I've got some basic CSS skills, but can't seem to hack this back into alignment.

Jetpack infinite scroll paging conflict

When the Jetpack plugin's infinite scroll paging is enabled, both the default WordPress post paging and the Jetpack paging are visible.

Change or make optional comment nesting behaviour

Child comments are hidden by default - where comments numbers are relatively limited conversations would be clearer if the conversations were visible in full.

I have tried removing the relevant lines from cover.js - which has the desired effect, but with the unacceptable by product of removing the close buttons from the menu overlays.

Is there any other way of toggling this behaviour - and if not, could it be considered as an option in a future release.

Thank you

Galleries broken

Hi,

Recent upgrades of Cover and/or Aesop Story Engine seem to have broken something. None of the Aesop components are displaying full width. Example here

Really love this theme, and we depend on it, so get in touch if you need any help.

Syntax errors

Handle image arrays in two lines instead of one. This apparently breaks in some versions of PHP.