Affinityby Automattic
Overview

Affinity

Affinity is a classic one-page theme designed with weddings and family announcements in mind. Collect everything you need for your big day on one easy-to-customize website — add an R.S.V.P. form, link to your favorite registries, or add stunning photos from the event itself. Keep your loved ones in the loop with a blog, and collect their messages and wishes for you in your guestbook.

However you use it, Affinity is an elegant solution for your wedding or family announcement.

Setting Up Your Front Page

Affinity Front Page

When you first activate Affinity, your homepage displays posts in a traditional blog format.

To set up your static homepage, follow these steps:

  • Create a page.
  • Go to the Customizer’s Static Front Page panel and set “Front page displays” to “A static page.”
  • Select the page created in Step One as “Front page,” and choose another page as “Posts page” to display your blog posts.

Good news! This theme doesn’t need a front-page template — set a static page as your front page, and you’re good to go. On its own, the page displays a single panel with a full-screen featured image; your site logo, description, and navigation; and your page content.

Adding Panels

To get your site set up, you’ll want to add some more panels.

Each “panel” is a standard page. To add additional panels to your Front Page, follow these steps:

  • Create or edit a page.
  • Navigate to Customize → Theme Options. From the drop-down, select the page you’d like to appear in the panel.

Panel setup in the Customizer

To set the background image of your panel, assign a Featured Image to the page.

Click on the diamond-shaped links to navigate through the front-page panels.

Featured Images

Affinity supports prominent Featured Images on the blog, and single posts and pages.

  Blog and archives
Blog and archives
  Single posts and pages
Single posts and pages

Any size image will do, but horizontally oriented images work best. Adjust the opacity of the Featured Images from Customize → Theme Options → General.

Site Tagline

The site tagline is a great place to put a quote or a brief welcome to your site. It will appear on the front page, blog, and archives over your Custom Header image. If no Custom Header is active, the Site Tagline is hidden.

Theme Options

In addition to the Front Page setup, you can customize the theme’s behavior under Customize → Theme Options → General.

Affinity General Theme Options

Header Image Opacity

Change the opacity of the header image for better contrast with the text.

Scrolling Featured Images

Uncheck “Allow Featured Images to scroll in the background on large screens” to change the scrolling behavior of the header and front page Featured Images on large screens.

Note: The scrolling behavior is not visible in the Customizer for performance reasons, but you’ll see it on the front page of your site.

Scrolling (default):

Scrolling Backgrounds

Not scrolling:

Non-Scrolling Backgrounds

Widgets

Affinity has a one-column or two-column layout. Add widgets to the sidebar area for a traditional two-column blog, or leave it blank for a sleek one-column style.

  One column
One column
  Two columns
Two columns

The theme also includes three optional widget areas in the footer:

Footer Widgets

Configure these widget areas from Customize → Widgets.

Page Templates

Affinity comes with two Page Templates for dressing up your content:

Full-Width Template

The Full-Width template gives you more space for your content. It’s the perfect way to showcase a large gallery of images or a video.

Guestbook Template

Designed with weddings in mind, the Guestbook template highlights your visitors’ comments:

Guestbook page template

When using this template on a page, it’s good to double-check that Comments are enabled. To do this, edit the page and click on More Options. Under the Discussion header, check Allow Comments and publish.

Social Links

Affinity supports a handy Social Links menu, which appears in the footer.

Available Icons

Linking to any of the following sites will automatically display its icon in your menu:

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Email (mailto: links)
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • RSS Feed (urls with /feed/)
  • StumbleUpon
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Post Intro

Affinity has a small but nifty intro feature. Also known as a “deck” or “kicker,” the intro area is displayed between the headline and body copy on posts.

Deck

twentysixteen-excerpt

Your intro provides important information and acts as a link between the title and the rest of your post. A carefully crafted deck grabs readers’ attention, giving them an idea of what to expect in the full post.

Add your intro in the Excerpt field of each post, which you’ll find in the More Options area of the Post Editor sidebar.

Affinity also supports the following features:

Quick Specs (all measurements in pixels)

  1. The main column width is 560 for blog posts and 716 for pages.
  2. The main sidebar width is 218.
  3. Featured Images are displayed at 720 wide and flexible height on the blog, and at full-screen width with flexible height on single posts and pages.
  4. The site logo appears at a maximum width of 800 and height of 300.
  5. The custom header appears at full-screen width with flexible height.

This theme is available for download to be used on your WordPress self-hosted installation.

Download
Next theme