Wednesday, December 14, 2022
The Great Tit
Updated: 14. 12. 2022, Added: 14. 12. 2022

How to hide elements when pagination is active in WordPress

When you design your Posts or CPT archive, you may want to use some elements, like slider or other. Then if you use the pagination, you want to hide these elements on second, third, fourth.... page. Check the example below.

Video tutorial

News Archive page example

Our post archive has a big entrance slider. That's the element which we want to hide on second, third... page of the archive,

News Archive second page of pagination with hidden slider

When user clicks to the pagination, and go to the next page, the main slider and archive title will be hidden.

How to hide elements on pages of pagination, but keep on first page?

It's easy. You must keep look at the archive <body> classes. When you are at 1st page, you will see something like:

Use page inspector (F12) to see which classes your website use on body element
<body class="blog wp-embed-responsive oxygen-body>

So you see the .blog class which represents your archive. If you have custom post type then the class will have other name.

Then go to the next page of pagination and take a look again:

New class .paged arrived!
<body class="blog paged wp-embed-responsive paged-2 oxygen-body>

You see the .paged class has been added.

What does it mean? It means that when you are on some of pagination pages, then class .paged is being added. Only thing you need to hide some element then is to use this class in your custom CSS, before the class of element you need to hide.

So the steps are easy:

  1. Add a class to the elements which should be hidden on pagination pages
  2. Open custom CSS
  3. Add page or archive class (for example .blog)
  4. Add .paged class
  5. Add class for hidden elements
  6. Add display:none; and save
  7. You are done
.blog.paged .pagination-hidden-elements {
     display:none;
}
Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram