New archive template

Hi there,

It's not ideal to replace default templates especially the parts with do_action(...) because the theme uses hooks to add in its parts.

Can you specify where you want these facetwp_display() to display? Perhaps you don't need a child theme for this and maybe add them in through hooks. Here's a hook visual guide - https://docs.generatepress.com/article/hooks-visual-guide/

It's not 100% complete but most of the hooks are there.

Hi Elvin,

This facetwp_display( ) is used by a plugin called facetWP to add filters and template to a page like this https://prnt.sc/1wwz776 . For that I believe I could use hooks, but do you know how to do it in practice? Do I have to create a template like “category-recipes.php”? How can I have an archive with no content (only header and footer) so I can put filters and template from facetWP?

Thanks

How can I have an archive with no content (only header and footer) so I can put filters and template from facetWP?

the category archive pages, by default, only has the name of the category, the term description and the loop.

But you can easily remove all of that with this filter:

add_filter( 'generate_has_default_loop', function( $show ) {

    if ( is_category() ) {
        return false;
    }

    return $show;
} );

You then place these codes on a Hook Element with a display rule location of "Post Category Archive" and set the hook to generate_before_main_content.

<?php echo facetwp_display( 'facet', 'cozinha' ); ?>
<?php echo facetwp_display( 'facet', 'ingredients' ); ?>
<?php echo facetwp_display( 'facet', 'dieta' ); ?>
<?php echo facetwp_display( 'facet', 'refeio' ); ?>
<?php echo facetwp_display( 'template', 'recipes' ); ?>

Note: Make sure you set check "Execute PHP" on the hook element.

This effectively removes the default loop of the category archive page and replaces it with whatever facetwp_display() outputs. :D

Alternatively, if facetwp_display() has a shortcode or gutenberg block equivalent, you can do replace Hook Element with a Block element - Hook for a better styling and layout experience. :D

To make it clearer what I want is to put the content from inside this page https://bit.ly/3ngqUEj in this category page https://bit.ly/3G0MBkB

So in practice, as I only need to change the "recipe" category, in the function I would need to specify the category so that it doesn't apply to all, right?

So, considering that the category url ends with /recipe/, the function would be this, right?

add_filter( 'generate_has_default_loop', function( $show ) {

    if ( is_category( 'recipes' ) ) {
        return false;
    }

    return $show;
} );

Or if the category ID is 59, the function would be this:

add_filter( 'generate_has_default_loop', function( $show ) {

    if ( is_category( '59' ) ) {
        return false;
    }

    return $show;
} );

So in practice, as I only need to change the “recipe” category, in the function I would need to specify the category so that it doesn’t apply to all, right?

That's correct. :)

So, considering that the category url ends with /recipe/, the function would be this, right?

Yes that's correct as well.

Or if the category ID is 59, the function would be this:

You'll have to remove the ' before and after 59 if its an ID because IDs are integer values.

Like this:

add_filter( 'generate_has_default_loop', function( $show ) {

    if ( is_category( 59 ) ) {
        return false;
    }

    return $show;
} );

And say for example, you want to specify multiple ids, you can do it like this:

add_filter( 'generate_has_default_loop', function( $show ) {

    if ( is_category( array(59,60,61,62) ) ) {
        return false;
    }

    return $show;
} );

Reference - https://developer.wordpress.org/reference/functions/is_category/

Thanks a lot Elvin! :)

No problem. Let us know if you need further help with this. :D

Hi,

One more question, if I have this CSS below:

.sidebar .widget .widget-title {
	border-top: 5px solid #f7f7f7;
    border-bottom: 1px solid #f7f7f7;
	padding: 5px 0;
	font-size: 20px;
}

And this class .flyout-row h3 has the same CSS, I can use this:

.sidebar .widget .widget-title, .flyout-row h3 {
	border-top: 5px solid #f7f7f7;
    border-bottom: 1px solid #f7f7f7;
	padding: 5px 0;
	font-size: 20px;
}

Or I have to add a separate CSS to .flyout-row h3 ?

Thanks

Assuming you want .flyout-row h3 to have the exact same styling as the widget titles then that should be fine. :)

Perfect :)
Thanks

No problem. :D