How I cloned Medium blog design on my Website?

Here’s my low-code way to set up your blog site with Medium-like design

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 toolportfolio trackerSaaS trackerhabit trackerand 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:

https://twitter.com/whizzzoe/status/1146014479504687104?s=20

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

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:

I’m using OceanWP WordPress theme for my Medium clone

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;
}

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;
}

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.

3x 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;
}

7. Newsletter signup forms on Medium 💌

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:

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 ☕