Snap

$79

By The Theme Foundry

Snap theme screenshots

Showcase your work.

It’s never been easier.

Snap makes it simple to show off your work to your clients, customers, and fans. Quickly create a new portfolio item and include images, videos, and text. Then, use the portfolio page builder interface to drag, drop, and organize your projects. You can even create multiple portfolio pages to display different types of work.

Snap add some style

Add some style.

Make it your own.

Personalizing your new website should be fun. We’ve leveraged the built-in WordPress customizer, so adding your own background image or color is easy. On top of that, you can use the Custom Design upgrade to add a custom color scheme. Combine a custom color scheme with a custom background to give your website a truly unique look.

Snap home page

Curate your home page.

Your best work front and center.

Snap’s flexible home page introduces you and you work. There are three distinct sections: the featured slider section, for showcasing your best work or any important blog posts; the about section, where new readers learn about you and your business; and a grid section, where you can feature blog posts or portfolio items. You have complete control over each section and if you don’t set up the slider it will automatically be hidden.

Help and additional information

If you need help with Snap be sure to read through the 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 Snap support forum.

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

Quick Specs (all measurements in pixels):

  1. Snap is a flexible-width, responsive design.
  2. Images and videos will scale to fit the viewing screen.
  3. The featured slider should be at least 994 by 650.
  4. On single posts and the Default page template the main column maximum width is 651.
  5. On the Full Width page template the main column maximum width is 994.

Snap is a beautiful theme that can be used to display posts in different ways via the use of different templates and styles. This tutorial will guide you through how to set up the theme similar to our demo site.

The Homepage template

The “Homepage” template is designed to highlight your best and most recent work. As you can see from the demo site and thumbnail below, this template can have a stunning effect.

Screenshot of home page

The “Homepage” template is intended to be the main landing page for your website. We believe that this template gives the best representation of the user’s content.

The “Homepage” template is composed of three areas: Featured Area, Content Area, and Posts Area. Each of these areas can be set up to show different types of content, all of which is explained below; however, in order to get started, you must first set up a home page.

Make a homepage

To set up a home page for Snap, a page using the “Homepage” template needs to be designated as the home page:

  1. Add a new page titled “Home” from your WordPress dashboard.
  2. Choose “Homepage Template” in the Page Attributes box for the value of the Template dropdown.
  3. Save the page.
  4. Create a new page titled “Blog”, leave it empty, and publish it.
  5. Navigate to Settings → Reading.
  6. Choose “A static page” from the Front page displays option.
  7. Set the Front page to the page created in the first step.
  8. Set the Posts page to “Blog”.
  9. Save your changes.

Featured Area

The Featured Area was added to the theme to highlight the site’s most exciting content in a “big” way. This area can show one of the three following things:

  • Slider containing images
  • A single image
  • Nothing

If posts are designated to be in the Featured Slider, they will be shown in this area. If no posts are designated for the featured slider, and a Featured Image is set for the page, the image will be shown. Finally, if no posts are designated for the Featured Slider and a Featured Image is not set, nothing will be displayed in the Featured Area.

Featured Slider

The Featured Slider has the first priority in the Featured Area in the “Homepage” template. Whenever there are posts designated for the Featured Slider, a slider will be shown in the Featured Area. It will override any other content in the Featured Area.

To add a post to the featured slider, follow these steps:

  1. Go to Posts → All Posts.
  2. Click Edit to get to the “Edit Post” screen for the post you want to add to the slider.
  3. Find the Homepage Featured Slider meta box.
  4. Check the Show in featured slider box.
  5. Make sure you’ve set a featured image that is at least 994px wide for the post.
  6. Save the post.
If only one post is designated for the Featured Slider, it will be displayed as a single image since there are no other posts to “slide” to. This image will link to its related post.

Featured Image

In addition to showing a slider, a single image can be shown in the Featured Area. A Featured Image can only be shown in the Featured Area if there are no posts designated for the Featured Slider.

To setup a Featured Image in the Featured Area, follow these steps:

  1. Go to Pages → All Pages.
  2. Click the edit link for the page that is using the “Homepage” template.
  3. Click Set Featured Image, which is usually located in the lower right hand area of the screen.
  4. Choose an existing image or upload a new image.
  5. Click Set featured image.
  6. Save the post.

As long as you currently have no posts designated for the Featured Slider, this image will display at the top of the page.

The image used for the Featured Image in the Featured Area must be a minimum of 994px wide so that it fills the entire width of the theme on all devices. The height is flexible in this area and does not need to be a specific value.

Blank Featured Area

In the event that there are no posts designated for the Featured Slider and no Featured Image is set for the page, nothing will be shown in the Featured Area.

Content Area

The Content Area allows you to add arbitrary text to the left most column under the site header. Anything that you can put in the post’s content can be placed in this section. We recommend adding informative text that introduces your visitors to your website.

To add content to the featured slider, follow these steps:

  1. Go to Pages → All Pages.
  2. Click the edit link for the page that is using the “Homepage” template.
  3. Add content to the WordPress Editor.
  4. Save the page.

To set a “drop-cap” styling for this area like seen on our demo site, see the Styles section below.

We recommend not adding too much content to this area. If this column is too long, it will lead to an imbalance in the page.

Posts Area

The Posts Area can contain one of the following collections of posts:

  • A hand selected collection of posts and pages
  • Latest blog posts

If posts have been selected for the homepage, the selected posts will be shown in the Posts Area. On the other hand, if no posts are selected for the homepage, the latest blog posts will be shown.

Selected Posts

In order to show selected posts in the Posts Area, posts must be selected for the homepage. Selecting posts can be accomplished with the following steps:

  1. Go to Pages → All Pages.
  2. Click on the title of the homepage page.
  3. In the page edit screen, a metabox titled Selected Posts should be displayed. If not, try the following steps:
    1. Click Screen Options in the upper right hand corner of the screen.
    2. Check the box next to Selected Posts.
    3. Verify that the Page Template select box in the Page Attributes metabox is set to “Homepage Template”.
  4. The Featured Posts metabox shows a list of “Recent Posts”. Click a post to add it.
  5. The “Recent Posts” list only shows your 10 latest posts. To locate more posts, click the Search tab.
  6. In the input field, start typing the title of your posts.
  7. A list of posts matching the search will be displayed. Select the desired post by clicking it or using the down arrow and pressing enter.
  8. The post will be added to the “Current Posts” list.
  9. If you have 2 or more posts in the list, you can drag and drop them to order the posts.
  10. Save the page.

Latest Posts

By default, the blog’s latest post are shown in the Posts Area. If posts have been selected for the homepage, the selected posts will show instead of the latest posts. If selected posts are currently shown in the Posts Area, latest posts can be shown by following these steps:

  1. Go to Pages → All Pages.
  2. Click on the title of the homepage page.
  3. In the page edit screen, a metabox titled Featured Posts should be displayed. If not, try the following steps:
    1. Click Screen Options in the upper right hand corner of the screen.
    2. Check the box next to Featured Posts.
    3. Verify that the Page Template select box in the Page Attributes metabox is set to “Homepage Template”.
  4. In the Featured Posts metabox, posts will be displayed under the “Current Posts” header.
  5. Next to each post, click the “Remove” link.
  6. Once each post is removed and the “No posts currently associate with this page” notice is shown, save the post.

After going through these steps, the blog’s latest posts will be shown.

The “Portfolio” Template

The “Portfolio” template is a beautiful page template that highlights your finest work as represented by a large image, title, excerpt, date and tags.

Screenshot of portfolio page

Any page can use the “Portfolio” template and multiple pages can use the template. For instance, a mixed media artist can choose to create two portfolio pages, one featuring her latest photography and the other featuring her latest sketches.

Creating a portfolio page with the “Portfolio” template is a two part process; first, you must create a page, then you must add portfolio items.

Creating the portfolio page

To add a new portfolio page, follow these steps:

  1. Go to Pages → Add New.
  2. Give the page a title. For instance, our demo site uses “Portfolio” as the title.
  3. Choose “Portfolio Template” in the Page Attributes box for the value of the Template dropdown.
  4. Save the page.
It is possible to turn an existing page into a portfolio page by changing the page’s template to “Portfolio Template”; however, we recommend being careful as your old content from the page will disappear.

Adding portfolio items

