Dyad 2 – Changing look of "Older Posts" button on home page

  • waltwould · Member ·

    Hello,

    On our blog todayincthistory.com, we’ve recently decided to limit the number of posts shown on the home page to 12. Since we have published more than 12 posts, an “Older Posts” button appears below the 12 posts which, when clicked, will load an additional number of posts onto the bottom of the front page.

    Unfortunately, the small, dark gray “Older Posts” button blends into the background so much that I fear readers might miss it altogether. Is there a way to edit the appearance of this button — the color, text, and/or size? Would it be possible to swap it out for a customized image that acted as a button?

    On a separate but related note: Is it possible (in this theme) to paginate the posts on the home page, instead of using infinite scroll? In other words, is there a way to have the “Older Posts” button lead to a second page of the next 12 posts, instead of loading the next batch of posts below the current ones on the homepage?

    Thank you so much for your help!

    The blog I need help with is: (visible only to logged in users)

  • ravichahar · Member ·

    Hey waltwould,

    You can use this code to change the color, background, and more.

    #infinite-handle span button{
background-color: #ffff;
color: #272b3a;
}

    You can choose the colors according to your requirements.

    And if you’re asking about the pagination then it’s the behavior of the theme. On WordPress.com, the themes are developed with the infinite scroll. So, I think the paginations can’t be added.
    The rest, a staff member can confirm.

    As you have a paid plan, you can directly contact them.
    https://wordpress.com/help/support

    I hope that helps.

  • waltwould · Member ·

    Thank you very much, ravichahar. Do you know if there is any way to change the text inside the button?

    To any staff members who may read this: Thank you in advance for helping to answer the other questions I have. I greatly appreciate it!

  • thesacredpath · Member ·

    @waltwould, it is quite cumbersome to change the text via CSS due to the fact the button is constructed with the button html tag. We basically have to completely hide the button and then recreate the button as a pseudo element.

  • waltwould · Member ·

    Thank you for the reply — I think the color changes I’ve implemented go a long way with increasing the button’s visibility.

    Regarding the *behavior* of the button — Is it possible (in this theme) to paginate the posts on the home page, instead of loading new ones ad infinitum beneath the newer posts on the home page? In other words, is there a way to have the “Older Posts” button lead to a second page of the next 12 posts and turn off the “infinite load/scroll” option?

  • thesacredpath · Member ·

    @waltwould, that’s not possible with Dyad as Infinite Scroll cannot be completely disabled. As long as you have footer widgets, the older posts button will appear. If you were to take the footer widgets away, then it would go back to the full infinite scroll behavior where it loads x more posts each time someone gets near the bottom of the page.

    For page loading times, which affect search engine ranking, infinite scroll is actually a good thing as the full page does not have to be reloaded and re-rendered each time more posts are requested, it just renders the additional posts.

  • lililiebeleien · Member ·

    Hello,

    how can I set the “Older Posts” button at the center of the page? I am using the DYAD theme, but unfortunately the button appears always on the left side, even If I use CSS-Codes like “display: inline-block

    Thank you very much!

  • thesacredpath · Member ·

    Hi @lililiebeleien, can we have a link to the site you are talking about? On the Dyad and Dyad 2 demo sites, the Older Posts button is centered as designed.

  • The topic ‘Dyad 2 – Changing look of "Older Posts" button on home page’ is closed to new replies.