[Resolved] Add pagination to top of posts, search results, etc

Home Forums Support Add pagination to top of posts, search results, etc

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1483588
    Dan

    Hi Tom, et. al.!

    I’m building a new site as a child theme of GP and using the Classic Editor.

    I’d like to have pagination at the top and bottom of post pages, search results, etc. It is currently only at the bottom. How can I add the pagination you use to have it also at the top? I’d also like to change the “Previous” and “Next” symbols to ‘«’ and ‘»’ respectively. And later I’ll need to change some CSS.

    Thanks!

    #1483926
    Elvin
    Customer Support

    Hi,

    This topic may help you.
    https://generatepress.com/forums/topic/content-search/

    Or perhaps this short snippet is enough:
    https://stackoverflow.com/a/44262584

    A wise man once said:
    "Have you cleared your cache?"

    #1483998
    Dan

    I’m confused by this answer… maybe I did not explain this very well to start. I’ll try again:

    This page on my test site – https://porkopolis.org/t1-2020/blog/ – has the following “1 Page 2 … Page 44 Next →” near the bottom of the main/left column of the page. When I look at the source code for this page I see the following:

    <nav id="nav-below" class="paging-navigation">
    			<span class="screen-reader-text">Post navigation</span>
    
    								<div class="nav-previous">
    												<span class="prev" title="Previous"><a href="https://porkopolis.org/t1-2020/blog/page/2/" >Older posts</a></span>
    					</div>
    					<div class="nav-links"><span aria-current="page" class="page-numbers current"><span class="screen-reader-text">Page</span>1</span>
    <a class="page-numbers" href="https://porkopolis.org/t1-2020/blog/page/2/"><span class="screen-reader-text">Page</span>2</a>
    <span class="page-numbers dots">&hellip;</span>
    <a class="page-numbers" href="https://porkopolis.org/t1-2020/blog/page/44/"><span class="screen-reader-text">Page</span>44</a>
    <a class="next page-numbers" href="https://porkopolis.org/t1-2020/blog/page/2/">Next <span aria-hidden="true">&rarr;</span></a></div>		</nav>

    I would like the “1 Page2 … Page44 Next →” to also show up at the top of each page of the archive of blog pages just below the Breadcrumbs. I would also like this to show up this way in search results pages, archives, etc.

    I am just starting a child theme of GP. I’m not asking for you to do all the heavy lifting, just tell me how to get started.

    Thank you!

    #1484039
    Elvin
    Customer Support

    Oh my bad. Perhaps I misread a few things.

    You can use this snippet:

    add_action( 'generate_before_entry_title', 'generate_content_nav',15 );

    This should add the pagination and its nav before the entry title just below the breadcrumbs.

    A wise man once said:
    "Have you cleared your cache?"

    #1484812
    Dan

    Ok, so we are getting closer. I put this code into my child theme’s function.php file. Now the correct pagination that I wanted appears above every <h2 class="entry-title" itemprop="headline"> on the results page of the main blog and both search results & archive pages.

    I know _only_ enough about some of this to be dangerous sometimes. What should I do now? THANKS!

    #1485691
    Elvin
    Customer Support

    To clarify:

    Do you specifically want to display it on singles posts and search results only? Not on archive pages or blog posts list?

    A wise man once said:
    "Have you cleared your cache?"

    #1485705
    Dan

    Hey, Elvin,

    I want to display it at top and bottom of each page for search results AND archive pages AND blog posts lists.

    Not sure what you mean by “singles posts” – if you mean on every single post, then no.

    THANKS!

    #1485892
    Elvin
    Customer Support

    Oh alright.

    Try this out:

    add_action('generate_before_main_content', function(){if ( is_home() || is_archive() || is_search() ) : // navigation links for home, archive, and search pages.
    
    				if ( function_exists( 'the_posts_pagination' ) ) {
    					the_posts_pagination(
    						array(
    							'mid_size' => apply_filters( 'generate_pagination_mid_size', 1 ),
    							'prev_text' => apply_filters(
    								'generate_previous_link_text',
    								sprintf(
    									/* translators: left arrow */
    									__( '%s Previous', 'generatepress' ),
    									'<span aria-hidden="true">&larr;</span>'
    								)
    							),
    							'next_text' => apply_filters(
    								'generate_next_link_text',
    								sprintf(
    									/* translators: right arrow */
    									__( 'Next %s', 'generatepress' ),
    									'<span aria-hidden="true">&rarr;</span>'
    								)
    							),
    							'before_page_number' => sprintf(
    								'<span class="screen-reader-text">%s</span>',
    								_x( 'Page', 'prepends the pagination page number for screen readers', 'generatepress' )
    							),
    						)
    					);
    				}
    
    				/**
    				 * generate_paging_navigation hook.
    				 *
    				 * @since 0.1
    				 */
    				do_action( 'generate_paging_navigation' );
    
    			endif;
    });

    This is taken directly from generatepress’ inc\structure\post-meta.php. It should work assuming it’s copied properly.

    Here’s a sandbox site for demo purposes: – DEMO

    A wise man once said:
    "Have you cleared your cache?"

    #1487763
    Dan

    Elvin, this is almost perfect, I notice that the CSS does not seem to be applied to the new/top pagination.

    I renamed the style.css file in my child theme, cleared the cache 😉 and this had no effect. That is as far as I could investigate tonight.

    Any suggestions?

    #1487786
    Elvin
    Customer Support

    Oh right that makes sense.

    That’s because the newly added pagination on the different part of the DOM structure.

    It’s not using the .paging-navigation styles because the newly added pagination is not inside nav.paging-navigation.

    That said, if you want the styles to be exactly the same, you’ll have to copy the styles related with .paging-navigation like .nav-links and add it back w/o the .paging-navigation selector.

    Example:
    This piece of CSS code:

    .paging-navigation .nav-links>* {
        padding: 0 5px;
    }

    Will have to be copied and added as this:

    .site-main .nav-links>* {
        padding: 0 5px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1491958
    Dan

    Hi Elvin,

    As the Three Stooges were fond of saying: “Success!”. I found and applied the appropriate CSS and everything looks soooo good – just like I hoped it would. Might seem like a little thing but it was important to me.

    Thank you for staying with me and for your patience in trying to understand just what I was asking for starting out – my poor descriptive skills and knowledge of the pertinent vocabulary were the culprit there.

    Hope we get to work together again!

    #1494704
    Elvin
    Customer Support

    Apologies from my side as well. For initially misunderstanding the issue.

    No problem. We’re glad things are sorted now.

    Cheers. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.