Once the page has been created, portfolio items can be added to the page. Portfolio items can be custom ordered on the page after adding them to the page.

  1. Go to Pages → All Pages.
  2. Click on the title of the portfolio page that you want to add posts to.
  3. In the page edit screen, a metabox titled Portfolio Posts should be displayed. If not, try the following steps:
    1. Click Screen Options in the upper right hand corner of the screen.
    2. Check the box next to Portfolio Posts.
    3. Verify that the Page Template select box in the Page Attributes metabox is set to “Portfolio Template”.
  4. The Portfolio Posts metabox shows a list of “Recent Posts”. Click a post to add it.
  5. The “Recent Posts” list only shows your 10 latest posts. To locate more posts, click the Search tab.
  6. In the input field, start typing the title of your posts.
  7. A list of posts matching the search will be displayed. Select the desired post by clicking it or using the down arrow and pressing and pressing enter.
  8. The post will be added to the “Current Posts” list.
  9. If you have 2 or more posts in the list, you can drag and drop them to order the posts.
  10. Save the page.

Preparing portfolio items

The term “portfolio item” refers to a post that is displayed on a portfolio page. As soon as you add an item to a portfolio page, a regular post becomes a portfolio item.

It is important that portfolio items have the correct data set in order to make the portfolio page look awesome.

For each post that is added to a portfolio page, we recommend the following:

  • Use a Featured Image that is at least 994px wide. We recommend this width because it will not cause stretching at any screen width.
  • Add an excerpt that is no more than 110 words. The excerpt is truncated at 110 words in order to maintain the page’s layout.
  • Tags are displayed below the content excerpt and above the date in the portfolio item listing. In order for the tag listing to look best, we recommend capitalizing each word in the tags and limiting the tag list to no more than three items.
  • The “View Project” button label can be changed in the Theme Customizer.

The “Profile” Template

While many of the templates in Snap aim to highlight an artist’s work, the “Profile” template highlights the artist and features a portrait image, excerpted text, and content as can be seen on the demo site and the screenshot below.

Screenshot of demo profile page

The “Profile” template can be used for any page and can be used multiple times within the same site. This template is excellent for about pages, contact pages, and profiling site contributors.

To add a profile page, follow these steps:

  1. Go to Pages → Add New.
  2. Give the page a title. For instance, our demo site uses “About” as the title.
  3. Choose “Profile Template” in the Page Attributes box for the value of the Template dropdown.
  4. Add a Featured Image that is at least 292px wide. The image is intended to show a picture of a person and for best results, we recommend using a portrait image.
  5. Add an excerpt. The excerpt is the text that displays below the image on the page. We recommend using an excerpt that is about 100 words to appropriately fill the space.
  6. Add post content. We recommend that you add enough content for the right hand column to be longer than the left hand column. Doing so will provide a nicely balanced page.
  7. Save the page.
If neither a Featured Image or an Excerpt is added to the page, the left hand column will not be displayed.

The Blog

Snap’s blog implements a gorgeous grid that automatically truncates your content to maintain a pixel perfect and correctly aligned posts page. Take a look at the page by viewing our demo site or the screenshot below:

Screenshot of blog page

By default, the blog will be the home page for the site. To set up the blog page, there is nothing that a user must do other than add posts to the site.

Options

Snap offers the ability to customize certain parts of the theme through the Theme Customizer. Changing 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 Snap have been made available in the Theme Customizer.

Invoking the Theme Customizer

  1. With your mouse, hover over the site name in the admin bar.
  2. In the menu that is revealed, click the Customize link.
    Screenshot of invoking the customizer
  3. The customizer will now be shown in the right hand side of the page with the site showing in the left hand side of the page.
  4. Click the “Theme” header as all of the options for Snap reside within that section.

Logo

Snap allows users to set a site logo, with the additional option of setting a hi-resolution version of the logo for use with HiDPI devices.

  1. Invoke the Theme Customizer.
  2. Under the Regular Logo heading, either click the No image button or, if a current image exists, click the image.
  3. Drag a logo to the area that says “Drop a file here” or click the select a file link and add a logo.
  4. As soon as the logo is uploaded, a preview of the site with the logo will be displayed.
  5. To add a “Retina Logo”, repeat these steps in the Retina Logo section.
  6. Click Save & Publish.

Based on the logo(s) that are uploaded, the theme makes decisions about how to generate the logo:

  • If only a Regular Logo is uploaded, the regular logo will display for all devices.
  • If only a Retina Logo is uploaded, the retina logo will display for all devices, but will display at 50% of its original dimensions. This size reduction is to ensure that the retina effect is achieved.
  • If both Regular Logo and a Retina Logos are uploaded, HiDPI devices will see the retina logo at 50% of its original dimensions and non-HiDPI devices will see the regular logo at its original dimensions.
For best results, the retina logo should be exactly twice the size of its intended display size. For instance, if you want to display a logo with dimensions of 100×50, you should use a retina logo with dimensions of 200×100.

Portfolio item button text

The Portfolio Item Button Text option allows you to override the text displayed in the buttons on portfolio items. By default, this text is “View Project”:

Screenshot of default button text

To change the default button text, follow these instructions:

  1. Invoke the Theme Customizer.
  2. Click the Display heading.
  3. In the box under the Portfolio Item Button Text, add the desired button text.
  4. The new text will be displayed in the right hand side of the page.
  5. Click Save & Publish.

Hide featured image on post pages

In some cases, it may be desirable to hide featured images on single post pages. For instance, users may want to show the featured image in the grid blog post listing, but not show the image on the individual post page.

To hide the featured image on post pages, follow these instructions:

  1. Invoke the Theme Customizer.
  2. Click the Display heading.
  3. Check the box next to Hide featured image on post pages.
  4. Click Save & Publish.

Disable Merriweather web font

The Merriweather Google web font is used for heading text in Snap. Users wishing to disable the font due to issues with displaying certain characters or to enhance compatibility with web font plugins can do so easily.

To disable the Merriweather web font, follow these steps:

  1. Invoke the Theme Customizer.
  2. Click the Display heading.
  3. Check the box next to Disable Merriweather web font.
  4. Click Save & Publish.

Footer text

Snap allows for the addition of arbitrary text in the footer of the the theme. To add this text, follow these instructions:

  1. Invoke the Theme Customizer.
  2. Click the Footer heading.
  3. In the Footer Text text input, enter the desired footer text.
  4. A preview of the footer text will be displayed in the right hand side of the page.
  5. Click Save & Publish.
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 links

A Twitter, Facebook, Google Plus, Flickr, Pinterest, LinkedIn, and RSS social link can be added to your site’s footer. The social links look like the image below:

Screenshot of social links

To add the social links, follow these steps:

  1. Invoke the Theme Customizer.
  2. Click the Footer heading.
  3. Fill in the social URL text inputs.
  4. A preview of the links will be displayed in the right hand side of the page.
  5. Click Save & Publish.

Styles

Snap offers a number of custom styles that a user can add to post content. Each of these styles add a little flair to the content, making it that much more visually appealing. The styles are implemented via added buttons in the WordPress editor.

Alert, Note, Success, and Error Styles

Snap provides 4 block level styles that allow wrapping a block of text in colored background. These styles are intended to add a block of call out text that matches the Snap color pallette. The four styles are show in the screenshot below:

Screenshot of block styles

The following list documents the color associated with each style:

  • “alert”: gray (#f9f9f9)
  • “note”: yellow (#ffc300)
  • “success”: blue (#007fd0)
  • “error”: red (#e14023)

To add a style, follow these instructions:

  1. In the post or page editor, click the Show/Hide Kitchen Sink icon in the post editor, which is highlight in the screenshot below:
    Screenshot of kitchen sink icon
  2. Highlight a full paragraph of text:
    Screenshot of highlighting character
  3. Click the button that corresponds with the desired style that was revealed when clicking the Show/Hide Kitchen Sink icon in the first step.
  4. Save the post.

Drop Cap

The drop cap styling 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.

The blue letter “E” in the screenshot below is an example of the drop cap styling in Snap:

Screenshot of drop cap styling

To add drop cap styling to a letter, follow these instructions:

  1. In the post or page editor, click the Show/Hide Kitchen Sink icon in the post editor, which is highlight in the screenshot below:
    Screenshot of kitchen sink icon
  2. Highlight a single character in a paragraph of text:
    Screenshot of highlighting character
  3. Click the drop-cap button that was revealed when clicking the Show/Hide Kitchen Sink icon in the first step.
  4. Save the post.
The drop cap color is the same as the “primary” color that can be set in the theme options. While it may be tempting to custom style this element, we recommend only changing the color via the primary color option in order for this element to match other elements in the site.

Intro Text

In order to emphasize some introductory text, Snap includes an “intro text” style, which is the large text seen below:

Screenshot of intro text styling

To add the intro text, follow these instructions:

  1. In the post or page editor, click the Show/Hide Kitchen Sink icon in the post editor, which is highlight in the screenshot below:
    Screenshot of kitchen sink icon
  2. Highlight a full paragraph of text:
    Screenshot of highlighting character
  3. Click the intro button that was revealed when clicking the Show/Hide Kitchen Sink icon in the first step.
  4. Save the post.

Looking for the self hosted WordPress.org version?

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