Collections

$79

By The Theme Foundry

collections-banner

Share your world.

Photos. Video. Music.

We built Collections for sharing. Post an article. Upload a video. Share your favorite music from Rdio, Spotify, or SoundCloud. Each content type has its own unique handcrafted style. We even included subtle animations that will help breathe extra life into your content. Posts are automatically organized and presented neatly on your homepage, making it easy to browse and enjoy your website.

collections-speed

Ultrafast browsing.

Performance redefined.

Collections feels and responds like an application, not a website. We started completely from scratch, and engineered the theme around an all new lightning fast Backbone powered infrastructure. Website content is instantly pulled in with JavaScript, sidestepping the expensive overhead of a full page load. Everything feels fast and responsive. Click and you instantly see results. No waiting required.

collections-design

World-class design.

Handcrafted in Belgium.

Collections was designed by the incredibly talented Veerle Pieters. We worked closely with Veerle throughout the build process to ensure Collections stayed true to her vision. You can see her unique style shine through each and every pixel of the design. It’s a rare and special opportunity to have your website designed by one of the best in the world.

Help and additional information

If you need help with Collections be sure to read through the Collections documentation by clicking the Support button at the top of the sidebar on this page. You can also ask us questions in the WordPress.com Collections support forum.

Looking to buy Collections for a self hosted WordPress.org website? The Theme Foundry builds WordPress templates for WordPress.org and you can purchase the Collections theme for WordPress.org directly from their website.

Quick Specs (all measurements in pixels):

  1. Collections is a flexible-width, responsive design.
  2. Images and videos will scale to fit the viewing screen.
  3. Archive pages feature a main column width of 560px.
  4. Single post pages and standard pages display content at a width of 780px.

Learn how to set up the Collections WordPress theme.

Collections is a fantastic experience for you and your site visitors. Featuring your unique content is simple, and the user experience of browsing that content is fast and smooth. Below is a tutorial on how to make the most of your site with the Collections theme.


Introduction to Collections

At its core, Collections is about sharing different types of content. It leverages the post format functionality in WordPress to accomplish this. Collections supports the following post formats, each of which is intended to be used for a distinctive content type:

  • Standard – A normal blog post. This is the default format when you start a new post.
  • Aside – A brief blurb, shorter than a blog post, such as an anecdote or an intriguing thought.
  • Link – A URL to somewhere else on the Internet that other people should know about.
  • Quote – Someone’s words that are remarkable in some way.
  • Image – A single image from your media library or from an image sharing site such as Flickr.
  • Gallery – A group of images from your media library.
  • Audio – An audio file from your media library or a URL from an audio sharing site.
  • Video – A video file from your media library or a URL from a video sharing site.

Organizing the formats

Each post format represents a “collection”, with two special exceptions:

  • “Standard” and “Aside” posts make up one collection called “Articles”.
  • “Image” and “Gallery” posts make up one collection called “Photos”.

Each post format and the “collection” it represents has a distinctive visual style in the Collections theme, both when viewing individual posts and when viewing the “collection” archive.


A quick tour of the views in Collections

Homepage

The Homepage is an optional page template that showcases the latest post from each “collection”. Read more on setting up the Homepage below.

The Stream

The “Stream” view shows your posts in chronological order (newest at the top), regardless of which “collection” it belongs to. It is similar to the standard “posts” view of other WordPress themes. This view acts as the homepage if a static front page has not been set up.

Collection Archive

Each “collection” has an archive view that shows only posts that are using a correlated post format. For example, the Photo Archive shows Image and Gallery posts, and the Video Archive shows Video posts. Each archive has a distinctive visual style.

Single Post

Each post format has its own, distinctive visual style in the single post view.


Fast page loading

One of the really unique features of Collections is that it is built to act as a Single Page Application (SPA). This means that a website visitor can navigate through the site and view different content without their web browser ever having to load a new page, making for a fast, fluid user experience.

This feature can be turned off in the Theme Customizer.

