How to Design a Blog on WordPress From Scratch

Last updated on June 5, 2020  ∙ by Edwin Contreras2 comments
WordPress blog design ideas and inspiration

I may earn a commission for purchases made through links in this post.

In this blog post I'm going to show you how to design your blog on WordPress - from scratch. To start, let's establish that a good blog design puts the focus where it should be: on the content.

Far too often new bloggers get carried away with their blog design and turn their blog into a hoarder house.

Cluttered blogs totally overwhelm new visitors and as a result, they bounce.

When it comes to your blog design, simple is better.

I don't care how great your content is - if your readers aren't sticking on your page long enough to read it - it just doesn't matter. So let's put the focus on designing a reader-friendly WordPress blog.

Once you unlock the formula for a blog design that's easy to read, you will notice better blog engagement stats, more blog comments, more social shares and even better Google search rankings.

Update: In fact, Google announced that in 2021 page experience is going to be a ranking factor.

Recommended tools for this blog post:

Ready to design a website with user experience in mind? Let's do this!

Step 1: Choose WordPress, the best blog platform

This goes without saying, but I think I need to say it anyway: build your blog with WordPress.

While the more user-friendly Wix and Squarespace are worthy competitors, neither are better than WordPress. Here's why:

  • WordPress is free.

WordPress is open-source software that is free to use and is constantly improving. Use BlueHost and WordPress comes pre-installed so you can start building your blog right away.

  • You can design your blog or website with zero experience.

With WordPress you have complete control of your blog design. There's even entire websites (that don't even have a blog) that run on WordPress. If you visit a website, any website, there's a better than 1 in 3 chance it runs on WordPress (source).

  • Thousands of plugins.

There are thousands of plugins to customize and enhance your blog. There are entire businesses built on just being a WordPress plugin. For example, the SocialWarfare plugin I use for my social share icons.

  • Software integrations.

Over time you will need high-end tools to help grow your blog such as: ConvertKit for email marketing and Thrive Leads for lead generation. All of these tools integrate seamlessly with WordPress.

  • There are a ton of free resources.

There are tons of free resources on WordPress. If there's a question you have, odds are it has already been asked and answered. Here are 55 free tools for your WordPress blog.

Bluehost

If you want to start a blog and make money with it, you can't go wrong with Bluehost. It comes WordPress pre-installed and you get a free domain name too.

Step 2: Design your blog using a visual theme builder

When you design your blog, you need to have full control of what everything looks like on the page.

For this, rather than getting an out-of-the-box WordPress theme, I recommend using a visual theme builder such as Divi from Elegant Themes or Thrive Theme Builder.

For new bloggers, I recommend Divi because it's super easy to use. With a theme builder like Divi you get complete control to design your entire blog.

When you choose a free theme you are essentially "stuck" with your blog design. Sure, you might be able to make some changes such as modifying the theme colors, adding a logo and changing your font.

But it is not possible to entirely remodel your blog without hiring a designer (or learning how to code). Even the pro version of your free theme doesn't give you the freedom to alter every aspect of your blog design.

But with Divi you can make every customization I'm going to recommend in this article. And if templates are your thing, you can browse through hundreds of pre-made Divi layouts to gain some blog design inspiration.

Other blog themes I recommend include:

If you're going to use one of these themes, you can re-gain some control of your blog design by using them in conjunction with a page builder like Elementor or Thrive Architect.

Step 3: Choose your brand color(s)

Many new bloggers make the mistake of overdoing it when it comes to the color scheme of their blog. It is pretty hard (if not impossible) to create a colorful blog that looks good. I know I can't do it.

You can use a color palette generator like this one from Canva to find colors that go well together. But what looks good on a palette doesn't always translate once the colors spread out on your blog.

Instead, I have a much simpler way choose your blogs' color scheme. Choose 3 colors - as long as the first two are black and white.

I know this sounds insane, but you cannot go wrong with this formula.

And when it comes to blog design, it's more about not messing it up rather than creating a visual masterpiece. After all, it is your content that should matter the most.

Step 4: Design a logo on Canva

You don't need to hire a graphic designer to design a logo. You can do this!

