Theme and navigation not present on meeting pages

[rabbitprobe]

Hi,
I'm rebuilding our district website and when using the meeting plugin, it's created pages that are not including our theme format or navigation. My first thought was this was due to me installing the plugin and creating the pages before I installed the theme, but deleting and reinstalling the plugin didn't change anything. Check out www.aasonora.org/meetings to see the very empty page I can't figure out how to change.

Thanks

[kiyote33]

Hi @rabbitprobe ,
It appears that you need to reset your permalinks (under the main Settings admin menu). Simply press the Save Changes button and you should be good to go.

[rabbitprobe]

Hi @kiyote33,
I did that and it doesn't seem to have made a difference.

[kiyote33]

THIS IS WHAT I'M SEEING ON YOUR SITE:

I*s that what you see?

[SIA-WEBSUP]

Does your site have any pages other than the meetings page?
Does the theme or navbar show up correctly on any of those other pages?

Not that this matters much to the diagnosis, but would you confirm that you are using Elementor on top of Furnishop theme?

And just out of curiosity, what happens if you switch the plugin-ins front end to be the Legacy UI?

[rabbitprobe]

Yes it has other pages, and they all show up correctly. Right now I have the main page redirecting to the meeting page so the rest of the site isn’t public.

…

On Sat, Nov 11, 2023 at 2:02 PM SIA-WebSup ***@***.***> wrote: Does your site have any pages other than the meetings page? Does the theme or navbar show up correctly on any of those other pages? Not that this matters much to the diagnosis, but would you confirm that you are using Elementor on top of Furnishop theme? — Reply to this email directly, view it on GitHub <#1258 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BD4BUFM2DN2BCIBGPOXEJW3YD7YWPAVCNFSM6AAAAAA7GTCZ5CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TKNBSGUZDK> . You are receiving this because you were mentioned.Message ID: <code4recovery/12-step-meeting-list/repo-discussions/1258/comments/7542525 @github.com>

[SIA-WEBSUP]

This isn't the ultimate solution, but just to help troubleshoot at bit, would you consider:
1. create a new blank page and confirm the theme styling and navbar appear correctly
2. add the following HTML to this new page and report back what happens

        <div id="tsml-ui"
					data-src="/wp-content/tsml-cache-eaa3dc0437.json?1699641317"
					data-timezone="America/Los_Angeles"
					data-mapbox="pk.eyJ1IjoiYWFzb25vcmEiLCJhIjoiY2xvc3lwZ2Y2MDRhNTJrbzY3MzBxOWM3biJ9.pSyVa_-CfWvyBgKOShn2aw"></div>
        </div>
        <script src="https://tsml-ui.code4recovery.org/app.js" async></script>

[rabbitprobe]

That worked. I'd rather use this approach anyway so I can better customize the page.

THANKS!

[SIA-WEBSUP]

@rabbitprobe, please note that you may want to use the live feed rather than the cached json file. the live feed is slower but will be more up to date:

data-src="wp-admin/admin-ajax.php?action=meetings"

[SIA-WEBSUP]

I went to an AA website I administer and switched from the Legacy UI which we currently use to TSML UI. The result was as expected with the header and footer appearing correctly.

Again, I'm curious if you were to switch your site to Legacy UI, do the headers and footers show up as expected?

[rabbitprobe]

I've switch and sued both with the same result of no header.

[SIA-WEBSUP]

I created a test site with Furnishop theme ( no elementor ) and to my surprise, I don't see the header and footer on the /meetings page.
see: https://tsml-test.nassauintergroup.org/meetings/

They do show up correctly a custom page invoking tsml-ui directly
see: https://tsml-test.nassauintergroup.org/tsml-ui/

I don't think the theme matters here. When I switch to Twenty Twenty-Two, I have similar behavior.

I'll keep investigating, but curious if more experienced hands care to chime in why the meetings page won't automatically insert the theme's header / footer.

[SIA-WEBSUP]

@rabbitprobe, we're still trying to figure out why this theme's header/footer are not displaying.

Be advised that you could work around this issue until we've figured it out by creating your own page with the following html:

    <div id="tsml-ui"
	    data-src="wp-admin/admin-ajax.php?action=meetings"
	    data-timezone="America/Los_Angeles"
	    data-mapbox="pk.eyJ1IjoiYWFzb25vcmEiLCJhIjoiY2xvc3lwZ2Y2MDRhNTJrbzY3MzBxOWM3biJ9.pSyVa_-CfWvyBgKOShn2aw">
    </div>
    <script src="https://tsml-ui.code4recovery.org/app.js" async></script>

[joshreisner]

one reason the meeting finder "page" can look slighly different than a normal page (depending on theme) is that the meeting finder is what's known as a "custom post type archive" - you can read more about the wordpress template hierarchy here.

if you want the archive to look more like a regular page, you might try creating a child theme and copying page.php and call it archive.php in your child theme - that should apply the same sidebars and navigation that the page template had. some themes don't spend as much time styling the archive screens as they do the page and post screens.

[SIA-WEBSUP]

This theme seems pretty sophisticated and has a complex looking archive.html already.

Even without creating a child theme, if one were to make a copy page.html and rename it archive.html in the parent theme, would you expect the /meetings page to look like the other pages? I did this with no discernible effect.

Here's the page.html for this theme btw:

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

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:post-title {"level":1,"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->

<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"bottom":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":32} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:post-content {"layout":{"inherit":true}} /-->

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:post-comments {"style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--medium, 6rem)"}}}} /--></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

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

The archive.html is similar but has more stuff

[joshreisner]

huh! what i said above applies to classic themes, looks like this is a block theme, which may operate differently? i'm reminded of this TIAA topic which suggested that TSML was missing some support for block themes.

also i see in our code we have some commented out lines applying to block themes, which makes me think we should take a closer look

i've created an issue - is that something you might want to look in to? if so feel free to grab it