Minimum requirements

Oxford requires WordPress 3.8 or above.

Getting help

The documentation below explains all of the main features of Oxford and how to get the most out of the theme.

If you need a hand, email support[at]thethemefoundry[dot]com.

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.

Typekit® fonts

Oxford includes access to two specific premium Typekit® fonts, Futura PT and Soleil, without having to sign up and pay for a Typekit® account. In order to accomplish this, the domain where your site is located (e.g. www.example.com) needs to be authorized to access the fonts:

  1. When you first install and activate Oxford, you will be directed to the Font Authorization screen.
  2. Here, you will see two options: “Authorize” and “Use Typekit Kit ID”.
  3. In most cases, the “Authorize” option will be sufficient. Enter the email address and password associated with your Theme Foundry account.
  4. Click Authorize Site. You will only need to do this once per domain.

There are some special cases where the “Use Typekit Kit ID” option will be necessary. The most common of these is, if your copy of Oxford is getting more than 50,000 page views per month across all of the domains for which it is authorized. In this case you will need to sign up for your own Typekit account and create your own kit to use. This field is where you enter your kit ID.

Your copy of Oxford can be authorized for multiple domains, so you can authorize a local development site, a staging site, and your live production site.

Posts and pages in Oxford can optionally include one or two featured images, corresponding to the Featured Image and Secondary Image metaboxes 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.

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.

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.

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 and a field where you can specify a six-character hex code.

Post layout

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

Single post options

There are two theme options that relate to the single post view:

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 using a theme option (see below).

Two-Column template

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

Page options

There are two theme options that relate to pages:

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 (on the demo it is the News page). However, if you have set a static Front page, you will need to also specify a page to be your Posts page.

  1. Add a new Page. Give it a title, such as “Blog”, then publish it.
  2. Navigate to Settings → Reading.
  3. In the Front page displays section, find the dropdown next to Posts page and choose the page you just added.
  4. Save Changes.

In Oxford, you can optionally have 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.

Archives

Archive pages (e.g. date, author, category, or tag archives), as well as the Posts page, 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 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.

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.

The 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:

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

Styles

Oxford offers two custom styles that a user can add to post content. The styles are implemented via the Styles dropdown in the second row of buttons in the Visual editor. To reveal the second row, click Toolbar Toggle (or Show/Hide Kitchen Sink) in the first row.

Run in

The Run In style 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.
  2. Choose “Run In” from the Styles dropdown.

End of article

The End of Article style 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. Place the cursor somewhere within the last paragraph of a post.
  2. Choose “End of article” from the Styles dropdown.

Blockquote

When applied to content in a post, the blockquote format 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 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>

As with the blockquote, this layout option is currently only supported in Webkit-based browsers such as Chrome and Safari.

Image sizes

For reference, these are the image sizes used in Oxford:

Post/page featured images

For one image:

  • Width: 900px
  • Height: (variable)

For two images:

  • Width: 450px
  • Height: (variable)

Custom logo

Regular

  • Width: up to 900px
  • Height: (variable)

Retina

  • Width: up to 1800px
  • Height: (variable)

Customizing Oxford

Oxford offers the ability to customize certain parts of the theme through the Theme 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 in the Theme Customizer.

If you are looking to make changes that are not documented here, please refer to the Advanced customization section and review how to make theme customizations.

You can replace the site title text in the header with a custom logo image. This image can also optionally include a high-resolution version for use on HiDPI devices (such as retina displays).

  1. Navigate to Appearance → Customize.
  2. Click the Logo heading.
  3. Under the Regular Logo heading, either click the No image button or, if an image currently exists, click the image.
  4. Drag a logo to the area that says “Drop a file here” or click the select a file link and add a logo. If you have previously uploaded a different logo, you can find it on the “Uploaded” tab.
  5. As soon as the logo is uploaded, a preview of the site with the logo will be displayed.
  6. To add a “Retina Logo”, repeat these steps in the Retina Logo section.
  7. Click Save & Publish.

Display options

The Display section of the Theme Customizer contains options related to how content is displayed in different views.

  1. Navigate to Appearance → Customize.
  2. Click the Display 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.

