How To Design A WordPress Blog From Scratch

How To Design A WordPress Blog From Scratch

In this blog post I'm going to show you how to design a WordPress blog 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.

Let's do this!

build your blog with wordpress

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

Here's why you should choose WordPress:

  • It's 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.
  • Blog design. 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).
  • Plugins. There are thousands of plugins to customize and enhance your blog. There are entire businesses built on just being a WordPress plugin.
  • 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.
  • 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.

use the divi theme

Divi is more than a theme - it's a "visual blog builder". With Divi you have 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.

In comes the Divi theme from Elegant Themes. With Divi you can make every customization I'm going to recommend in this article - not so with other blog themes.

If templates are your thing, you can browse through hundreds of pre-made Divi layouts to gain some blog design inspiration. Then just choose a blog design you like and customize it to your liking.

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.

create a logo

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

Go to Canva and choose Logo as a template. Choose a logo style you like, make your changes and save the file.

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

create your menu

The purpose of your menu is to help visitors navigate to other sections of your blog. 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.
  • Blog. Rather than cluttering your menu by listing all your blog categories, link 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.

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.

your homepage is your roadmap

Many bloggers use their homepage to display their latest blog posts. But that's not the best use of your homepage.

Your homepage is where you put your best foot forward.

Create a new page (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.
  • 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 optin 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").

create a blog page for your blog posts

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.

Your blog posts are merely the vehicle by which you get traffic.

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.

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

With Divi you have complete control over how you design your blog page.

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

use black text on a white background

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 #424242.

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

write short paragraphs

Nobody likes reading a big block of text like this one. I bet most people will skip this entire paragraph because it is far too long to read. But how many people will skip the heading above this paragraph and the highlighted text below it? Probably nobody will. Your job as a writer is to not only create compelling content that keeps the reader on your page, but present it in a skimmable manner.

Limit your paragraphs to 1-3 sentences.

I know it's not grammatically correct but your blog is just a conversation with your readers so you should write like you talk. Remember it's just a blog - not a research paper.

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.

choose a font that's easy to read

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.

For my blog I use Open Sans. In my courses I use Lato. Other readable 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.

Using a blog theme like Divi allows you to change the font and instantly see what it looks like on the page. Play with the font, letter spacing and line spacing until you find the right look.

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.

set a large line height

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.

In Divi 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 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 do this by going to Appearance > Customize. Then go to Additional CSS.

set the right blog width

Narrow pages are difficult to read. The same applies to wide pages. With a wide article, it's easy to lose your place when you're reading a seemingly never ending line.

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

In Divi it's as simple as dragging the edge of a text module to your desired width. 

For other blog themes it's an almost impossible DIY job. You'd have to view the source code of your blog to find the name of the container to change it and then deal with changing the sidebar width and the parent container width too.

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 (what 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.

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.

We can safely assume the major search engines (Google, Bing, YouTube & Pinterest) are keeping tabs on this data.

Dwell time is important because it tells the search engine 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" in Google Analytics.

add links to your other content

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 your related content within the content, you will improve the chances that the reader will go to other pages on your blog and thus stay on your blog longer.

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 and which blog posts are most important.

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

List Style Articles Are Easy To Read

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.

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 winning headline.

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.

I always use Heading 2 to separate the major sections of an article.

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 bullelt 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? 

follow the numbers

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.

You can find this by clicking on Audience > Overview.

Make the changes to your posts and check back when you have enough data. 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!

How to design your own blog - without hiring a web designer! Perfect for new bloggers who are looking for a blog theme. #blogthemes #blogdesign #webdesign #design #sixfigurebloggers
408 Shares
Related Posts
  • 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 🙂

  • >