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

[porkopolis]

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!

[Elvin]

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

[porkopolis]

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!

[Elvin]

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.

[porkopolis]

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!

[Elvin]

To clarify:

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

[porkopolis]

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!

[Elvin]

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

[porkopolis]

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?

[Elvin]

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;
}

[porkopolis]

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!

[Elvin]

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

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

Cheers. 🙂

[Mr Calvert]

Hello Can you help me this topic?
I was used your code

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;
});

How to remove navigation bar default of you? I don’t want use dual two bar!

[Leo]

Hi there,

Please open a new topic for your question.

Thanks!

[Author]

Posts