Oxford

$125

oxford-banner

Typography matters.

Typekit® fonts built right in.

Your stories deserve the best in design, aesthetics, and typography. That’s why we partnered with Typekit to bring you Oxford, the first ever WordPress theme to include a Typekit font right out of the box. No Typekit account required. Oxford features Soleil for the main body copy and Futura PT for the headlines. It’s the perfect contemporary font combination for your magazine or blog.

Please note: Oxford comes with one year of WordPress.com’s Custom Design upgrade included in the cost. The Custom Design upgrade gives you access to the special Typekit fonts, as well as color options and the ability to modify the theme’s CSS.

While Oxford itself is a one-time purchase, the Custom Design upgrade is a yearly upgrade that must be renewed separately after the first year. Its cost is $30.00 per year. If you choose not to renew the Custom Design upgrade after the first year, the theme will no longer be displayed with Soleil and Futura PT.

product-feature-2

Make it your own.

Add some custom styling.

Personalizing your new website should be fun. We’ve leveraged the built-in Customizer, so adding your own custom logo and social links is easy. We’ve also included an extra option for setting the background color on individual posts or pages. This is a great way to add a splash of relevant color to one of your stories.

product-feature-3

Quality construction.

Rock solid responsive layouts.

Oxford leverages the latest in web design technology to ensure your new site looks polished and professional across desktop screens, tablets, and phones. CSS3 columns and Masonry.js work together to form a solid foundation for the responsive layout. We’ve also performance tested and optimized the CSS and the JavaScripts, ensuring they load quickly and efficiently for your visitors.

product-feature-4

Adapts to your content.

Switch themes. Get back to work.

Oxford brings a new adaptive approach that keeps your site looking professional with your existing content. No images, no problem. Lots of images, we’ve got you covered. The homepage template can display custom content, a featured post, or the most recent post. Individual blog posts and archive pages automatically adapt to the length and style of your content.

Help and additional information

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

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

Quick Specs (all measurements in pixels):

  • Featured images should have a minimum width of 900.
  • For two featured images, the minimum width for each is 450.
  • The main column maximum width is 900.
  • All images and video will scale to fit the viewing screen.

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.

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 »

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:

<div class="span-both-columns">
Add your element here.
</div>

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.