Medium WordPress Theme

Created: 12/1/2012
By: Mike McAlister

Thank you for purchasing Medium! If you have any questions that are beyond the scope of this help file, please feel free to check out the Support Forum.


Recommended Plugins

Medium uses a few plugins to provide functionality to the theme.

  • Contact Form 7 - This plugin creates a fully functional contact form for your site. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.

    1. Log in and navigate to Plugins → Add New.
    2. Type "Contact Form 7" into the Search input and click the "Search Widgets" button.
    3. Locate Contact Form 7 in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. There will now be a Contact menu item on the WordPress admin menu. See below for more instructions on using this plugin with the theme.
  • Okay Toolkit - This plugin provides several social media widgets including Twitter, Dribbble, Flickr and social media icons. Once installed and enabled, you can find the social media widgets in your Widgets section. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.

    1. Log in and navigate to Plugins → Add New.
    2. Type "Okay Toolkit" into the Search input and click the "Search Widgets" button.
    3. Locate the Okay Toolkit in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. Navigate to Settings → Okay Toolkit to modify the plugin's settings. The widgets will be available in Appearance → Widgets.

Menu Setup

WordPress menus can be found under Appearence -> Menus.

  • You'll need to create at least one new menu for the header. Medium also supports a custom menu, which you could use in the widget area. Click the + to add a new menu.

  • Now, on the left hand side, select the pages you would like to have added to the menu. You can then click "Add to Menu" and they will show up on the right side of the page. You can drag the pages around to arrange them the way you'd like.

  • Create a drop menu by dragging menu items under and to the right of another menu item.

  • Save the menu when finished.

  • Now that you have the menu created, you need to assign it in the Theme Locations window located on the left. From the drop down menu, select the appropriate menu for the header and save.

Contact Page

The Contact Page uses the Contact Form 7 plugin, which can grab for free on the WordPress plugin repository. Once installed, you'll see there is a Contact link in the left hand sidebar of your WordPress admin.

  • If you haven't already, create a new page called Contact.

  • Go to the Contact menu on the left admin menu to configure your contact form. By default they give you a simple form with Name, Email, Subject and Message. To keep things simple, I suggest using the default form. Otherwise, to customize this form even further, check out the Contact Form 7 docs page here.

  • After you've configured and saved your contact form in the Contact menu, you will be given a small shortcode like this: [contact-form 1 "Contact form 1"]. Copy this shortcode. We'll use this to add the form to our Contact page.

  • Now head back to your Contact page. Paste the Contact 7 shortcode that you copied into the body of the post. Update the post. You should now see the form on the contact page.

Archive Page

Medium comes with an Archive page template which displays all of your latest posts, pages and categories.

  • Create a page called Archives (or whatever title you'd like).

  • On the right hand side of the page, in the Page Attributes pane, select Custom Archive from the Template menu.

  • Once finished, publish your page and check out the archive.

Custom Page Titles

You can set a custom page title to appear in the header area of your page, just like I did here. You can do so with a Custom Field.

  • Scroll down the page a bit and look for the Custom Fields box. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked.

  • Now you can add the Custom Field. The Name is going to be pagetitle and the value will be your page title. See this image for reference: Custom Page Title.

  • Once you've added the custom field you can publish or update your page to check out the title.

Post Styles

Medium comes with a few custom element styles, which are used to easily add extra styling to your WordPress posts.

To use the post styles, simply select your text and then select from the drop down which style you would like to apply. You'll be able to see the changes live, in your editor.

  • Intro Title - As seen on the demo, this is a nicely styled block of text to introduce your page. Similar to blockquote styling.

  • Highlight Text - As seen on the demo, this styles your text with a highlighted yellow background.

Using the Theme Customizer

Medium is customizable via the WordPress customizer. Here, you can set a custom background image, upload a logo and set your link/accent color.

  • To access the theme customizer, click Appearance -> Customize in the WordPress admin menu.
  • You should now be in a live preview of Medium, with the customizer on the left.
  • Use the various menus to set the site title and description, background, logo, accent/link color and more. Specific Medium settings can be found under Medium Options.
  • Medium also gives you the option to use a Retina sized logo. The benefit of this is sharper images on high definition devices. To upload a Retina logo, you need to upload your logo at 2x the resolution you normally would. So if your logo is 150px x 150px, you would need to resize your logo to 300px x 300px. The larger image will be scaled down accordingly for regular screens. Be sure to enable the Retina logo under the logo upload option.
  • The Accent Color setting will change the accordion menu icons on the left sidebar.
  • Add custom CSS to your theme by adding it to the Custom CSS text box.
  • When you're finished making changes, click Save & Publish to save the settings.
  • Check out your site to confirm your changes.

Infinite Scrolling

Medium utilizes a script called Infinite Scroll to auto load posts as users scroll down the page. This essentially means there is no footer or end of page until the user runs out of posts. You can disable or enable infinite scrolling in the Customizer. Just visit Appearance -> Customize -> Medium Options to toggle this on or off.

Left Sidebar Widgets

The left sidebar supports all of the default WordPress widgets as well as the widgets provided by the Okay Toolkit.

Right Sidebar Widgets

Medium also supports widgets in the right hand sidebar. On the theme demo, I used a Dribbble widget, Twitter widget and Retina social icons widgets that were provided by the Okay Toolkit plugin. See above for info on the Okay Toolkit.

If you would like to add Twitter, Flickr or Dribbble to this section, be sure you have the Okay Toolkit plugin installed.

Creating Mixed Media Posts

Medium makes it easy to share your images and videos. Follow the instructions below to add a variety of media posts.

Featured Image Posts

  • Create a new post and add a title and description.

  • Write your content and add whatever styling you want.

  • On the right hand side of your page, you'll see the Featured Image pane. Click Set Featured Image and upload your image. Once uploaded, scroll down and click Use as featured image. Once set, you can close the image upload window.

  • Once you've added the featured image and content you can publish and preview your post.

To use the gallery feature, you must have the latest version of the Okay Toolkit plugin and WordPress 3.5 or newer. Be sure to read the Toolkit setup above and also check out this quick video I made showing how it works.

  • To use the awesome new WordPress galleries, you first need to be running WordPress 3.5. Secondly you need to install the Okay Toolkit. See instructions above.

  • Once you have the Okay Toolkit installed, go to Settings -> Okay Toolkit. Enable the Enable Gallery Feature towards the bottom of the page and Save your settings.

  • Create a new post and add a title and description.

  • On the right hand side of your page, you'll see the Format pane. Click Gallery to set the post format and activate the gallery options.

  • Under your post editor, you'll see the Okay Gallery pane. Click the Edit Gallery button. Once the Edit Featured Gallery dialog opens, upload the images you'd like in your gallery, or select them from images you've already uploaded with the Add to Gallery link. Once your images are selected, click Add to Gallery. When finished, you can arrange your images by selecting and dragging them into position. If the theme supports image captions, you can add one in the Edit Featured Gallery page.

  • Once you've added your images and content you can publish and preview your post.

Video Posts

  • Create a new post and add a title and post content.

  • Next, scroll down the page a bit and look for the Custom Fields box. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked.

  • Now you can add the Custom Field. The Name is going to be video and the value will be your embed code. See this image for reference: Video Custom Field. The embed code should look something like the code below. Click Add Custom Field.

Sample embed code:
<iframe src="http://player.vimeo.com/video/4143170?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="1200" height="600"></iframe>

  • Once you've added the custom field and content you can publish and preview your post.