By The Theme Foundry

Screenshots of Duet

Your writing. Refined.

Words never looked this good.

Duet’s two-column layout takes inspiration from the elegance of a classic magazine. We focused on the basics — great typography, spacing, and rhythm. These elements combine to provide a simple and enjoyable reading experience. Showcase any media with included special styling for image posts and video posts. Choose from an assortment of in-post styling options to further enhance your words: highlight your quotes, add a horizontal rule, and even include classic captions and titles in your posts and pages.

Duet with custom style

Add some style.

Make it your own.

Personalizing your new website should be fun. We’ve leveraged the built-in WordPress customizer, so adding your own background image or color is easy. We’ve also included a set of 10 premium typography options. On top of all that, you’ll have access to three built-in accent color schemes: Orange (default), Green, and Blue. Combine these colors and typography with a custom background to match your brand and give your website a truly unique look.

Duet banner

Get noticed.

Feature your articles.

We built a simple slider into the Duet home page to help your important articles get more attention and give your website that polished and professional look. Check a box while writing a post, set a Featured Image for your post, and your image will automatically show up in the slider on your home page.

Help and additional information

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

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

Quick Specs (all measurements in pixels):

  1. Duet is a flexible-width, responsive design.
  2. Individual column maximum width is 410.
  3. Theme maximum width is 880.

Posting overview

Duet supports 4 post formats, selectable from the Edit Post screen: standard (text), image, gallery and video.

Duet's post formats example

The post format you choose determines how your post will look, and each format requires a slightly different setup to work properly.

Posting articles

Normal articles should use the Standard post format.

Using the two-column format

By default, Standard posts will use Duet’s two-column layout for the content. If you’d prefer to use a single-column layout for your post, you can check the option to “Disable two column formatting on this post” from the Duet Post Options meta box (usually near the bottom right side of the Post Edit screen).

Disable two column formatting

Note: Duet uses modern techniques to generate the two-column look. We’ve done our best to allow two-column articles to be displayed across all browsers, but with certain content on particular browsers (particularly Internet Explorer 8 and older) the two-column view does not render correctly.

Posting images

To publish a single highlighted image, select Image as your post format. Then, set the Featured Image of your post to the image you want to highlight.

Featured Image example

Use as Featured Image example

The Featured Image will be included at the top of the post and includes a link to the full-size image.

Posting galleries

To publish a gallery of images, select Gallery as your post format. Then, upload your images to your post using the WordPress media uploader. Finally, insert your gallery into the content of your post using the [gallery] shortcode.

Here is a great article explaining how to upload images and insert a gallery.
Would you like to autostart your gallery? If yes, please read through the section of this theme’s documentation about enabling gallery autostart.

Of course, you can also use the default WordPress gallery in the Standard post format.

Enable slideshow on page templates or non-gallery posts

To enable a slideshow on a page or non-gallery post, add your gallery; then, paste the following shortcode into your page content, replacing the default [gallery] shortcode:

[gallery slider="true"]

Using the regular [gallery] shortcode will remove the slider styling and return to the default WordPress gallery.

Enable gallery autostart

To autostart a slideshow within a gallery post, add your gallery; then, paste the following shortcode into your post content, replacing the default [gallery] shortcode:

[gallery autostart="true"]

To autostart a slideshow within a page template or non-gallery post, include autostart=”true” into the shortcode, like so:

[gallery autostart="true" slider="true"]

Posting video

To highlight video content, select Video as your post format. Make sure you are editing in HTML mode, and paste your embed code from YouTube, Vimeo or another video hosting service directly into the post content area.

Styling overview

Duet features a number of custom styles that can make your content stand out even more. Below are instructions for adding these custom styles to your content.

Pull quotes

Pull quote example

To style as a pull quote, you need to be in HTML mode and wrap your quote with a h2 heading with a class of “pullquote”, like so:

<h2 class="pullquote">Your quote goes here</h2>

Story end

Story End example

To style an asterisk at the end of a story, you need to be in HTML mode and wrap your asterisk with a span with a class of “story-end”, like so:

<span class="story-end">∗</span>


Ampersand example

To add a special style to an ampersand, you need to be in HTML mode and wrap your ampersand with a span with a class of “amp”, like so:

<span class="amp">&amp;</span>

Horizontal rule

Horizontal rule example

