Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. WordPressium: Creating a Medium-like Experience
  • like 7 17

    WordPressium: Creating a Medium-like Experience

    1. February 2015
    2. Daily
    3. read 804

    Final product image
    What You'll Be Creating

    If you've visited articles on Medium, you know its clean, readable lines. The articles load fast and read easily on phones, tablets and desktops. Here's a sample from one of my Medium articles, Shining Light on Internet Rage:

    Mediums Clean Readable Lines - Shining Light on Internet Rage

    In this tutorial, I'll guide you through selecting themes and plugins to turn your WordPress site into a Medium-like experience. We'll focus on functionality as well. I'll walk you through plugins that show reading time, and how you can let the user select text and comment inline or share it to Twitter.

    Here's an example of Medium's presentation of expected reading times:

    Medium Reading Time

    Here's an example of Medium's select and comment and share feature:

    Medium Select and Comment or Tweet

    Here's an example of inline comments in another of my Medium articles:

    Medium Inline Comments

    Starting From Scratch

    If you'd like to build an entirely new site, you can follow my visual guide to WordPress installation here. You may also be interested in the Ghost open source blogging platform which I profiled earlier this year on Tuts+. For this example, I'm actually going to migrate the Ghost site I built in the earlier piece to a Medium-like WordPress experience.

    Here's what my earlier Ghost home page turned out to look like using a Medium-like theme called Ghostium:

    Breakupsio Site Using Ghost - Previous Tuts Tutorial

    If you want to adapt your existing site, just follow along as we explore Medium-like themes and plugins.

    Themes That Resemble Medium

    For this tutorial, I'm going to install the Readme "Readable WordPress Theme" available at Theme Forest, a Tuts+ network company, for $48 (it was my choice, not Tuts+).

    Purchase Readme at ThemeForest

    If you're willing to pay for a theme, you might also want to check out these three:

    There's also a variety of great free Medium-inspired WordPress themes. Here are a few excellent roundups:

    Of these, you might begin by checking out Fastr by Kanishk Kunal. He hosts a demo here. Here's a screenshot of Fastr:

    Fastr - a free open source WordPress theme like Mediumcom

    If you find a free theme that you like, please post your experience in the comment thread below for other readers to benefit from.

    Installing and Configuring Readme

    You can purchase the Readme theme at ThemeForest, and then download the WordPress .zip archive from the site.

    Visit your WordPress dashboard, and click Appearance > Themes > Add New > Upload.

    Upload the Readme theme to your WordPress site

    As with any WordPress theme, there's a lot of site-specific configuration and theme-specific user interface to work with. As these go, Readme is relatively clean. It has a simple tabbed dialog for most settings:

    Readme Theme Options Tabbed Dialog

    It also offers a variety of nice layouts, like its Masonry option:

    Readme Masonry Layout

    You can check out how I configured my finished site at breakups.io. This is my cover layout:

    Breakupsio home page with readme theme

    Here's a story page:

    Breakupsio story page with readme theme

    I like the way it turned out. If I had more content, I might have opted for the Masonry layout.

    Medium-Like Plugins

    Now, let's jump into Medium-like plugins: Select Text and Share, Reading Time, and Inline Comments.

    Select Text and Share

    The free Selection Sharer plugin by Hans van Gent lets you add text selection and email and Twitter sharing to your site. It's easy to install and worked perfectly for me out of the box.

    WordPress Plugin Selection Sharer

    Here's what it looks like on my site when you select text and share it. You can also give it a try:

    Selection Sharer live at Breakupsio

    I was impressed with how well this worked without any configuration. An alternative is the free Quotable plugin which offers select and tweet.

    I do worry a bit about the discoverability of this feature, but any time someone goes to copy text, they'll discover it.

    Reading Time

    As you can see from the images above, the Readme theme provides built-in reading time. However, there are plugin options if you choose another theme.

    The free Reading Time plugin displays time to read and a progress bar in the post.

    WordPress Plugin Reading Time

    There are also some open Jquery libraries that do the same thing if you'd like to integrate your own. e.g. Michael Lynch's Reading Time.

    Inline Comments

    Sorry to disappoint, but it turns out that you can't easily do everything Medium does. Inline comments are difficult to recreate, as they rely on a lot of theme support. WP Tavern explored this topic more fully. They settled on the free Inline Comments plugin. But neither of the solutions they looked at provided a great user experience. 

    In the end, I chose to remain with my favorite, the free Disqus plugin, though it doesn't offer inline capability at this time.

    Suggested Reads

    Now, let's take a step beyond Medium and add something cool that The New York Times does well: a suggested next read plugin. The free UpPrev plugin displays a flyover promo to the previous, next or random post on your site:

    WordPress Plugin upPrev

    Since personal blogs often have a high bounce rate, e.g. readers click away after reading one article, upPrev can help keep people on the site. Even though I use widgets for recent and popular items, I like the concept of using an animated flyover to promote a specific piece.

    UpPrev has a simple plugin settings dialog and worked easily for me:

    UpPrev Plugin Appearance Settings

    You can choose how upPrev selects content to present, for example, previous, random or related, with the Yet Another Related Posts (YARPP) plugin:

    UpPrev Plugin Content Settings

    Here's what it looks like as you scroll down to the bottom of a page on breakups.io:

    UpPrev Flyover on Breakupsio Story Page

    In Closing

    I hope you've enjoyed this post. Medium and WordPress are both exciting platforms and it's great when we can take things we like from one and implement them in another. It's also interesting when you find things such as inline comments that are still hard to do in WordPress. Medium does a lot well and the WordPress team has its work cut out for it.

    Please feel free to post corrections, questions or comments below. I try to participate in the discussions. I'd be especially interested in your experience with themes and/or alternate plugins. You can also reach me on Twitter @reifman or email me directly. If you enjoyed this tutorial, please visit my instructor page to see my collections of other tutorials.

    Related Links

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    7
    Add a comment...
    4elements
    Comments

By - category

    By - date

      Copyright © 1999 - 2025 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News