Note: In browsers that do not support pushState, (notably Internet Explorer versions 9 and below), Fast page loading is not available.


Creating posts

Where Collections really shines is in how it features the specific type of content that makes each post format special. Some post formats require the content to be entered in a particular way so that Collections can recognize and extract it, others do not. Below are instructions for setting up each post format so that its special content can be featured successfully.

A note about Featured Images

Some of the post formats in Collections use featured images, and some do not. The formats that do use featured images are:

  • Image
  • Gallery
  • Audio
  • Video

The following formats do not support featured images, and will not display one even if set:

  • Standard
  • Aside
  • Link
  • Quote

Standard and Aside posts

Featured content: the post text.

Standard and Aside posts are created in the normal way: add a title, add some content, and publish! Aside posts are visually different from Standard posts, however: when viewing them individually or in the Articles archive, Aside posts do not display the title, because they are intended to be short, informal blurbs. Note, though, that the title is displayed in Stream view, so it is still important to add one!

On Standard posts, a “post signature” is shown at the bottom of the single view. The text in the signature comes from the “Display name publicly as” field in the profile of the author of the post. Here’s how to change it (assuming you are a site administrator):

  1. Navigate to Users → All Users and click the user you want to edit.
  2. Choose the desired option from the “Display name publicly as” dropdown, then click Update Profile.
  3. The options in the dropdown are derived from the “First Name”, “Last Name”, and “Nickname” fields, so if you don’t see the option you want, you’ll need to make some changes in these fields first.

Link posts

Featured content: a URL.

There are two ways to enter a URL that Collections will recognize:

  1. Add a plain URL or a hyperlink on the first line of content, by itself.
  2. Add a hyperlink somewhere within the text. The first hyperlink will be recognized and featured.

The featured URL will be hyperlinked to an icon at the bottom of the single post view.

Link post title

In addition to a URL, Link posts should have a descriptive post title, so that the posts can be differentiated in the Link archive view.


Quote posts

Featured content: a quote.

There are two parts to a correctly-assembled Quote post: the quote itself, and the quote attribution.

The quote

  1. Enter the quote text at the beginning of the post, starting on the first line.

The quote attribution

  1. If you only see one row of buttons in the visual editor, click the Show/Hide Kitchen Sink button to reveal the second row.
  2. Enter the attribution below the quote, preferably on a line by itself.
  3. Highlight the attribution and open the Styles dropdown from the second row of buttons. Select Quote Attribution from the dropdown.

Putting it together

  1. Highlight the quote text and attribution together, and click Blockquote in the first row of buttons.

You can add more content below the quote and attribution, and it will be kept visually separate, as long as it’s not inside the blockquote.

Quote post title

In addition to a quote, Quote posts should have a descriptive post title, so that the posts can be differentiated in the Quote archive view.


Image posts

Featured content: a single image.

There are several ways to include an image that Collections will recognize and feature:

  1. Set a featured image.
  2. Add a plain URL or a hyperlink to the image on the first line of content, by itself. This is the option to use for adding an image from an external source like Flickr.
  3. Insert an image into the first line of the post using the Add Media button.
  4. Simply attach an image to the post. (More info on this below)

Note: The image that Collections uses for the featured content will not show a caption.

Any images inserted into the content below the first line will remain in place and behave as in a normal post (including displaying captions).


Gallery posts

Featured content: a series of images.

There are two ways to include a gallery that Collections will recognize and feature:

  1. Insert a gallery into the first line of the post using the Add Media button.
  2. Simply attach images to the post. All images attached to the post will be included in the gallery. (More info on this below)

Note: The images that Collections uses for the featured content will not show captions.

Any galleries inserted into the content below the first line will remain in place and behave as in a normal post.

Gallery cover image

In the Photo archive view, a gallery post is represented by a “cover” image. This image comes from either the post’s featured image, or the first image attached to the post.


Audio posts

Featured content: an audio clip.

