Before you go, check out these stories!

0
Hackernoon logoHow I Cloned Medium's Blog Design On My Website by@whizzoe

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:

  • Siteground (I‘m using WordPress Hosting package)
  • WordPress (for content creation and management)
  • OceanWP (WordPress theme)

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!