Oxfordby The Theme Foundry

Oxford screenshot

Introduction to Oxford

Oxford has a clean, contemporary design with a magazine layout that puts your content front-and-center and makes viewing it a pleasurable, engaging experience.

Setting up the Homepage

Oxford has a special Homepage template that you can choose from the template dropdown in the Page Attributes box on the Edit Page screen.

The Homepage template is a good choice to use for the page that you set as the Front page. The layout is very similar to the Posts page and archive pages, with one important difference: the Homepage has a large “featured content” area at the top. The featured content area can either display content from the page using the Homepage template itself, or content from a specific post. Once you publish at least four posts, the grid-style layout will appear on the front page.

Homepage content

If the page itself has featured images and/or content, it will display in the featured content area instead of a post.

Post content

If the page itself has no featured images and no content, the featured content area will display featured images and content from the most recently published post. The content will be excerpted, similar to the excerpts on archive pages. To manually control this excerpt, you can either enter content into the Excerpt field or use the More tag.

To display a specific post in the featured content area, make it sticky. If there is more than one sticky post, only the most recently published one will be displayed.

Posts

As a magazine theme, Oxford’s post template is designed to adapt to the content to optimize the reading experience.

Two columns

By default, the content in a post is divided into two columns. This gives the post a clean magazine layout while enhancing readability by maintaining short line lengths. The breakpoint between columns is determined automatically by the web browser to make the two columns as close to equal height as possible. The post title appears at the top of the left column. See an example »

If the post continues to show in a single column, edit the post in the wp-admin dashboard, and press the Update button.

One column

If the post’s content is less than 1,000 characters (excluding HTML tags and shortcodes), all of the content will appear in the left column, while the post title will appear at the top of the right column. 
See an example »

background-color

Post Background Color

Posts in Oxford can optionally have a custom background color. This background color is only shown in the single post view. To set a custom background color, find the Background Color metabox in the right column of the Edit Post screen and click Select Color to reveal a color picker. A field where you can specify a six-character color hex code will also appear.

Post Layout

post-layoutTo force a one-column layout on a post, regardless of the character count, find the Layout section in the right column of the Edit Post screen and check the box next to “Enable single-column layout”.

Pages

Unlike posts, pages using the default page template display content full-width, rather than in two columns. Pages also do not display a title, though it can be revealed in the Customizer.

Two-Column Page Template

If you would like to display a page’s content using the same two-column layout as posts, you can choose “Two-Column Template” from the template dropdown in the Page Attributes box on the Edit Page screen.

Setting a Posts Page

In WordPress, the page that shows your most recent blog posts is known as the Posts page. By default, this is the main, or “Home” page of the website. However, if you have set a static Front page, you will need to also specify a page to be your Posts page, which you can do by following this guide.

In Oxford, you can optionally have include content that appears above the grid/list of posts on the Posts page. Simply add content to the content editor on the page that you have designated as the Posts page.

product-feature-4

Featured Images

Posts and pages in Oxford can optionally include one or two featured images, corresponding to the Featured Image and Secondary Image areas on the Edit Post screen.

When viewing a single post or page, the featured image(s) will appear in a block above the title and main content.

  • If only one image is set, it will fill the entire width of the content container.
  • If both images are set, the two images will appear side-by-side, each half the width of the content container. The Featured Image will appear on the left and the Secondary Image will appear on the right.
  • If the images have different heights, the taller image will be cropped to match the height of the shorter image.

In views where multiple posts are displayed in a grid, such as on the Posts page or in an archive, only one featured image will be shown (the Featured Image gets top priority).

Featured image size requirements

  • For a single featured image, the minimum width is 900 pixels. If an image does not meet this requirement, it will not be shown.
  • For two featured images, the minimum width for each is 450 pixels. If an image does not meet this requirement, it will not be shown.

Captions

If you add a caption to a Featured Image or Secondary Image, it will appear beneath the image(s) on the single post and page views. Captions will not be shown in views where multiple posts are displayed in a grid.

Archives

Archive pages (e.g. date, author, category, or tag archives) adapt their layout to the number of posts that are available to display. If a particular archive has less than four posts, the posts will appear as a list, each with a title, date, and excerpt. For archives with four or more, the posts will appear as a grid, each with a featured image, date, title, and excerpt.

Excerpts

By default, WordPress will generate the post excerpt that is shown on archive pages by truncating the post content. In Oxford, the length of the excerpt depends on whether the post has a featured image. Posts with a featured image will have an excerpt of 55 words, while posts without a featured image will have an excerpt of 100 words.

