[Resolved] How to Create Custom PHP Category Template?

[Andres]

Hello,

Could you please help guide me create a custom PHP template for a category page? I’ve read quite a few tutorials online and in support posts on GP, as well as searched the GP documents and cannot find a tutorial that explains how to create a custom PHP category page template, and I couldn’t find a clear explanation on how to do it in GP.

I have GP Pro and your GP child them installed. Could you please help with the following questions?

1. Where is the source category PHP page template located? Is it “archive.php” in the parent template: public_html –> wp_content –> generatepress –> archive.php

2. Do I copy the entire category PHP page template or just its contents?

3. If I copy the entire file, do I rename it after pasting it in the child theme?

4. Or, do I create a new file in the child theme and paste the contents of the default PHP category template file in it?

5. Where in the child theme should the custom PHP category template file be located? (Could you please provide a path?)

6. What do I name the custom PHP category template in the child theme? If the name of the category page in the parent theme is “gallery”, would I name the custom PHP category template “category-gallery.php”?

If it’s any consolation, I will document this process and post it in your forum so that others looking to do the same can find a detailed explanation on how to create a custom PHP category template.

Thanks, and have a good weekend.

Cheers!

Andrés

[Tom]

Hi there,

1. Yes, archive.php is the source for category archives.

2. Copy the entire file and add it to your child theme. Then name it appropriately: https://codex.wordpress.org/Category_Templates

5. It should be in the root of your child theme.

6. Exactly – that would fit the category-slug.php example in the doc article above.

Seems like you’re almost there! Let me know if you run into any more roadblocks 🙂

[Andres]

Hi Tom,

Thanks for the help. I wanted to know if you could help with the next steps for the custom PHP archive page template.

