Bailey is a minimal portfolio theme that gives you a lot of flexibility in showing off your best work to the world. Its main feature is a portfolio content type that you can use to feature your artwork, photographs, videos, or other creative endeavors while keeping them separate from your blog or other website pages. It also features two premium Typekit fonts, Franklin Gothic URW and Kepler Std, and a fully functional blog with several customization options.

This tutorial will help you make the most of what Bailey has to offer. The sections are organized in a way that might make sense if you are building a brand new site, but of course you don’t have to follow this order to get your site up and running. Many sections of this tutorial refer to options within the Customizer.

Branding Your Site

Bailey’s design is intentionally minimal in order to put the emphasis on the projects in your portfolio. You can tailor many aspects of the visual design to match your personal or company branding.

Logo

You can add a logo to your site header under the Site Title, Tagline, and Logo section of the Customizer. This will appear on the left, above the site title.

Social Profile Links

In the Theme section of the Customizer you can add links to your social network profiles that will appear in the site footer. Find the desired service in the list of available options and paste the complete URL to your profile into the text field, e.g. https://twitter.com/thethemefoundry.

You can also add your email address, which will create a `mailto:` icon link in the site footer.

Setting Up Your Portfolio

Your portfolio in Bailey is made up of individual items called Projects. These are similar to posts, in that they can contain all the same kinds of text and media, but because they are a separate type of content, Bailey is able to display projects with a distinct visual style and layout.

Projects can be categorized with project “types” and tags, similar to post categories and tags. Your visitors can then view all the projects of the same type or tag by going to the relevant archive page.

Add Projects

To add a new project:

1. Navigate to Portfolio → Add New.
2. Add a title.
3. Add a featured image.
4. Add some content!
5. Click Publish.

When viewing an individual project, all of the content is contained within a column that sits on the right edge of the site, leaving some space on the left. However, there are some specific elements that are full-width, meaning they stretch beyond the bounds of the content column. These elements include a specific image size, embedded videos, and blockquotes.

Full-Width Images

When inserting images into the content editor, you can choose a specific size to use from the Size dropdown under Attachment Display Settings. To make an image display at full width on your project, choose the first size that has a width of 1042 pixels. This option will appear as long as the original image is at least 1042 pixels wide.

More on adding photos and images.

Videos

Videos will display full-width when inserted into projects.

More on embedding video.

Content Styles

Bailey includes some special content formatting styles to add an extra touch to your projects, posts, and pages.

Run In

The Run In style is intended to place extra emphasis on the first paragraph of content in a project, post, or page. To add the style to a paragraph:

1. In the content editor, switch to “Text/HTML” mode.
2. Find the paragraph you want to add the style to, and wrap it in a paragraph tag (<p></p>)
3. Add the run-in class to the paragraph tag.
4. Example: <p class="run-in">Your paragraph content here.</p>

Blockquote

In Bailey, blockquotes are intended to emphasize specific blocks of content, and are visually similar to the Run In style mentioned above. When used in projects, they are different from Run Ins in that they will display full-width.

To convert content into a blockquote:

1. In the Visual Editor, place the cursor on the paragraph you would like to change. Or, to wrap multiple paragraphs in a blockquote, highlight all of the content you would like to change.
2. Click the Blockquote button in the first row of formatting buttons.

Project title

A project’s title appears in portfolio archives and on pages using the Portfolio template, but it does not appear on the individual project view. To show the title text in this view as well, you’ll need to add it to the content editor.

Types and tags

Similar to categories and tags in blog posts, you can add types and tags to projects in Bailey. Types are equivalent to post categories, and Tags are equivalent to, well, tags.

More on using categories and tags.

Featured image

When you add a featured image to a project, it will represent that project in portfolio archives and on pages using the Portfolio template. It won’t be displayed when viewing the individual project, however. If you’d like the same image to appear there as well, you’ll need to insert it into the content editor, the same as any other image.

Portfolio archives

By default, all of your projects are collected into a Projects archive, which is accessible on your site at `yourgroovydomain.com/portfolio`. Each of the project types and tags that you create also has an archive. Links to these archives can be added to your site navigation by setting up a custom menu.

On each of these portfolio archives, the projects are arranged in columns. Each project is represented by a featured image, the project title, and a list of the types and tags it has been assigned. Many aspects of this layout are customizable, as detailed below.

Archive Title

Portfolio archives have titles that correspond to the type or tag that they represent (e.g. “Art”). However, this title is hidden by default. To show this title, navigate to Theme section in the Customizer and check the box next to “Show archive title.”

Archive Description

Project type and tag archives can include a description above the layout of projects (no description is possible for the main Projects archive). To add a description to a project type:

1. Navigate to Portfolio → Project Types.
2. Click on the Type you would like to add a description to.
3. Add content to the Description field. Limited HTML is allowed.
4. Click Update.

The same method works for project tags.

Project types and tags

A project’s types and tags lists can be hidden by navigating to the Theme section of the Customizer and unchecking the box next to “Show project types and tags.”

Columns

The number of columns that projects display in can be adjusted between one and three. Navigate to the Theme section in the Customizer and choose the desired number of Portfolio Columns.

Overlay Style

There are three options in the Theme section in the Customizer for the behavior of a project when hovering over/tapping on it:

Frame

This is the default option. An inset border will appear over the project’s featured image, and the project’s title will highlight.

Solid

The entire featured image will be covered by an opaque overlay containing an icon, and the project’s title will highlight.

None

Only the project’s title will highlight.

Image Aspect Ratio

By default, project featured images are displayed in archives / portfolio pages at the same aspect ratio they were uploaded with. This gives the project layout an organic feel, assuming the featured images have varying aspect ratios. However, in the Theme section in the Customizer, you can specify a particular aspect ratio to give the project layout more of a grid appearance. The options are landscape, portrait, and square. The featured images will be cropped to the center in each of these cases.

Configure Your Blog

Bailey offers simple, yet fully functional blog templates to accompany your portfolio.

Blog Page

By default, the front page of your site will show your latest blog posts. If you would like to show a different page as the front page — like, say a portfolio page — you will need to set up a separate page to show your latest posts. View the setup guide.

Main Sidebar

This sidebar is a widget area that can be included to the left of the content on the various blog views as well as on pages. You can adjust which views each widget in the sidebar will appear in. Views that do not have any active widgets with expand to full-width.

Note that the Main Sidebar is not available for inclusion on portfolio and project views, which have been designed to focus exclusively on the portfolio content.

Post and Page Features

Like projects, posts and pages can make use embedded images and video. One notable difference is that these features will not be displayed at full-width on posts and pages because that space is potentially taken up by the sidebar.

Navigation

Bailey’s navigation consists of a slideout panel that appears when the Menu button in the header is clicked. Clicking anywhere outside of this menu bar, or a second time on the Menu button will return the bar to its hidden position. The Menu label can be modified in the Customizer’s Theme section.

The menu displays a list of your site’s pages by default, or you can replace it with a custom menu. It also accommodates a Menu Sidebar widget area.

Footer

You can specify up to three widget areas for your footer in the Theme section of the Customizer. These widget columns can be selectively shown only on certain views by checking/unchecking the Show Footer Widgets options. You can also choose “0” to omit the widget columns completely.

Content added to the Footer Text field in the Theme section of the Customizer will appear beneath the footer widgets, above the social profile links. Limited HTML is allowed.