[Resolved] Renaming Pagination Buttons on Glossary Page

[Author]

Posts

[matthiasP-2]

Hello,

I want to design a glossary page, that is alphabeticly ordered with toolset and the wordpress block editor. I made a screenshot of what the page should look like in the end (screenshot 01). Im almost finished, but there is one final problem:

The sorting buttons of the page, which are pagination buttons, are named by numbers, but I want them to be named a,b,c, ... instead of 1,2,3, ... (Screenshot 2). I know there is the "Link to Page" option inside the pagination block (Screenshot 3). Is there some sort of shortcode, that I can paste in there?

I hope you can help me with my question, thanks in advance for your help!

[Christian Cox]

Hmm, no there's nothing exactly like that, and even if there were I'm afraid it would not work well if any of the "pages" have no results. For example, let's say there were no results beginning with the letter "E". The current pagination would be:
1 2 3 4 5 6 7 8 9... and so on. The numbers are sequential, they do not skip. Similarly, the alphabetical pagination letters would still be sequential:
A B C D E F G H...
But since there are no results on page "E", items beginning with "F" would be found on the "E" page of results. That's not what you want to accomplish, I'm sure. You need something more custom. We have seen other Users create similar Glossaries with navigation based on taxonomy term filters. Instead of pagination links, each link represents a different taxonomy term filter applied to the View. Clicking one of the letters applies a different taxonomy term filter, and the results update automatically. The View is not really paginated, it is filtered by taxonomy term. You would have to create a taxonomy just for this purpose, create a term for each letter of the alphabet, and apply the proper first-letter term to every post you want to display in the Glossary.

There are other tickets in the forum explaining how to set this up with Views, and even how to automate the first letter term assignment for new posts. You can search the forum for "Glossary" for example and find these and others:
https://toolset.com/forums/topic/creating-a-z-alphabet-list-from-custom-taxonomy/
https://toolset.com/forums/topic/create-a-glossary-a-b-c/
https://toolset.com/forums/topic/alphabetical-view/page/2/
https://toolset.com/forums/topic/alphabetical-filter-for-a-taxonomy-view-and-display-a-custom-taxonomy-field/
https://toolset.com/forums/topic/alphabetic-order-autosave-in-taxonomy/

Since taxonomy Views are not supported in the Block Editor, you'll need to activate the legacy Views editor to create taxonomy-based Views. You can activate the legacy editor in Toolset > Settings > General. Look for the option to enable both the legacy and block editor experiences. Then refresh the page, and you will find a new menu item in the main menu wp-admin > Toolset > Views.

Let me know if you have questions about this, or if I've misunderstood what you want to accomplish.

[matthiasP-2]

Hello Christian,

thanks for your advise. I think the problem that you described does not apply in my case, because every single one of my "pages" will have results. And since the glossary page is alphabeticly ordered there is a clear page limit (26), so it would not happen, that for an example the results on page "E" show up on page "F".

I also made a screencast video to show you, how I created my page: hidden link

In the video you can see, that the page already works pretty well, my only remaining problem is the renaming of the pagination buttons. Is there any way to rename them somehow?

Thanks for helping!

[Christian Cox]

In the video you can see, that the page already works pretty well, my only remaining problem is the renaming of the pagination buttons. Is there any way to rename them somehow?
I have a custom JavaScript solution that will replace the text in each element on-the-fly, since filtering that text in the backend isn't currently possible. First, in the pagination block settings for "Link to Page Text", replace the placeholder %%PAGE%% with a blank space character. Then select the top-level View block and in the sidebar Custom JS editor, paste the following code:

function letterPagination(){
	jQuery('.js-wpv-pagination-nav-links-container').find('li').each(function(index,item){ 
		var letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
  		if(jQuery(item).find('a').length){
			jQuery(item).find('a').first().text(letters[index]);
		}else{
  			jQuery(item).find('span').first().text(letters[index]);
		}
	});
}

jQuery( document ).ready(function(){
  letterPagination();
});
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	letterPagination();
});

[matthiasP-2]

Hello Christian,

thank you very much for the JavaScript Solution that you sent to me! In this video you can see that it works well:

hidden link

But there is one final problem. You can see that the pagination buttons are not working responsively. In mobile view, half of the letters are not visible. Is it possible to align the pagination buttons after a certain width under each other?

[Christian Cox]

I can try to come up with a CSS solution, but I cannot guess what that might be based on a screenshot or screen recording. I would need to see the pagination links in the browser to be able to inspect all the styles currently applied by the theme and other plugins. Is this available on a live site somewhere? Please provide a URL and I will take a closer look. If a login is required I can provide private reply fields, just let me know.

[matthiasP-2]

Hey Christian,

here is a link to the website: hidden link

Please let me know, if you need more Information. Thank you!

[matthiasP-2]

I also have a similiar problem with another toolset based page im currently working on. It is a specific a doctors study search site where you can sort the different studys shown with buttons. The studys are sorted by color and so should be the buttons.

Heres another video where you can see how the site already works: hidden link

I created the view with the wordpress block editor and you can see that I was able to customize the search results close to the original design. But I came upon a lot of problems customizing the search buttons in a way that is close to my original design. The different "organ" buttons (Magen, Darm, etc.) are all summarized under one css class, so I cant customize each button individually.

Is there a way to assign each button an individual css class? Or do you know some other way to fix this problem?

I hope you can help me with my question, thanks in advance for your help!
David Voges

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/help-styling-search-buttons-independently/

[Christian Cox]

Here's a CSS snippet you can use to make the navigation links stack vertically at resolutions lower than 1000px wide:

@media only screen and (max-width: 1000px) {
  .wpv-pagination-nav-links-container {
    display:block;
    width:100%;
  }
  .wpv-pagination-nav-links-container li {
    display:block;
  }
  .wpv-pagination-nav-links-container li a.page-link {
    display:block;
  }
  .wpv-pagination-nav-links-container li span.page-link {
    display:block;
  }
}

That would give you something like the third screenshot you see here, at smaller sizes. Not sure if this is what you're looking for, but it would give you an idea of the kinds of customizations you can achieve with custom CSS.
If you don't want the links to fill the width of the screen, you can remove the width:100% from the top definition like so:

@media only screen and (max-width: 1000px) {
.wpv-pagination-nav-links-container {
    display:block;
  }
...the rest of the code continues...

They will still stack vertically but retain their original widths.

Honestly, I think it's too much scrolling and the links are clunky. I think your Users would appreciate two different pagination blocks, one for large screens and one for mobile screens. The larger screen should display this letter-based link pagination. The smaller pagination block should use a select field for pagination. It's one of the pagination options in the pagination block, see the screenshots here. It looks like a 3 with a down-arrow icon. You can place each pagination block in a separate container block, and use the "hide element" feature to display those container blocks responsively. Show the select field navigation on mobile-only dimensions, and show the letter-based pagination on non-mobile dimensions only - see the screenshots here for more information about that.

If you decide to implement the select field, here's an updated script you can use to adjust the pagination of both the letter links and the select pagination system at the same time:

function letterPagination(){
  var letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
  jQuery('.js-wpv-pagination-nav-links-container').find('li').each(function(index,item){     
      if(jQuery(item).find('a').length){
      jQuery(item).find('a').first().text(letters[index]);
    }else{
        jQuery(item).find('span').first().text(letters[index]);
    }
  });
  jQuery('.js-wpv-page-selector').find('option').each(function(index,item){ 
    jQuery(item).text(letters[index]);
  });
}

jQuery( document ).ready(function(){
  letterPagination();
});
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  letterPagination();
});

I'm splitting your new question into a separate ticket, let's follow up there.