You can manually control the length and content of the excerpt by adding text to the Excerpt field on the Edit Post screen. Learn how to create an excerpt.

Archive Descriptions

Similar to the optional content at the top of the Posts page, the archive pages for author, category, and tag archives can include descriptive content above the grid/list of posts.

Author

The author archive description is populated from the Biographical Info field in the author’s user profile.

  1. Navigate to Users → All Users.
  2. Click on the desired user account to edit the Biographical Info field.

Category/Tag

Category and tag archive descriptions are populated from their respective description fields, which can be edited via menu items listed under the Posts menu.

  1. Navigate to Posts → Categories or Posts → Tags.
  2. Click on the desired category to edit the description field.

Archives Widget

The Posts page, as well as archive pages, include a built-in Archives widget that displays a list of links to date and category archives. When the posts are displayed as a grid, this widget appears as the third item in the grid. When the posts are displayed as a list, the widget appears as the last list item.

The Archives widget can optionally be hidden in the Customizer.

Oxford has a widget area in the site footer with three columns. Each column is a separate widget area that can be customized by navigating to Appearance → Widgets.

Formats

Oxford offers two custom formats that a user can apply to post content. The styles are selected from the Formats dropdown menu in the second row of buttons in the Visual editor. To reveal the second row, click Toolbar Toggle in the first row.

Run in

The Run In format transforms the selected word or phrase into all-capital letters. It is intended to highlight the beginning or lead-in of a post.

  1. Highlight the first few words or sentence of the post.
    run-in-1
  2. Choose “Run In” from the Formats dropdown.
    run-in-2

End of article

The End of Article format adds a rectangular symbol, or “end mark” to the end of a paragraph. It is intended to be used on the last paragraph in a post.

  1. Highlight the last paragraph of a post.
    end-of-article-1
  2. Choose “End of article” from the Formats dropdown.
    end-of-article-2

Blockquote

When applied to content in a post, the blockquote element will have a special layout in some situations. If the post content has enough characters to split into two columns, the content within the blockquote will span the two columns. Note that this special layout is currently only supported in Webkit-based browsers such as Chrome and Safari.

Span Both Columns

By default, the content in a post is divided into two columns. You can make any element or content span both columns by following these steps:

  1. In your post or page editor, switch to the Text mode.
  2. Locate your element and wrap it within div.span-both-columns. Here’s an example:

Add your element here.

Customizing Oxford

Oxford offers the ability to customize certain parts of the theme through the 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 Oxford have been made available there.

You can add a custom logo image to the site header. By default, this replaces the site title text, but you can configure it to show both.

  1. Navigate to Appearance → Customize.
  2. Click the Site Title heading.
  3. Under the Site Logo heading, click the Add Logo button.
  4. Choose an image from your media library to use as the logo.
  5. To show the site title along with the logo, uncheck the box next to “Hide site title when logo is set”.
  6. Click Save & Publish.

Display Options

Several options in the Customizer relate to how content is displayed in different views.

  1. Navigate to Appearance → Customize.
  2. Click the Theme heading.
  3. Customize the options.
  4. Click Save & Publish.

Sticky post label

Sticky posts have a label in the post header. By default the label says “Featured”, but it can be changed to something else, for example “Important” or “Sticky”, by entering it into the text field under Sticky post label.

Show spaces between paragraphs

By default, paragraphs have an indented first line, but no space between them. Checking this box changes this behavior so that there is a space, and no first-line indentation.

Hide date/category archive list

By default, the Archives widget on the Posts page and archive pages shows lists of both date archive links and category archive links. Either or both of these can be hidden by checking the appropriate boxes.

Show categories/tags in post footer

By default, the post date, along with a list of categories and tags assigned to the post, are displayed in a vertical line to the left of the post title. Checking this box will move this information down to the post footer, after the end of the post content.

Show page titles

By default, page titles are not shown. Checking this box will show them on all pages across the site.

Several options in the Customizer relate to items in the site footer.

  1. Navigate to Appearance → Customize.
  2. Click the Theme heading.
  3. Customize the options.
  4. Click Save & Publish.

Footer text

Oxford allows for the addition of arbitrary text in the footer of the theme. Under Footer Text, enter the desired content. Note that 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, Instagram, LinkedIn, and RSS can be added to your site’s footer. To add a social profile link, follow these steps:

  1. Enter the full URL of the social profile into the relevant text box.
  2. Click Save & Publish.