Divi Tutorial – Blog Category Pages

Here’s how to customize the blog page / the category archive page.

Oh boy.. this is one of the most requested Divi updates ever, isn’t it?

This and the header. Yikes.

As for the header, give these guys a check before you lament about the lack of custom headers.

 

Get the essentials first

 
But first, you need a child theme.

[sc name=”get child theme”]

and
Converting a layout to a shortcode

 

Header stuff

The header archive

 

Oh, and if you have ideas or inspiration for headers just send me an email, and I’ll try to make a tutorial for it.

So yeah.. let’s get on to..

 

Building blog category archive pages with the divi builder

Now, for starters, and let’s get this out of the way:

If you want any blog styling, I strongly suggest using Extra.

Extra is awesome at what it does, and it actually has MORE features than Divi.

You can use it exactly like how Divi works, while giving you full control over the blog and its archive pages.

I don’t know if you care, but this website is made with Extra, and I find it better than Divi in some ways. heh.

The one problem people keep bringing up is the “how do I make pages like I do with Divi?” issue.

Well, here you go:

Tip: For people struggling with the full-width capability, make sure you get these settings in the page, and you get a full width Divi builder canvas just as you would in the Divi theme.

So now you can just build a site like you would on Divi, just with better blog control.

Seriously, give Extra a try.

 

However…

If you wanna stick with Divi, then let’s get started.

(Long) Video

 

Timestamps:
– Method 1 (1:50): Use Extra
– Method 2 (4:30): Customize the php files
– Method 3 (15:20): Use a redirection plugin

You can watch the video, or scroll down for more explanations.

 

The main problem with making a cool category page with Divi is the way WordPress works.

The way WP works with categories is that it creates an archive page that is auto-generated from the loop. (The “loop” is a core WP php section that finds the content and displays them all as long as it exists.) These archive pages are can be found in the eponymous file archive.php.

A common example is the Woocommerce shop page. Notice how it’s really hard to style that page? You make a nice shop page, and once you look at a product, and click on “go back to shop” or click on a category, it just… acts like that pretty page you just made isn’t even there. It’s because WP (and woocommerce) automatically generated it from the archive.

There are a few ways to fix the WP archive problem.

 

One. Use Extra.

Yeah, I’ve already mentioned it, but it’s really worth it.

No? You need a Divi solution? k

 

Two. Just style the archive pages

If you’re a fan of the sidebar and Divi full-width style blog module, then you’re good to go.

 

 

All you need to do is use the Divi single post layout settings, and style some parts, and you’re good to go!

 

 

But here’s the most frustrating part.

A lot of people seem to like the blog card view (masonry), but this is NOT a theme option. (Unfortunately, I don’t see them adding this any time soon… because… they have EXTRA. Seriously, give it a chance.)

 

Three. Edit the archive file and/or the category files

When WordPress is asked to display a category as an archive, it first checks if the archive.php is sound. Next, it’ll look for category-slug.php. Once WP sees it, it’ll use that as the template.

So what you need to do is.. simple.

Here, you have two options.

A. Use PHP, HTML, and CSS to make and style your own archive page.

This takes a bit of time. It’s fun, but it really takes a bit of time, and many budgets cannot cover the whole custom route.

If you’re just looking at styling it a bit, here’s one simple copy-paste solution/tutorial you might like.

So with php, once you learn how to get posts inside the loop, you can build whatever/however you want. I’ve made fully custom designed posts and archives that look pretty nice… here’s an example:

 

 

Our designer did a great job, so it looks really great, and works equally awesome. Especially since with one video tutorial, the client could learn how to populate all that stuff themselves without breaking anything accidentally (or ambitiously fiddling with the visual builder).

So… that was all done with ACF, PHP, HTML, and SCSS. Fun.

However…

 

Here’s option B.

B. Make a layout in the Divi library and drop the shortcode into a php file that you make for that specific category.
This is way more doable.

 

The basic approach is:
Get a way to get Divi library items into a shortcode. Check out this post on how to do it. (It’s the same link that I had on top of this post) And seriously, use a child theme.

1. Make a category layout in the Divi Library (Divi Library > Add new > layout) and save it. You will now have a shortcode that you are going to use in a minute
2. Take page.php (from the Divi folder) and duplicate it, drop it into the child theme, rename it to category.php and delete everything from line 10 to 69. (This file should be in the child theme.)
3. Drop the shortcode you got from step 2, and insert it here:

<?php echo do_shortcode('the shortcode should go here'); ?>

4. Take that php snippet and paste it in line 10 of category.php

And you’re done.

Click me to check out a styled blog module tutorial that you might enjoy.

If you want to make more custom layouts for different categories, then make more layouts, and duplicate the php files, then name them category-name.php and drop each shortcode in its respective file.

DONE.

BUT.

Here’s an easier method.

Frankly, I prefer and suggest this the most. haha Seriously, it’s so easy.

 

Three. Use a redirect

This is one of those hacks that.. works way better than you’d think. In fact, it works so well that you end up forgetting about how you set it up in the first place.

(note: You would have set up your permalinks in a way that you like them, and sometimes your permalinks could be slightly different from what is shown here. The solution is the same, just different character strings.)

Let’s start with this plugin:

https://wordpress.org/plugins/redirection/

Get that installed and let’s get going!

 

Basically what we’re going to be doing is taking what the category (or tag) archive URL is and redirecting it to a page of our choice.

 

So once you’ve installed it, go here

 

The important thing to remember is that you need to use a RELATIVE URL. So start with what comes after the .com

If you want to redirect a blog category, most likely it’ll be something like /category/nameofcategory and you can send it to a page like /nameofcategory

Try to make the page slug as clear as possible so it won’t cause problems concerning SEO.

 

and… voila. Easy.

 

I personally think this is the easiest way of setting up category pages, and they’re all 301 redirects so you won’t have any problems with Google or get 404 errors either.

 

[sc name=”learn css”]

 

 

update: June 25th, 2019 – cleaned up the text a bit, added some relevant links.

Photo by Dan Gold on Unsplash