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 🙂
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:
- 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
- Disable site header
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
- Bullet point indent distance
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
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
- Related post title
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