Divi Tutorial – Blog Category Pages

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:

//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”]

 

[gravityform id=”1″ title=”False”]

 

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

Photo by Dan Gold on Unsplash

Why no ads?

Hi, my name is PK, and welcome to my website, almost inevitable design. I maintain and publish on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.
  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to product better content.

Any bit of interest helps. Even sharing with your feidns, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

The Web Design Space

TWDS is my web design agency. If you're looking for premium quality, reliable, web design and development, come see what we're about!
Learn More
Choose "Paythen" at checkout for an interest free 10 week payment plan.
Leave a Reply

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

  1. Hi, thank you for great article, I’m using method 2. Everything is working fine, but on phone my footer and menu is on default. I guess it is beacuse i just pasted shortcode that means i somehow need to also add header and footer file. It is strange to me since on desktop everytihng is working fine. Please, could you help me figure it out? Thanks a lot.

    • Ok my bad, its also on default on desktop. It was beacuse of cache. I didnt do it in divi child theme beacuse it didnt work so it is all in normal divi theme. I need to edit category.php file that I posted into FTP so its also showing menu and footer, not only shortcode that I pasted in. Any advice?

      • EDIT: i did it by video again, but now inside divi child theme. Problem is that its not working if i switch back to normal divi theme.

  2. Thank you very much for this article, it’s very clear and helpful, and exactly what I want for my website :-)

    • Hi thank you for the kind words! Always a pleasure. Have a great day!

  3. Hi, thank you for this post. I’m attempting option 2 (creating a category archive by creating a custom layout) and I’m stuck at the location where you tell us to grab the shortcode. In its current version of Divi, shortcodes aren’t displayed so I’m not sure how to access it. Any updates would be greatly appreciated!

    Thank you!

  4. Thank you! I used the last option because I was getting desperate trying all the other stuff I found on the internet, that didn’t allow me to customize the page exactly the way I wanted :)

    • Thank you for the kind words.

      It’s great that you got things looking the way you want them.

New tutorials