I’ve copied archive.php from the parent folder, renamed it using category-slug.php (in this case, category-weddings.php, and uploaded it to the root directly of the child theme. Here are some screenshots showing WP Categories and where I pasted the category-weddings.php file in the database to make sure it’s correct:

Categories
https://prnt.sc/t3dcl8

https://prnt.sc/t3dcva

Database
https://prnt.sc/t3dd8v

What I don’t know how to do know is modify and/or add code to the category-weddings.php in order to:

1. Add the H1

2. Add paragraph text

3. Add the short code from WP Show Posts Pro to query the desired posts

4. Disable the default loop so only the posts queried by WPSP are displayed

Is there anything else I need to do to the category-weddings.php for it to display when mydomain.com/weddings/ is opened?

Thank you, Tom, and have a good weekend.

Cheers!

Andrés

[Tom]

Hi there,

Awesome, almost there!

1/2. For the H1 and paragraph, can’t you use the category description field? That should display the H1 (name of the category) and paragraph text (category description) by default.

3. To add the WPSP list, you need to:

Delete this section of code: https://github.com/tomusborne/generatepress/blob/2.4.2/archive.php#L24-L59

And add this in its place:

do_action( 'generate_archive_title' );

if ( function_exists( 'wpsp_display' ) ) {
    wpsp_display( 123 );
}

123 should the ID of the list you’ve created for this specific category.

4. Nope, everything should just work automatically 🙂

[Andres]

Hi Tom,

We’re one step closer!! Thank you for all your help.

I had some follow-up questions after replacing the section of code with the code you provided, whenever you have time.

1. Do you know what would cause the H1 and paragraph text in the Description field in /weddings/ to disappear after replacing the section of code with the code you provided (with the ID form the WPSP list included)?

After I modified the code in category-weddings.php, no content appeared on the page /weddings/. When I disabled the Blog Module, the desired content from the posts queried by WPSP did appear, but all the content above the posts query was missing. If I re-install the unmodified category-weddings.php file and delete the modified one (there only one file at a time), the H1 and text appears. * Apache, Nginx, and caches were cleared after inputing the modified PHP file.

Link to /weddings/ page (blog module is disabled):
2. If using a custom PHP category template, is it possible to use the Blog Module to style other blog pages that do not have a PHP category template? I don’t know it’s necessary to use one or the other, i.e., all categories have to be styled with the Blog Module or with custom PHP templates.

This is the code in the category-weddings.php file after modifying it. The WPSP function is: <?php if ( function_exists( ‘wpsp_display’ ) ) wpsp_display( 568 ); ?>

<?php
/**
 * The template for displaying Archive pages.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

	<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
		<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' );

			if ( function_exists( 'wpsp_display' ) ) {
    			    wpsp_display( 568 );
			}
			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main><!-- #main -->
	</div><!-- #primary -->

	<?php
	/**
	 * generate_after_primary_content_area hook.
	 *
	 * @since 2.0
	 */
	do_action( 'generate_after_primary_content_area' );

	generate_construct_sidebars();

get_footer();

Have a good day.

Regards,

Andrés

[Tom]

Hi there,

1. Ah, can you try the updated code?: https://generatepress.com/forums/topic/how-to-create-custom-php-category-template/#post-1335813

2. Yes, all of your other category templates will continue to the standard template, so all of the Blog module options should continue to work for those pages.

[Andres]

Hi Tom,

That did it! It’s amazing what a few characters can do. Thank you very much.

Whenever time permits, I have some questions about styling the custom PHP category template.

1. How can I make the WPSP post feed fullwidth with no padding, but keep the paragraph text confined? I tried an Element, but it affected the width of the text above the posts feed.

2. How do you center align the H1?

3. How do you add a hero photo?

4. How would I add three buttons just above the post feed and embed a URL in each one?

5. In the next release of GP Pro, will it be possible to edit category pages directly in WP and style them as if they were regular pages? Just curios what the next iteration brings with regards to category pages.

Again, there is no hurry. I really appreciate your help. Thanks!

Sincerely,

Andrés

[Tom]

1. An Element is the way to go. If you want to set that up and then link me to the page, I can provide some CSS to contain the text above the posts.

2. Would this be the category title? If so, try this:

.page-header h1 {
    text-align: center;
}

3. A Header Element is likely the best way to go.

4. A plugin like this will allow you to add HTML to your category description: https://wordpress.org/plugins/allow-html-in-category-descriptions/

5. Not quite, but we’re working on something like this between GP Premium and GenerateBlocks Pro 🙂

[Andres]

Hello again, Tom,

Thanks for the help, once again.

FYI, if the Blog Module is enabled, the posts queried via WPSP in the category-weddings.php don’t appear. For me, it’s not an issue. I plan to create a custom PHP template for all archives and use WPSP to have the settings for all blog feeds in one place. I thought you might want to know for your own sake.

That CSS aligned the category title in the center. Thanks!

Thanks for referring the plugin for HTML on the archive page.

I’ll create a header element for the hero image. I figured that would be the way, but wanted to make sure it would work for custom PHP archives.

As per your recommendation, I created an Element for category-weddings.php to set the WPSP query to full width. On my screen (a 13” MacBook, the WPSP posts query in question is full width, minus about 3px on each side so that the L/R margins are the same width as the masonry gutter. On a phone, it’s full width too.

These are the Element settings:

· Full Width, (no padding): 1275px
· Display Rules: Post Category Archive; Weddings
· No Sidebar

As per the recommendations in GP’s documents regarding setting the container width, the container width is set to 2000px. I am not certain I have the site container width and Element width set up correctly. Thought it looks fine on my screen, I don’t know if I did it right.

Here’s the URL for /weddings/ on staging site:

Thanks Tom, and have a good day.

Sincerely,

Andrés

[Tom]

It looks like you’re also using the content width option in the Layout Element, which is set to 1275px. If you remove that, it should actually go completely full width.

[Andres]

Hi Tom,

I figured out why I needed the Layout Element to make the WPSP feed go full width. The padding in Layout –> Container –> Content Padding was set to 20px L/R. The Layout Element overrode this setting to make that feed full width, minus a couple of pixels on the left and right to correspond to the masonry gutter width.

I deleted the Layout Element and set the L/R Content Padding to zero, and the WPSP is full width. Is this the best way to do it? Since the L/R Content Padding is set to zero, this means I will will either have to set the L/R padding for pages and posts using an element or set it in the padding option in in containers in GenerateBlocks.

Or, is it better to use a Layout Element to set the width of particular archive pages and leave the Content Padding set to the settings most used on all pages and posts?

Regarding the width of the text on archive pages, i.e., the text inserted in the Description field for a category, how do I control it? If the archive page is set to full width, the text too is full width and looks odd.

Thanks, Tom, and have a good day.

Regards,

Andrés

[Tom]

I would keep the Customizer padding setting as is. If you want to remove padding on a page, use the “Contained” option in the Page Builder Container (as opposed to the full-width option).

As for the category description – you’d likely need to use CSS to control that. I’m happy to take a look if you’d like to link me to the page.

[Andres]

Hi Tom,

I’ve left the L/R padding in Customizer to 20px. To set the WPSP feed on the archive page to the desired width, I will use a Layout Element.

Thanks for offering to help with the CSS to control the width of the category description!

Here’s the archive page on the staging site that has the Layout Element enable and set to 1275px

Again, thanks, and have a good day.

Cheers!

Andrés

[Tom]

Awesome! So right now everything is contained with a 1275px wide box. Are you wanting to make the category description less wide than that?

[Andres]

Hi Tom,

Yes, please. I am looking to not have the text go from edge to edge. I don’t think I can do that with an Element, as it targets the entire page.

I do have Simple CSS installed, so that might be a way to target the text width on archive pages, but I don’t see the Simplee CSS field when editing the archive page in questions.

Have a good day!

Sincerely,

Andrés

[Author]

Posts