How To Create & Style Your WordPress Blog Area

Website Design

I don’t know how things are going in your house when it comes to eating vegetables, but sometimes I feel like I’m losing the will to live. One kid hates salad and avocados, but loves broccoli, the other tolerates kale but hates anything bean-related. 

The only thing they agree on is that all forms of potato are excellent. 

But we can’t exist on beige foods alone.

For many people, blogging is the business equivalent of eating your vegetables. You know it’s good for you, you feel better when you’ve done it but it’s easy to put off.

I know there will be some reluctant bloggers reading this. The bottom line is that you will struggle to grow your audience, build trust and get traction with SEO if you don’t blog. 

“But Melissa, does the world really need yet another post by little old me about x subject?”

In the grand scheme of things, no. 

But do your ideal clients need to know that YOU are the expert who can help them? 100% yes.

They need and want expert content that you have the power to give them and if you don’t meet that need, they will find someone else who does. This kind of content is vital when it comes to relationship building in the middle of your funnel.

Not only that, fresh content can be important when it comes to getting found in Google search results. 

It’s time to eat your business vegetables, kids. And to help you do that, I’m going to show you how to create a beautiful blog area in your website that you can’t wait to use. 

Note: If you want to just dive straight into the video tutorial, skip straight to the end of this post.

Setting Up Your Blog Area In WordPress

Back in the day, it used to be quite hard to create an exciting-looking WordPress blog area, but times have certainly changed. With page builders like Divi and Elementor offering theme building options, you can now create templated layouts that you can use to universally style every single blog post. 

But let’s start with the basics and that begins at the WordPress level. 

  • First things first, head over to Settings > Reading and set your posts page to blank. This will ‘unhook’ your blog page from the auto-generated blog area style that your theme outputs, leaving you free to build a beautifully style blog landing page using your theme or page builder.
  • Go to Settings > Permalinks and set your blog permalinks to post name. Including the date and day doesn’t give you an SEO advantage and creates long, cluttered URLs.
  • Create a page called Blog (or the name of your choice) and plan your layout. The beauty of using a page builder is that you can build your main blog area however you want. No more trying to style ugly looking widgets with CSS. Build your own sidebar the way you want it.
  • Top tip: Save your sidebar modules as global, so that when you update one template, it updates everywhere.
  • Options include…

– A header slider showcasing your latest posts
– A featured post area showcasing your most popular posts
– Sidebar or no sidebar?
– A category menu and search function

Creating Theme Templates To Style Your Posts

Let’s talk about creating theme templates. Using templates or theme builder layouts, gives you the power to apply a layout style to every single blog post (though you can also create templates that style a particular category or even a single post if you want to).

Top tip: NEVER use your page builder on posts or products, when you have a template option. Imagine having to restyle every single blog whenever you have a redesign or not easily being able to switch from one theme to another without re-editing every post individually.

This is where dynamic content comes in. In WordPress terms, it refers to any component that can vary from post to post or even from visitor to visitor, yet still perform the same job. 

A featured image is a good example of dynamic content. It will change from post to post but will always be in the same position. 

Dynamic content fields or modules are the building blocks you use to create templates that can style any post type in your website, from blog posts to WooCommerce products. 

Both Elementor and Divi contain modules for your post title, featured image, post meta, comments and page navigation, meaning that you can build your single post template exactly how you want it and have the flexibility to make site-wide changes whenever you want. 

Styling Your Category Archive Pages

Once you’re happy with your main blog area and single post template, don’t forget to create a post archive template too. A category page is a good example of an archive page. 

If you don’t do this, your standard theme output will kick in automatically and certainly not look as stylish. 

The easiest way to create an archive layout, is to duplicate your main blog page layout and tweak it if required before assigning it to your category pages. 

Both Divi and Elementor have a setting inside the blog module which you can toggle on for archive pages. 

Other standard tweaks include:

  • Adding a Post Title module to make it clear which blog category your visitor is viewing.
  • Removing any clutter from your header. Personally, I tend to remove features like post sliders or featured posts to avoid confusion.
  • Make sure you have a menu or link to easily view all posts.

Using the Gutenberg Block Builder

Now it’s time to get blogging. You’re going to need to learn to love Gutenberg, also commonly known as the block builder. 

I know there are still some doubters out there, stubbornly clinging to the Classic Editor, but it’s time to move on. Gutenberg isn’t going anywhere and in fact, it’s getting better and better. If you’re not using it, you’re missing out on some brilliant features that you can use to make your blog posts look better, like pull quotes and buttons. 

In addition, there are some excellent free plugins that give you a whole range of extra blocks. Personally, I like Ultimate Add Ons for Gutenberg (https://wordpress.org/plugins/ultimate-addons-for-gutenberg/) which include a masonry grid, post carousel, timeline, social sharing, forms and column styling. 

You can also save blocks to re-use again, improving your workflow and helping you to achieve consistent styling. 

Need a step-by-step? The tutorial videos below covers WordPress blog setup, page builder templating and my favourite Gutenberg blocks. 

If you’d like to watch a more in-depth tutorial, head to this blog post.

If you’d like to join an inspiring online community, you can find out more about Melissa’s online membership, The Marketing Fix, at www.themarketingfix.co

Get my DIY Your Website Ebook

+ get 20% off your first order

You don't have to settle for an average website.

Follow my 5 seriously actionable pro design tips to help you level up your website.

1 Comment

  1. Raymond Dixon

    Brilliant as always Melissa.
    Thank you so much.
    Ray and Julie Photography

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Free DIY Your Website Ebook +

20 % off your first purchase

You deserve better than an 'average' website...

By downloading our ebook, you agree to receive our excellent marketing emails.