The Footer section of the Theme Customizer contains options related to items in the site footer.

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

By default, the three footer widget areas are displayed on every view; however, they can be hidden from specific views by checking the appropriate box(es).

Footer text

Oxford allows for the addition of arbitrary text in the footer of the theme. Under Footer Text, enter the desired content.

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.
To add a social profile link not listed here, please refer to the Advanced customization section below.

Advanced customization

Oxford was designed and built to be very flexible and easy to tailor to suit your needs. If there are changes that you would like to make that are not possible through the customization options above, first read through our tutorial on setting up a child theme. Below are further details on a few specific customizations.

Filter hooks

Using filters, rather than directly editing the theme code, is a better way to alter the theme, when possible; however, this should still only be done if you are comfortable working with PHP. These filters and the sample code should be placed in your child theme’s functions.php file.

oxford_image_sizes

The oxford_image_sizes filter allows a developer to change or add custom image sizes to the theme. For example, to change the width of a single featured image shown on the single post view to 800px, the following code would work:

function oxford_child_image_sizes( $sizes ) {
    $sizes['oxford_large'] = array( 800, 9999, false );
    return $sizes;
}
add_filter( 'oxford_image_sizes', 'oxford_child_image_sizes' );

After making a change like this, you would need to regenerate the sizes for your existing images with a plugin such as AJAX Thumbnail Rebuild.

Keep in mind that in addition to changing the actual image dimensions, CSS changes may also be necessary for the layout to work correctly.

These two filters can be used to change how Oxford determines whether a featured image is large enough to display in the various locations within the theme. By default, Oxford takes the oxford_large size of each featured image and compares its dimensions to the minimum requirements: 900px width and 0px height if there is a single featured image in the post, and 450px width and 0px height if there are two featured images in the post (the normal “Featured Image” and the “Secondary Image”). If a developer wanted to instead use the built-in large image size and have minimum widths of 1024px and 512px, respectively, she could use something like this:

// Specify which image size to use
function oxford_child_featured_image_size() {
    return 'large';
}
add_filter( 'oxford_featured_image_size', 'oxford_child_featured_image_size' );

// Set minimum dimensions
function oxford_child_featured_image_min_size( $dims, $count ) {
    // Two images
    if ( $count > 1 ) {
        $dims = array( 512, 0 );
    }
    // One image
    else {
        $dims = array( 1024, 0 );
    }
    return $dims;
}
add_filter( 'oxford_featured_image_min_size', 'oxford_child_featured_image_min_size', 10, 2 );

Keep in mind that these filters do not change the dimensions of the images displayed in the posts. They only control how large an image must be before it qualifies as large enough to display in a template. To change the actual image size displayed, see oxford_image_sizes.

oxford_fitvids_custom_selectors

The oxford_fitvids_custom_selectors filter allows a developer to add a jQuery selector pattern for a type of embedded video that the FitVids script doesn’t support by default (Oxford uses FitVids to make embedded videos scale fluidly to match the width of their container). For example, to add support for Hulu embeds, the following code would work (note that in Oxford, Hulu has actually already been added):

function oxford_child_fitvids_custom_selectors( $selectors ) {
    $selectors[] = "iframe[src*='//www.hulu.com']";
    return $selectors;
}
add_filter( 'oxford_fitvids_custom_selectors', 'oxford_child_fitvids_custom_selectors' );

More info on FitVids and custom selectors here.

oxford_homepage_most_recent_post_type

The oxford_homepage_most_recent_post_type filter allows a developer to add or change which post type(s) the Homepage template looks for when querying for the most recent post. For example, if the site is using a plugin that adds a recipe post type, and the developer wants to allow recipes to be featured on the homepage when they are the most recent thing published (but still account for recent blog posts as well), she could use the following code:

function oxford_child_homepage_most_recent_post_type() {
    return array( 'post', 'recipe' );
}
add_filter( 'oxford_homepage_most_recent_post_type', 'oxford_child_homepage_most_recent_post_type' );

oxford_homepage_query_args

