How I Cloned Medium's Blog Design On My Website

Author profile picture

@whizzoeZoe Chew

Product Builder. Run product / community for tech companies. About https://whizzoe.com

Note: This article is part of my toolkit newsletters ↗️ where I share resources about building things. Join me :)
As a product builder ↗️, I built micro tools to solve my own problems. For example: article tool, portfolio tracker, SaaS tracker, habit tracker, and personal finance tracker.
I’ve been writing on Medium about prototyping. Recently, I also set up my website to include all the articles that I wrote on Medium:

Clone a Medium blog

I hosted my blog site on CMS. At first, the design doesn’t look good on the existing theme. So, I decided to make a Medium clone for my new blog.
I’m going to share a list of setup, customization & toolkit that I used in making a Medium clone. And it’s a low-code! You can get yours done in 2 hours.

1. Starting point 💡

Whether it’s building an app or prototype any product idea, I like to start it off with an end goal in mind.
I wanted these Medium-like designs on my new blog:
  • Author Bio box
  • Article content, center
  • Bold heading & sub-heading
  • Line-height, spacing, font family
  • Grid display 3x for related posts
👉View my Medium clone here

2. My toolkit: Hosting the site 🍄

First of all, get the basic set up before the customization work.
Here’s what I use to host my blog site:

3. Configure OceanWP theme ⚒️

Once you’re logged in on WordPress Admin, go to “Customize”.
It’s a great starting point to modify the blog layout before adding additional CSS.
You can get 70% of the Medium-like customization done here.
Start by customizing OceanWP to achieve Medium-like cleanliness:
  • General Options > General Settings > Layout Style (Wide) > Main Container Width (1200 px)
  • Top Bar > General (uncheck: ENABLE TOP BAR)
  • Footer Widgets (uncheck: ENABLE FOOTER WIDGETS)
  • Footer Bottom (uncheck: ENABLE FOOTER BOTTOM)
I also eliminated some unwanted display through “Customize” > “Additional CSS”:
  • Disable page header
  • header.page-header {
    display: none;
    }
  • Disable site header
  • header#site-header {
    display: none;
    }
👉View my Medium clone here

4. What fonts does Medium.com use? 🔰

I was trying to find the “medium-content-serif-font”. Here’s the closest similar font that I use on my WordPress Medium clone:
  • Heading (Source Sans Pro, Semibold, 38px)
  • Sub-heading (Source Sans Pro, Semibold, 23px)
  • Content paragraph (Source Serif Pro, Regular, 20px)
Other font-related customization > “Customize” > “Additional CSS”:
  • Link with underline
  • a {
    text-decoration: underline;
    color: black;
    }
    a:hover {
    text-decoration: underline;
    color: black;
    }
  • Bullet point indent distance
  • ol {
    padding-left: 50px;
    }
    li{
    list-style-position: outside;
    }
👉View my Medium clone here

5. Author Bio box plugin 🧒

To clone the author info box on Medium, I use “Simple Author Box” WordPress plugin.
It allows you to add a profile photo, author name, description, and social links.
You can also generate a shortcode to display the author bio box manually.
Some configuration in “Simple Author Box” plugin:
  • Settings > Manually insert the Simple Author Box (On)
  • Appearance > Author avatar image style (Circle)
  • Typography > Author name font family (Source Sans Pro)
  • Typography > Author description font family (Source Sans Pro)
Other configuration at “Customize” > “Additional CSS”:
  • Disable author box border
  • div.saboxplugin-wrap {
    margin: auto;
    border: none;
    }

6. Display related posts 💎

Medium has this “Related reads” when you scroll down at the end of every post.
To clone this component on my WordPress blog, I’d need a 3-column display for related posts.
Here’s my OceanWP “Customize” > “Blog” > “Single Post” settings:
  • Layout (full width)
  • Heading Tag (H1)
  • Page Header Title (Post Title)
  • Related Post Columns (3)
  • Related Posts Image Width (700 px)
  • Related Posts Image Height (350 px)
Other column display customization > “Customize” > “Additional CSS”:
  • Disable clock icon
  • i.icon-clock {
    display: none;
    }
  • Related post title
  • h3.related-post-title {
    font-size: 24px;
    text-align: left;
    }
    h3.related-post-title a{
    text-decoration: none;
    }
👉View my Medium clone here

7. Newsletter signup forms 💌

There’re many embeddable newsletter signup tools. To embed on Medium, you can do so by adding an Upscribe form toward the end of your blog post.
I personally prefer using Substack newsletter although it doesn’t have the Medium embed option.
In my case, I embed Substack code on my blog section and simply link my Substack within my Medium posts.
Here’s my Substack form on my blog:
👉View my Medium clone here

8. Post view count 📊

One thing I like about Medium is that it tracks & displays post view count per post.
It’s a quick data point to understand which blog title catches readers’ interest.
In my Medium clone, I installed a WordPress “Post Views Counter” plugin to help me achieve that feature.

9. WordPress vs. Medium — which one is better 🤷🏼‍♀️

I get asked a lot on this question — especially from the tech Twitter community.
There are pros and cons between these two platforms.
But here’s how I decide:
  • I cross-post my content on multiple platforms, i.e. Medium, personal site, LinkedIn and Substack to expand my reach
  • I think of it as adding another distribution channel on top my content marketing effort
  • Multi-distribution increase chances of getting your work discovered (potential leads can be coming from everywhere)
  • Posting on personal site allows me to have SEO benefit and integration with online marketing funnels & campaigns
  • Posting on Medium and other publication sites doesn’t give me SEO traffic but it gives social proof on my writing presence
👉View my Medium clone here
[1] Find me on Personal Site / Twitter / LinkedIn 🔥
[2] In case you miss out, I can send my upcoming toolkit to your inbox — Click here to join my newsletter 💌
[3] If you’re feeling generous today, you can buy me a coffee ☕
Author profile picture

@whizzoeZoe Chew

Read my stories

Product Builder. Run product / community for tech companies. About https://whizzoe.com

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!