How I cloned Medium blog design on my Website?

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

I’ve been writing blog posts↗️ with focus on sharing toolkit & resources about building things. Recently, I bought a new domain↗️ to include all my articles that I wrote on Medium:

https://twitter.com/whizzzoe/status/1146014479504687104

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 this 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 startup 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 profile photo, author name, description and social links.

You can also generate short code to display 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 💌

If you want to collect email signups from your Medium contents, I suggest adding Upscribe on your blog post. 

It’s an embeddable lead generation form. Super easy to set up.

You just need to copy the Upscribe embed code, and paste it on your Medium post by “Add an embed”.

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

👉 [1] Share this article with your friends

😍 [2] Find me on Personal Site / TwitterLinkedIn

✅ [3] Subscribe below to get my upcoming toolkit

Close Menu