There are three ways to include an audio clip that Collections will recognize and feature:

  1. Add a plain URL or a hyperlink to the audio clip on the first line of content, by itself. This is the option to use for adding an audio clip from an external source like SoundCloud.
  2. Insert an audio clip into the first line of the post using the Add Media button.
  3. Simply attach an audio file to the post. (More info on this below)

Any audio clips inserted into the content below the first line will remain in place and behave as in a normal post.

Audio metadata

In the case that the featured audio clip has been uploaded to the media library, WordPress will extract any embedded metadata in the audio file (eg. from the ID3 tag in an MP3), including the song title, artist, and the album art. The song title will be displayed in lieu of the post title, and the album art will appear instead of the post’s featured image.

For audio clips that don’t have embedded album art, the album cover will use the post’s featured image, if available.


Video posts

Featured content: a video.

There are three ways to include a video that Collections will recognize and feature:

  1. Add a plain URL or a hyperlink to the video on the first line of content, by itself. This is the option to use for adding a video from an external source like YouTube or Vimeo.
  2. Insert a video into the first line of the post using the Add Media button.
  3. Simply attach a video file to the post. (More info on this below)

Any videos inserted into the content below the first line will remain in place and behave as in a normal post.

Video cover image

In the Video archive view, a video post is represented by a “cover” image. This image comes from the post’s featured image.


Attaching files to posts

Any time a file is uploaded to WordPress while creating or editing a post, it becomes “attached” to that post, regardless of whether that file is actually “inserted” into the content. Collections looks for these attached files in Image, Gallery, Audio, and Video posts as one of the ways to determine the special content to feature.

To attach a file to a post:

  1. Click the Add Media button above the content editor.
  2. Under the “Insert Media” heading, choose the “Upload Files” link.
  3. Upload the file as instructed on the screen.
  4. Once the upload is complete, you may close the Media screen by clicking the “X” in the upper right corner. There is no need to insert it into the content.

Collections will select these attachments in the order they were uploaded, starting with the oldest. To change the order:

  1. Click the Add Media button above the content editor.
  2. Under the “Insert Media” heading, choose the “Media Library” link.
  3. Below that is a dropdown showing “All media items”. Click this and select “Uploaded to this post”.
  4. Drag and drop the attachments into the desired order. The one farthest to the left will be the first one selected.

Image sizes

For reference, these are the image sizes used in Collections:

Homepage section background

Width: 756px
Height: 470px (these are the minimum recommended dimensions for Video featured images)

Image and Gallery single view

Width: 780px (this is the minimum recommended width for Image and Gallery images)
Height: variable

Image archive view

Width: 252px
Height: 252px

Gallery archive view

Width: 504px
Height: variable

Audio album cover (single and archive view)

Width: 450px
Height: 450px (these are the minimum recommended dimensions for Audio featured images)

Video archive view

Width: 378px
Height: 235px (note that the minimum recommended dimensions for this image are larger than this and are listed above in the Homepage section background)


Customizing Collections

Collections offers the ability to customize certain parts of the theme through the Theme Customizer. Changing these options is the easiest way to alter the theme. While you cannot customize every part of the theme with the customizer, the important optional features in Collections have been made available in the Theme Customizer.


Setting up the Homepage

By default, Collections uses the Stream view as the homepage. However, you can also use the special Homepage Template by setting up a static front page:

  1. Under Pages, select Add New to create a new page, or select All Pages to pick one that has already been created.
  2. Give the page a title, such as “Home”. Other content that you add will appear in the About Section.
  3. In the Page Attributes box on the right side of the screen, click the “Template” dropdown and select “Homepage Template”.
  4. Click Publish (or Update).
  5. Now, navigate to Appearance → Customize.
  6. Click the Front section, and choose “A static page” under “Front page displays”.
  7. Choose the page you just set up from the “Front page” dropdown. You can choose another page from the “Posts page” dropdown that will be the Stream view.
  8. Click Save.

Customizing the Homepage About section

The Homepage Template includes an About section at the bottom. It has a search box, a link to the Stream view, and a place to add a welcome message or other content. Next to this content you can include a small avatar image that is styled the same way as the comment section avatars:

