Header and Footer not displaying properly with twentytwentytwo theme

Hi @lansingfamily

I can definitely understand why this would be the case, since our template files still use the get_header() and get_footer() functions, instead of versions based on Full Site Editing.

I’m curious how easily this could be converted by changing this line: https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/templates/instantsearch.php#L12

to: <!-- wp:template-part {"slug":"header","tagName":"header"} /-->

and then this line: https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/templates/instantsearch.php#L212

to: <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

You can read more about how to safely copy the template files to other locations for customization at https://github.com/WebDevStudios/wp-search-with-algolia/wiki/Customize-Templates

Thanks for the quick response Michael. I tested your suggestion this morning as I was already attempting to modify those lines with other function calls. This produces a 500 error when attempting to access the search page.

Not sure on the Internal Server Error, I know I was getting not great results just now when I tested the changes out myself, as earlier was just a quick guess without trying it.

At least for the moment, I think we have to claim not being the most FSE compatible.

Would love to see the error generated for you in the error logs, if you’re able.

Opened this so we can investigate how to become fully compatible https://github.com/WebDevStudios/wp-search-with-algolia/issues/355

Here is the error:

[05-Sep-2023 14:41:29 UTC] PHP Parse error: syntax error, unexpected token "<", expecting end of file in /var/www/html/web/wp/wp-content/themes/twentytwentytwo/algolia/instantsearch.php on line 12

That error looks like it was because the wp:template-part bits were pasted inside the php tag, instead of after it.

Also I got pointed to https://github.com/WebDevStudios/wp-search-with-algolia/issues/216 as an already open issue around FSE instead of my new open issue linked to above.

I tried pasting those parts in the HTML section rather than the PHP section, but it doesn’t appear that they are being recognized as nothing changed. Meaning the site will load but the header remains the same.

• This reply was modified 1 year, 6 months ago by lansingfamily.
• This reply was modified 1 year, 6 months ago by lansingfamily.

Well, we have the GitHub Issue to keep exploring, beyond that I don’t know what to suggest here at the moment.

Ok, thank you for looking into it!

Following up, in case it helps others. I have resolved this issue by switching to a Genesis theme (StudioPress), which doesn’t use blocks for the template pages. However, I am also deploying my WordPress site as a static site on Shifter. So the /?s= URL was not resolving correctly. So I modified the plugin files to convert the instantsearch.php into a template page, then added some JavaScript to handle parsing the query parameters, which I changed to q= instead of s=. Finally my search box is custom html to make sure it routes to right place.

Everything but autocomplete is working and I would love to share code if anyone needs it.

Glad to hear you got a solution going that works for you and needs here.

Hopefully we’ll find a way to get all the parts working with FSE soon. From what I’ve seen, Autocomplete just works for the most part, but getting the Instantsearch powered version in place is proving a lot trickier. My latest idea, that I haven’t tried quite yet, would be turning the appropriate parts into block template parts. Needs continued work ??