Horizontal rules (hr tags) are automatically styled in Duet, and give a distinct visual break in your content


Alert example

Alerts call attention to specific sections of your content. To style an alert, you need to be in HTML mode and wrap your content with a div with a class of “alert”, like so:

<div class="alert">Your content here.</div>

Alert example

There is also a special green style for “success” alerts:

<div class="alert success">Your success message here.</div>

Classic captions

Classic caption example

To style as a classic caption, you need to be in HTML mode and wrap your content with a div with a class of “classic-caption”, like so:

<div class="classic-caption">
<h2>A classic caption</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Classic titles

Classic title example

To style as a classic title, you need to be in HTML mode and wrap your content with a div with a class of “classic-title”, like so:

<div class="classic-title">
<h2>title of something</h2>
Issue number 15 Dec

Manual drop cap

Sometimes you need to add drop cap styling somewhere besides the first paragraph. You can manually add drop cap styling by going into HTML mode and wrapping the first letter with <span class="drop-cap"></span>, like so:

<span class="drop-cap">T</span>he first letter will be drop-cap.

Full-width and two-column page templates

Page templates example

Duet includes 6 different page templates, including two full-width templates: one with a single content column, and one with Duet’s unique two-column layout.

Simply select one of these templates from the Template drop-down on the Edit Page screen, and your content will be formatted accordingly.

Archives and sitemap pages

The archives and sitemap pages on the demo site are also set up using page templates. Simply select “Archives” or “Sitemap” from the Template drop down (seen above) to get the special display for these page types.

Adding posts to the slider

To add a post to the featured slider you need to do 2 things:

  1. Set a featured image for your post, with dimensions greater than 880 x 390 pixels
  2. Mark the “Show in Featured Slider” option in the Post Options meta box (usually near the bottom right side of the Post Edit screen).

Add to featured slider example

Configuring the slider

You can also configure some of the slider functionality through the Appearance → Theme Options page.

Under the “Logo & Featured Slider” section, you’ll see options to

  • Autostart the slider on page load
  • Toggle the slider animation

Marking a post sticky

Featured banner example

To add a featured banner (seen above) to a post, you need to mark the post “Sticky” under the visibility settings on the Post Edit screen:

Sticky post example

Changing the banner text

On your Appearance → Theme Options page, under the “Post Display” section, there is an option for “Sticky post text”. Whatever you enter here will be used as the text for the featured banner (seen above).

Change the color scheme

On your Appearance → Theme Options page, under the “Fonts & Colors” section, you’ll see a Color Scheme selector, which allows you to toggle between Duet’s 3 lovely color schemes: orange (default), green, and blue.

Typography Options

On your Appearance → Theme Options page, under the “Fonts & Colors” section, there are two options for controlling the fonts used on your site.

Duet font options example

The accent font is used for headings, block quotes and other highlighted areas.

The body font is used for all content not covered by the accent font.

Removing the first letter style

Drop cap example

By default, Duet features a unique drop cap style on all posts. To disable this, go to your Appearance → Theme Options page, and under the “Post Display” section check the “Remove drop cap on first letter” option.

Enabling and disabling the sidebar

By default, the sidebar appears everywhere on your site. If you’d like to have the sidebar appear only on Pages you’ve created, go to the Appearance → Theme Options page. Under the “Layout” section, you’ll see an option to control the sidebar display:

Duet sidebar options example

To disable the sidebar completely simply remove all widgets from the sidebar the Appearance → Widgets page.

Sharing buttons (Twitter, Facebook, Flickr, Google+)

Your sharing buttons are controlled in the Appearance → Theme Options page, under the “Footer” section.

Duet sharing options example

Simply fill in the URLs for each social site you want to include in your footer, and an icon will automatically be added for you. Leave any of the options blank, and no icon will appear.

Footer copyright notice

The option for your footer copyright notice is found below your sharing options, under the “Footer” section of your Theme Options page.

Using keyboard navigation

Duet features easy keyboard navigation on your featured slider and individual galleries. When on the homepage, using the left and right arrow keys will navigate the images in the featured slider (if it is active).

In addition, when on individual gallery posts, the left and right arrow keys can be used to navigate through the images in the gallery.

Looking for the self hosted WordPress.org version?

Browse our self hosted WordPress themes at The Theme Foundry website.