Add a welcome message

  1. Edit the page that has been set up as the homepage.
  2. Enter your desired content into the WordPress content editor.

Add an avatar

  1. Edit the page that has been set up as the homepage.
  2. Set a featured image.

Disabling the Homepage About section

  1. Navigate to Appearance → Customize.
  2. Click the Theme section, and check the box next to “Hide the Homepage About section”. The About section should disappear in the preview pane.
  3. Click Save.

Disabling Fast page loading

  1. Navigate to Appearance → Customize.
  2. Click the Theme section, and check the box next to “Disable Fast page loading”.
  3. Click Save.

Footer text

Collections allows for the addition of arbitrary text in the footer of the theme:

  1. Navigate to Appearance → Customize.
  2. Click the Theme section.
  3. In the Footer Text input, enter the desired content.
  4. A preview of the footer text will be displayed in the preview pane.
  5. Click Save.

Note: Limited HTML can be used in the footer text area, including the following tags: a, abbr, acronym, b, blockquote, cite, code, del, em, i, q, strike, and strong. All other HTML tags will be stripped from the text. Not all HTML tags have been specifically styled for the footer and may require custom CSS.


Social profile links

Social profile links for Twitter, Facebook, Google Plus, Flickr, Pinterest, LinkedIn, and RSS can be added to your site’s footer.

To add a social profile link, follow these steps:

  1. Navigate to Appearance → Customize.
  2. Click the Theme section.
  3. Enter the full URL of the social profile into the relevant text box.
  4. A preview of the link will be displayed in the preview pane.
  5. Click Save.

Styles

Collections offers three custom styles that a user can add to post content. The styles are implemented via the Styles dropdown in the second row of buttons in WordPress editor. To reveal the second row, click Show/Hide Kitchen Sink in the first row.

Note

Note is a block-level style, meaning it will create a separate block of styled content from whatever text it is applied to.

To add the Note style, follow these instructions:

  1. Reveal the second row of editor buttons if it is hidden.
  2. Highlight a full paragraph of text.
  3. Click the Styles dropdown and select “Note”.

Quote Attribution

Quote Attribution is an inline style, meaning it will apply special styling to the specific letters you select, but won’t change the layout. This style has special meaning in the Quote post format.

To add the Quote Attribution style, follow these instructions:

  1. Reveal the second row of editor buttons if it is hidden.
  2. Highlight the name that you want to attribute to a quote.
  3. Click the Styles dropdown and select “Quote Attribution”.

Raised Cap

Raised Cap is an inline style that adds a stylized first letter to a paragraph. It is recommended that this styling is only ever used for the first letter in a post or page. Overuse of this styling in a single page of content can be confusing to the reader.

To add the Raised Cap style, follow these instructions:

  1. Reveal the second row of editor buttons if it is hidden.
  2. Highlight a single character in a paragraph of text.
  3. Click the Styles dropdown and select “Raised Cap”.

Custom Collections Avatar

To match the style of the theme, Collections adds a custom default avatar choice to the list of default avatars. Lovingly referred to as “Mop Top”, the default avatar blends perfectly with the theme:

To use “Mop Top” as your default avatar, follow these instructions:

  1. Go to Settings → Discussion.
  2. Scroll down to the Default Avatar section.
  3. Click the radio button next to the “Mop Top” avatar.
  4. Click Save Changes to save the settings.

Non-supported Features

Collections adheres to WordPress theme development best practices and emphasizes gorgeous design in lieu of some functionality. There are some features that may appear “missing” in Collections that were excluded to maintain the simplicity and speed of the theme:

  • Category and tag listings are exclude to give the theme a more personal touch as though a visitor is flipping through your own photo albums.
  • Widget areas are excluded in order to maintain a strong, purposely archive page.

Help & Support

If you’re having trouble getting your theme set up, head over to the support forum and we’ll give you a hand.


Looking for the self hosted WordPress.org version?

Browse our self hosted WordPress themes at The Theme Foundry website.