How to Make a Custom Results Page for a Custom Post Type with Block Editor

admin管理员组

文章数量:1122832

I am new to WordPress, so I am unsure how to accomplish this. I have a custom post type called, fs_ski_resort I created a template called "Archive: FS Ski Resort". The page has a search box, in the top. I have a query loop and I have unselected "Inherit query from template" and selected fs_ski_resort post type. The page displays, without searching, all fs_ski_resort data (about 300 records) in a custom format.

The problem is it that if I search for one ski resort it returns the results using, I assume, the default search result page (not in the format I made). It stops using the custom results page I made above called "Archive: FS Ski Resort". How can I fix this?

I am new to WordPress, so I am unsure how to accomplish this. I have a custom post type called, fs_ski_resort I created a template called "Archive: FS Ski Resort". The page has a search box, in the top. I have a query loop and I have unselected "Inherit query from template" and selected fs_ski_resort post type. The page displays, without searching, all fs_ski_resort data (about 300 records) in a custom format.

The problem is it that if I search for one ski resort it returns the results using, I assume, the default search result page (not in the format I made). It stops using the custom results page I made above called "Archive: FS Ski Resort". How can I fix this?

• custom-post-types

Share Improve this question edited Apr 17, 2024 at 15:29 bueltge 17.1k77 gold badges6161 silver badges9797 bronze badges asked Apr 3, 2024 at 5:13 spreadermanspreaderman 11388 bronze badges 1

• You have to look into that query, how it searches the CPT fs_ski_resort – mysticalghoul Commented Apr 15, 2024 at 6:39

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Here is one approach to point the form's action of your Search block to any custom FSE page on your site, including the current path.

It should be possible to use the query attribute in the Search block's markup in your archive template:

"query" : { "post_type" : "fs_ski_resort" }

to add the public WP_Query query variable post_type as a hidden HTML input field.

See here:

https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/blocks/search.php#L38

This should restrict search results to the fs_ski_resort post type when using Inherit query from template query-loop option.

The whole markup could look like:

<!-- wp:search {
    "label":"Search",
    "buttonText":"Search", 
    "query" : {"post_type" : "fs_ski_resort"}, 
    "actionPath" : "/change/this/to/your/search/results/path" 
} /-->

To support the custom actionPath attribute above, to be able to change the action part of the form, we use e.g. the following PHP code as a plugin:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( 'core/search' !== $block['blockName'] ) {
        return $block_content;
    }
    if ( empty( $block['attrs']['actionPath'] ) ) {
        return $block_content;      
    }
    $processor = new WP_HTML_Tag_Processor( $block_content );
    if ( $processor->next_tag() ) {
        $processor->set_attribute( 
            'action', 
            esc_url( home_url( '/' ) . ltrim( $block['attrs']['actionPath'], '/' ) )
        );
        return $processor->get_updated_html();
    }
    return $block_content;
}, 10, 2 );

using the new WP_HTML_Tag_Processor to replace the action part of the form to our needs. Note that we append the actionPath input to the home url.

The generated output for the above block markup would be:

<form role="search" method="get" action="https://example.com/change/this/to/your/search/results/path" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
    <label class="wp-block-search__label" for="wp-block-search__input">Search</label>
    <div class="wp-block-search__inside-wrapper">
        <input class="wp-block-search__input" id="wp-block-search__input" placeholder="" value="" type="search" name="s" required /><input type="hidden" name="post_type" value="fs_ski_resort" />
        <button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit">Search</button>
    </div>
</form>

Hope you can adjust this further to your needs.

Search results uses a totally different template - not the custom post type archive. So, you'll need to copy the archive template you made to the search results template. See the WordPress documentation for how to do that: https://codex.wordpress.org/Creating_a_Search_Page

That said, default WordPress search will not limit itself to just your single custom post type - it will return results from the whole site. If you want the results to show just your Ski Resort cpt, you'll need to customize the search form itself. This question/answer addresses that to some extent: https://wordpress.stackexchange.com/a/409464/16

Let me know if you need more specifics based on the code you're trying to implement.

本文标签： How to Make a Custom Results Page for a Custom Post Type with Block Editor