Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Adding a category title and description to the top of your archive pages helps readers know where they are and what they can expect from the posts on that page.

In this tutorial I am going to show you how you can create a separate category.php file and add the Category Title & Description on your Divi Category Archive pages.

View The Live Demo


To do this you will need a basic child theme and you will need to use either an ftp program such as FileZilla, or if your hosting company offers you access to the cPanel, you can use the File Manager.

Let’s Get Started


Creating the Category.php File

The first thing we are going to do is create a category.php template and add it to your child theme. If you have never done this before, don’t worry. It is much easier than you think and you will be stoked once you do it for the first time.


1. Unzip your most recent Divi Theme file that you downloaded from Elegant Themes.



2. Open up the unzipped folder, find the index.php file, and make a copy of it.



3. Now rename the file and name it category.php

Add Section and Category Title to Category Pages


4. Good job. You just created the template file. Now you will need to upload it to the child theme you have already installed. If you have not installed a child theme you can learn more about them, and download a free one here: https://quiroz.co/the-ins-outs-of-child-themes-premium-divi-child-themes/


4a. If you use an FTP program like Filezilla or WinSCP, you can just drag and drop the file over to your child theme. This is what it will look like using WinSCP.


4b. If you prefer to use the cPanel File Manager, then you just open up the file manager and go to the child theme folder (/wp-content/themes/the_name_of_your_child_theme/) and upload the category.php file. This is what it will look like.



Awesome. Now that was not so hard was it? Let’s move on to the next step.


Inserting the Category Title into the PHP template

Now we are going to grab the Category Title & Description and insert it into the category.php page with a little php snippet.


5. While you have the category.php template open, find this line.


Just underneath that line you are going to insert this snippet

Add a Category Title and Description to your Category Archive Pages


Unfortunately my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from this txt file.

So your category.php file should now look like this.

Adding Category Titles and Descriptions


Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS

/*--------------[GQ CATEGORY TITLES]--------------*/

.blog-title {
	margin-bottom: 60px;}
hr.archive-line {
	width: 25%;
	float: left;
	border: 0;
	height: 4px;
	background-color: #2ea3f2;}


BOOM!!!! You have just injected a Divi Page Builder Section into your Category pages. Your page should now have the Divi Builder Header Section and Page Title with an underline.


Category Archive Pages


Styling The Title and Underline


If you want to change the color, width and thickness of the underline, just change these rules.


Once you start playing around with this type of stuff you will find you can do all sorts of amazing stuff in Divi.

Have fun!

Well that’s all for now. I hope you find this article useful.

The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.



You have Successfully Subscribed!

Pin It on Pinterest