Mobile Theme Post Order

It’s not something I’ve done before but I’ll look into later once I’ve got some of my other work done and report back!

So I did some reading, and I must admit I’m a little unsure of how to apply this. Adding a custom Body Class was easy

<?php body_class( 'my-mobile' ); ?>>

…and I can style this for the main page but I don’t think that’s what you meant in terms of it’s application.

I’m afraid I’m about at the limit of my coding skills here!

You don’t need to edit Jetpack plugin files to add that custom class.

Instead, add the following code in the plugin I built for you, right below the code that’s already there:

// Add a custom body class on the mobile theme's home page.
function jetpackme_custom_mobile_home_page_class( $classes ) {
	if ( jetpackme_is_mobile() && is_home() ) {
		$classes[] = 'my-mobile';
	}
	return $classes;
}
add_filter( 'body_class', 'jetpackme_custom_mobile_home_page_class' );

Had to make a small adjustment to this line and make it:

if ( harry_lime_is_mobile() && is_home() ) {

That’s added now.

So should I now try to add styling in the Edit CSS editor under .my-mobile?

Yes, that should work.

So for example, where I would have out:

.mobile-theme #site-title a {
	color: #f4f4f2;
}

…I tried changing it to:

.my-mobile #site-title a {
	color: #f4f4f2;
}

This didn’t work, even on the pages where it did before.

Am I getting something wrong here?

BTW, thanks for all the time you’re putting into helping me, it’s appreciated!

This didn’t work, even on the pages where it did before.

Could you post your site URL here, so I can have a look?

If you want it to remain private, you can also contact us via this contact form:
https://jetpack.com/contact-support/

No, not a problem, it’s just a test site for a concert venue that I will update once we have a solution. Here it is:

https://alternate-poker.com/fontainepalace/

If you go into mobile view, you’ll see that on the homepage, the theme is the standard Jetpack mobile theme but if you press on a post (in this case a featured picture), you’ll see the theme reverts to my customized version.

That’s interesting. The problem doesn’t appear to be linked to the custom CSS class. It looks like Jetpack’s Custom CSS isn’t loaded on your home page, for some reason.

Could you try to deactivate each one of your plugins, one at a time, and let me know if you find a conflicting plugin?

Will try that now and get back to you!

OK, so I tried deactivating everything (one by one and all off at the same time) except for Jetpack and the custom plugin you made for the code (I only have 4 other plugins running for the site).

Unfortunately, it didn’t make any difference.

I even deactivated the Post Expirator (which was the most likely culprit) and while the posts then went out of order, the customization still wasn’t there for the homepage.

Do you happen to use a caching service, or use something like Varnish to cache your site’s pages?
If so, could you try to flush your cache and see if it helps?

I use WP Super Cache. I’ve enabled and cleared the cache manually.

Still no effect!

Could you try the following:

1. Go to Settings > WP Super Cache > Advanced
2. Check the following option: “Mobile device support. (External plugin or theme required. See the FAQ for further details.)”
3. Save changes
4. Go to Settings > WP Super Cache > Plugins
5. Enable the Jetpack Mobile Theme option there
6. Save your changes
7. Go to Settings > WP Super Cache > Contents
8. Delete all your cache

Let me know how it goes.

Go to Settings > WP Super Cache > Advanced
Check the following option: “Mobile device support. (External plugin or theme required. See the FAQ for further details.)”
Save changes

This was already checked.

Go to Settings > WP Super Cache > Plugins
Enable the Jetpack Mobile Theme option there
Save your changes

Done

Go to Settings > WP Super Cache > Contents
Delete all your cache

Done

Let me know how it goes.

Unfortunately, still no change.