Problem with Older posts/Newer posts button

  • Resolved anubhutiteam

    (@anubhutiteam)


    4 years, 4 months ago

    Hi!

    I’m using the Textbook theme like it is advertised on WordPress.com (by using the blog page as the homepage), but am running into a couple of usability issues.

    It seems like the WordPress.com version has this compact Older posts button that loads more posts inline when you click it.

    While I’m fine if this inline loading of Older posts isn’t designed to work with self-hosted WordPress, I’m seeing 2 glaring usability issues with the implementation for self-hosted WordPress that I’d really appreciate help with.

    1. The Older posts button is not clickable on mobile. Nothing happens when I tap it. (I believe someone else also reported this issue earlier, but changed their theme before someone could take a look at it.)
    2. When the Older/Newer posts button is clicked on desktop, it loads the next/previous page of blog posts, but doesn’t anchor the page where the next set of posts begin. It just stays at the top of the page, requiring users to manually scroll down to the posts section. Is there any code I could use to anchor the Older/Newer posts buttons to this section of the page?

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 19 total)

  • Hi there!

    I’m not sure I understand exactly what seems to be the issue. Could you please share a link to the exact page where the Older posts button doesn’t work on mobile?

    Thread Starter anubhutiteam

    (@anubhutiteam)

    Hi fresatomica!

    The issue is with the Older posts link on the homepage. I made a recording of this issue on my phone to make it clearer, along with screen tap animations to show what isn’t working.

    Thanks!

    Does it act the same way in different browsers?

    Thread Starter anubhutiteam

    (@anubhutiteam)

    Hi lizkarkoski!

    I tried it in Chrome and the new Chromium-based Edge on Android. Also simulated it with all the iOS and Android touch-based devices available in Chromium’s Developer Tools, and the problem occurs for all touch-based phone and tablet devices.

    Which version numbers of those browsers and Android? We will try to replicate the behavior on our end. Have you tried a different browser, like Firefox? And are there any browser extensions enabled in your Chrome setup? Thanks!

    Thread Starter anubhutiteam

    (@anubhutiteam)

    I’ve tried it in the latest stable versions of Edge, Chrome and Firefox available from the Google Play Store on Android 10 with the July 2020 patch.

    I believe Chrome on Android doesn’t block anything by default, and I’ve ensured the ad blocker and tracking protection are disabled in Edge on Android. Posting the browser user agents for Chrome and Edge on Android below:

    Google Chrome: 83.0.4103.106?(Official Build)?(32-bit)
    Revision: ce7134bb3d95141cd18f1e65772a4247f282d950-refs/branch-heads/4103@{#694}
    OSAndroid:?10; Nokia 7.1 Build/QKQ1.190828.002
    Google Play services: SDK=20367000; Installed=202614037; Access=1p
    JavaScript: V8?8.3.110.13
    User Agent: Mozilla/5.0 (Linux; Android 10; Nokia 7.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Mobile Safari/537.36

    Microsoft Edge: 77.0.3865.116?(Developer build)?unknown?(64-bit)
    Revision: 18b0859c8ecc3addef34f44a40dac5bd360890a3
    OS: Android?10; Nokia 7.1 Build/QKQ1.190828.002SDK=12451000; Installed=202614037; Access=3p
    JavaScript: V8?7.7.299.13
    User agent: Mozilla/5.0 (Linux; Android 10; Nokia 7.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.116 Mobile Safari/537.36 EdgA/45.06.4.5043

    My desktop browser from where I simulated touch-based devices in Developer Tools doesn’t have any extensions or tracking protection interfering either. Thanks!

    Moderator James Huff

    (@macmanx)

    I’m definitely not seeing an issue myself. Do you have another device you can check from?

    Thread Starter anubhutiteam

    (@anubhutiteam)

    Hi James,

    I’ve checked from 9 mobile phones now that include both iPhones using the Safari browser and Android phones using Chrome, Edge and Firefox. I can say with quite some certainty that this issue 100% reproducible on any mobile device.

    Just so we’re on the same page and looking at the same thing, here’s a screenshot I’m sharing of the issue. That highlighted button isn’t clickable on mobile but works fine on desktop (there’s also a screen video recording of this issue I’ve shared in an earlier post showing the same issue). Thanks.

    Moderator James Huff

    (@macmanx)

    Have you modified the theme in any way?

    Thread Starter anubhutiteam

    (@anubhutiteam)

    Nothing apart from creating a child theme just to modify the footer.php file and adding CSS (via the WordPress CSS customiser) for some colours & fonts.

    I also momentarily switched to the standard TextBook theme without any modifications and was able to reproduce this issue on mobile.

    Moderator James Huff

    (@macmanx)

    Does it work properly if you remove that footer.php file, so the theme uses the original?

    Thread Starter anubhutiteam

    (@anubhutiteam)

    Tried that too; the issue persists. I even switched back to the default/unmodified/stock TextBook theme without any theme customisations whatsoever, and the issue still is there on mobile.

    I think the problem is that there are 2 invisible elements layered on top of that button when on a mobile/tablet layout, preventing it from being clicked. I right-clicked on the Older posts button and did Inspect and then Delete element. Did Inspect and Delete element again a second time. After that I could tap/click on that button.

    Can this be fixed? Thanks.

    • This reply was modified 4 years, 3 months ago by anubhutiteam. Reason: additional information
    Moderator James Huff

    (@macmanx)

    Which version of TextBook are you running?

    Thread Starter anubhutiteam

    (@anubhutiteam)

    Version 1.1.6 (the latest available)

    Hi there,

    We have released a newer version that’s not available on www.ads-software.com. It’s version 1.1.8 and you can download it from the theme’s page at WordPress.com.

    https://wordpress.com/theme/textbook

    Try that newer version and let us know how it goes.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Problem with Older posts/Newer posts button’ is closed to new replies.

Tags