Go to Canva and use their logo maker tool (or search for logo templates if you're already a Canva user). Choose a logo style you like, make your changes and save the file.

When you create your websites' logo, keep it simple. You'll notice the best logos are the simplest ones.

To add your logo to your blog, in most WordPress themes you go to Appearance > Customize > Logo.

Canva

I create all of my Pinterest pins, logos, featured images and ads all with Canva.

Step 5: Create a menu for easy navigation

The purpose of your menu is to help visitors navigate to other sections of your website. Rather than listing all of your blog categories and sub-categories in your menu, I prefer to keep it simple.

Here's what I recommend having in your menu:

  • About me

Your about me page will be one of the most visited pages on your blog. Get my about me page template here for help writing your about page.

  • Blog

Rather than cluttering your menu by listing all of your blog categories, consider linking to your blog page instead.

  • Resources

Create a page where you list your favorite tools or resources. It's a great page to earn affiliate income. My resources page has the tools I use to run this blog. It's a valuable resource for bloggers and I earn affiliate income on the tools that have an affiliate program.

  • Call To Action

This page is the most important page on your blog. It may be a "Shop" link, a "Courses" page, or simply a landing page for your email list.

When it comes to your menu, simple is better. If you overwhelm the reader with too many options, they will choose none. Instead, focus their attention on the parts of your website that are the most important to you.

Step 6: Design a conversion-focused homepage

Many bloggers use their homepage to display their latest blog posts. That's not the best use of your homepage. Your homepage should serve as a roadmap.

To create a custom homepage, create a new page first (Pages > Add New). To let your blog know that this page is what should be displayed as your home page, go to Settings > Reading > Your homepage displays > A static page and choose your newly created page.

Here's how to design an awesome homepage:

  • Header

Here you have your logo and your menu. This is VERY valuable real estate, so don't make this section too tall.

I recently moved my logo to be on the same line as the menu to save space.

  • Above the fold

Put what is MOST important to you in this section. A common practice is a section about you along with a freebie with an optin form. Take advantage of this section to establish credibility. Why should someone learn from you?

  • What do you need help with

Your homepage is like a catch-all. You don't know why the person is on your page. Make sure they don't get lost and ask them what they need. You can link to your main blog categories here.

  • Your best content

Include links to your most popular posts. But think of this from the reader perspective. If someone lands on your homepage, what content could help them the most?

  • Footer

You can add an additional module in the footer and display an opt-n form, a paid product, a contact form (if you're a freelancer or offer services) or links to your social media accounts (if you are an "influencer").

Step 7: Create the blog page and category pages

Your blog posts belong on a blog page. It makes sense because what we are doing is building an entire website. Your blog is just a part of your website.

You have to think bigger than just a blog. You are running a business here.

Your blog posts exist only to bring free traffic to your websites (also known as content marketing).

Let's design your blog page now. Create a new page to design your blog page and then add a link to this page on your menu.

Displaying your posts in a chronological order is not the way to go here.

Design your blog page from scratch with the reader in mind. It would be far more useful to display your blogs by category instead.

You can see how I do it on my blog page here.

I also created category pages as well here: Start a blog, Grow your blog, Make money.

Step 8: Design a template for your blog posts

If you're not using a visual blog theme (or a page builder like Elementor) you don't have much choice on how to design your blog posts. It's either a wide blog post page or a narrow one with a sidebar.

But if you are using a blog page builder like Divi or Thrive Theme Builder, you have full control over how your blog posts look.

To make your content easier to read, make sure the width of your content isn't too wide. It's easy to lose your place when you're reading a seemingly endless line.

In order to keep the reader from becoming overwhelmed with too much text on a line, set the width of your content to between 700-900px wide.

Step 9: Make your blog content easy to read

Now it's time to design the content of your blog posts. This is where the reader will spend the bulk of their time, consuming your content.

Again, the principle of keeping it simple still holds true.

I get it, you're creative. But keep the creativity for your header, sidebar or footer. In the article section, don't mess with the colors!

Only use black text on a white background.

For reading text, this is the only color contrast combination that works. You can choose off-white and something close to black. The color code of this text is #252525.

There's a reason why just about every textbook or novel ever published has utilized this standard - it's just easy to read.

Step 10: Choose a font that's easy to read (and loads fast)

When it comes to fonts, there are many options to choose from. Here's another example where simple is better.

To make your content easier to read (and to keep the visitor on your blog longer) use a readable font.

I use and recommend Google Fonts.

For my blog I use Montserrat at the moment. In the past I've used Open Sans and Lato. These are all easy-to-read lightweight Google fonts. Other readable non-Google fonts include Helvetica, Georgia and Verdana.

Another benefit of these fonts is that they are pretty universal. Regardless of whether they're viewed on a mobile/desktop device, Mac/Windows or Chrome/Safari, your text will be seen as intended.

Step 11: Use a larger font size

For a long time, text on webpages was small - similar to the text you'd find in a magazine, newspaper or a book.

That was then and this is now. For some reason, font sizes have been increasing and I couldn't be happier. You have no idea the amount of times I would scale up a page to 125% just to comfortably read the content.

When you choose a large font size, you are ensuring your content can be read by everyone. Not everyone has 20/20 vision or wants to strain their eyes to read small text.

The font size I use for my blog is 20 pixels on desktop and 18px on mobile.

Step 12: Set a large line height and paragraph spacing

Spacing is important for an easy smooth read. The last thing you want are all your lines squished together. For my blog, I use a line height of 1.6.

If you use a theme builder like Divi and Thrive Theme Builder you can edit the line height and instantly see what looks good.

For other blog themes it's a bit more complicated as you'll need to add additional CSS code.

For many blog themes the CSS code is: .entry-content p { line-height: 1.5; }

And to edit the space between list items it's: .entry-content ul li { line-height: 1.5; }

In a lot of themes, you can edit the css by going to Appearance > Customize > Additional CSS.

Play with the font, letter spacing and line height until you find the right look.

Step 13: Write like you talk

You're writing a blog that helps people just like you - not a research paper. As such, your writing should be in a more relaxed informal tone. This is one of the ways you can connect with your audience.

So break the rules and start sentences with and, so, because, but and also. I know it's not grammatically correct, but your blog is just a conversation with your readers so you should write like you talk.

To help make your blog posts even easier to read, break up big blocks of text. There's nothing wrong with 1 or 2 sentence paragraphs. And there's nothing wrong with short sentences either.

While you may find this hard to believe, I use Grammarly to help write my content and keep it casual and conversational.

Grammarly

You're going to become a better writer by installing and using the free Grammarly browser extension to edit your content.

Step 14: Make your text stand out

Make use of typographical emphasis to make your key points stand out.

Your blog post is a story and it's your job to take them on a journey. And a journey without twists and turns is just plain boring (more about this in my how to write a blog post guide). Think of text the same way.

Break boring regular text with bold, italics, underline and even highlighting to make your text stand out.

Step 15: Use visual content in your blog posts

Adding visual content to your blog posts is another way to keep their eyeballs on the page.

You can get free stock images to use in your blog posts from Pexels (who I use) and Unsplash (also free) to help illustrate your points.

For a wider selection of stock images you won't find anywhere else, try 123RF (paid) and DepositPhotos (paid).

In addition to stock images, use screenshots if you're describing how to do something online or reviewing a service.

I usually like to add one picture after every heading. That might be a bit of overkill - but definitely don't stick with text-only blog posts.

You can go further and embed Youtube videos within your content. Doing this will increase your average session duration and can help demonstrate what you're describing.

Step 16: Organize your content into sections

Whenever I go to an article, I don't read the whole thing, word for word. I scan through the headings and only read the section that directly answers my question best.

It's so much easier to consume blog posts when they are divided into readable sections rather than an endless block of text.

Don't just use bold to separate your key points. No, use headers. They are also valuable as an on-site SEO tool. Headers (h1, h2, h3, h4) let Google know what the main key points in your article are.

For example, the title of this blog post uses an h1 tag and each of the steps use an h2 tag.

Step 17: Use bullet points to outline key points

In addition to separating your content into sections with headings, you should also list key points in bullet points.

Here's why they work:

  • Outline key points.

When you're trying to break down a concept, bullet points make it easier to explain.

  • They're "sub-headers".

Think of bullet points as sub-headers within the main headers of your article.

  • They're amazing!

Why? Because they are almost always read, not skipped. See what I mean?

Step 18: Write list-style articles (listicles) and how-to's

Ever wonder why you see list style posts everywhere? It's because they work.

Even if you don't like to admit it, you love to click on list posts. There's no shame in that. I do it all the time too.

List posts outline key points in a highly scannable way.

These "listicles" get a bad rap, but it's not the articles themselves that's the problem - it's the clickbait headlines.

So as long as you don't get carried away with Buzzfeed-style headlines you'll be alright.

How-to's are also very effective at getting a high click-through rate and keeping readers on your site longer.

I wrote a how-to on how to write a headline here.

You can test the score of your headlines using Coschedule's Headline Analyzer tool.

To take this to another level, you can test which headlines get the most engagement on your blog using Thrive's Headline Optimizer plugin.

The way it works is you create multiple headlines and let the plugin run a test to determine the headline with the highest engagement score.

Step 19: Check your analytics

Google Analytics

The numbers don't lie. The answers to whether any changes you make are working will always come from your stats.

Look at your Google Analytics data and make note of your engagement stats. Specifically look at the average session duration and pageviews per session metrics.

Make the changes to your posts and check back when you have enough data.

Use the ExactMetrics plugin to see how your best pages perform right on your WordPress dashboard. I hate going to Google Analytics, so being able to see my stats right from WordPress is great.

Step 20: Focus on your "Dwell time"

Google tries to gauge user experience by looking at a visitors' average dwell time on your blog.

Dwell time is defined as the length of time a person spends on your blog, starting from a click on a search result and ending when they return to the results page (source).

Dwell time is important because it tells Google that the reader found exactly what they were searching for. In other words, the search engine did their job by presenting the perfect search result for that particular search query.

While you don't have access to this data, you can however look at your "average session duration" for each page in Google Analytics or in the Reports page with the ExactMetrics plugin.

Step 21: Add internal links to other relevant content

Another way to improve your dwell time is to have the user navigate to multiple pages per visit. The longer the stay on your website the better your dwell time is going to be.

A good blog design provides a good user experience. And a huge part of providing a good user experience is making sure the reader gets the information they came for - and gives them the opportunity to learn more.

This is why I like to look at Google Analytics for the pages per session and the bounce rate data.

The bounce rate is the percent of users who land on your blog and leave without going to another page. When you provide a good user experience you will have a lower bounce rate.

By adding links to related content within your blog post, you will improve the chances that the reader will go to other pages on your blog and thus stay on your blog longer.

I use LinkWhisper to help me identify internal link opportunities. The feature I use the most is the ability to add internal links in older content to my new post.

Linking to your other content not only improves user experience, but it helps with Google too. With a good internal link strategy, you can tell Google what content is related to each other and which blog posts are most important.

For example, this would be the perfect place to drop a link to my Google SEO strategies article.

Conclusion

If you followed these usability principles in your blog design you can expect to see:

  • Longer time on page.
  • More pages visited.
  • More blog comments.
  • More social shares.
  • An improved Google ranking.

If this article has helped you design your own blog, it would totally rock my socks if you hit the Pin button below to save this blog post on Pinterest!

Until next time,
Edwin, DoSixFigures.com

just a little > about me

About edwin

Edwin Contreras is the professional blogger behind Cash The Checks and Do Six Figures. Over the last 17 years, he has started over 100 profitable blogs on his way to a six-figure income as a full-time blogger. He is now obsessed with helping people just like you escape the 9 to 5 and make serious money online. You in?

learn more > earn more

continue > the conversation

  • Winnie Xu says:

    I’ve seen you mention the Divi template many times in several of your articles. It definitely sounds like it’s worth checking out! Also, just a quick question about user engagement: are there specific ways to reduce bounce rate? Any suggestions on how to catch the reader’s attention quickly or keep them interested when they land on the blog home page? Thanks 🙂

    • Always give the user plenty of internal links to click on. That’s the best way to reduce the bounce rate.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    © Do Six Figures  /  Privacy  /  Disclaimer  / Courses

    >