The oxford_homepage_query_args filter allows a developer to customize the query that populates the grid of posts that appears beneath the featured content area on the Homepage template. This could be especially useful in conjunction with the oxford_homepage_most_recent_post_type filter for a case such as the recipe example. To include the recipe post type in the grid along with normal posts, the following code would work:

function oxford_child_homepage_query_args( $args ) {
    $args['post_type'] = array( 'post', 'recipe' );
    return $args;
}
add_filter( 'oxford_homepage_query_args', 'oxford_child_homepage_query_args' );

Note that these arguments can be modified with anything that is supported by the WP_Query object.

oxford_custom_logo_information

The oxford_custom_logo_information filter allows a developer to override the custom logo data set via the Theme Customizer. Here is an example:

function oxford_child_custom_logo_information( $logo ) {
    $logo = array(
        'regular-logo' => array(
            'image'  => 'http://domain.com/path/to/logo.jpg',
            'width'  => '900',
            'height' => '500'
        ),
        'retina-logo'  => array(
            'image'  => 'http://domain.com/path/to/logo-2x.jpg',
            'width'  => '1800',
            'height' => '1000'
        )
    );
    return $logo;
}
add_filter( 'oxford_custom_logo_information', 'oxford_child_custom_logo_information' );

Keep in mind that while using a function similar to above on this filter, the Logo interface in the Theme Customizer will not do anything.

oxford_custom_logo_max_width

The oxford_custom_logo_max_width filter allows a developer to change the maximum width that a custom logo will display on a wide desktop screen (the logo scales responsively for narrower viewport widths, regardless). By default the maximum width is 900 pixels. To change this to 600 pixels, the following code could be used:

function oxford_child_custom_logo_max_width() {
    return 600;
}
add_filter( 'oxford_custom_logo_max_width', 'oxford_child_custom_logo_max_width' );

oxford_read_more_text

The oxford_read_more_text filter allows a developer to change the link text that appears beneath excerpts. For example, the default link text is “Keep reading”, but a developer could change it to “OMG tell me more!!!” with the following code:

function oxford_child_read_more_text() {
    return 'OMG tell me more!!!';
}
add_filter( 'oxford_read_more_text', 'oxford_child_read_more_text' );

The oxford_social_links filter allows a developer to add, remove, reorder, or edit social profile links in the site footer. For instance, to add a link for Last.fm, a developer could add the following code:

function oxford_child_social_links( $services ) {
    $services['last_fm'] = array(
        'title' => 'Last.fm',
        'url'   => 'http://last.fm/user/your-profile-goes-here'
    );
    return $services;
}
add_filter( 'oxford_social_links', 'oxford_child_social_links' );

Then in the child theme’s style.css file:

.social-profiles .last_fm a:hover {
    color: #a3000d;
}

oxford_archive_title

The oxford_archive_title filter allows a developer to change the title of one or more archive pages, without having to alter the template files. For example, the default title of a day archive is something like “From February 20th, 2014”. However, a developer could change this title for February 20th archives for all years by using something like this:

function oxford_child_birthday_archive_title( $title ) {
    global $wp_query;

    if ( is_day() && 2 === $wp_query->monthnum && 20 === $wp_query->daynum ) {
        $title = 'These posts were written on my birthday in ' . $wp_query->year;
    }

    return $title;
}
add_filter( 'oxford_archive_title', 'oxford_child_birthday_archive_title' );

oxford_style_formats

The oxford_style_formats filter allows a developer to add to or modify the options that appear in the Styles dropdown in the Visual Editor. For example, to add an additional custom style option that would wrap the currently highlighted text in a span with class reversed, she could add this:

function oxford_child_style_formats( $styles ) {
    $styles[] = array(
        'title'   => 'Reversed text',
        'inline'  => 'span',
        'classes' => 'reversed'
    );
    return $styles;
}
add_filter( 'oxford_style_formats', 'oxford_child_style_formats' );

Then in the child theme’s style.css file:

span.reversed {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    unicode-bidi: bidi-override;
    direction: rtl;
}

(This style brought to you by CSS Tricks.)