[Resolved] Setting identifier on pagination to aid styling

[Author]

Posts

[emilyT]

I would like to set up visual pagination on a view. You can see the beginnings of it here:
hidden link
The page loads showing the Grow Bags description and you can then select from 1 2 3 4 to load different content.

I would like to be able to style the 1 2 3 4 like the icons in the available formats section above (Grow Bags, Naked Slabs/Blocks etc). Is there a way of adding an id to the pagination so that it identifies which format it represents?

Many thanks, Emily

[Luo Yang]

Hello,

I assume we are talking about the shortcode [wpv-pager-nav-links], if it is, please check our document:
https://toolset.com/documentation/user-guides/views/views-shortcodes/#vf-344030

There isn't such kind of built-in feature to add ids to the pagination links.

I have checked the URL you mentioned above, each pagination link has different CSS class, you can use them to style the links, for example:

li.wpv-page-link-167-CPID131-1{
	background-color:red;
}
li.wpv-page-link-167-CPID131-2{
	background-color: yellow;
}
li.wpv-page-link-167-CPID131-3{
	background-color:red;
}
li.wpv-page-link-167-CPID131-4{
	background-color: yellow;
}

For your reference

[emilyT]

Hi Luo

Thanks for getting back to me. I might be able to do something with the classes, but I'm worried that it's not going to go far enough for me.

Is there a pagination option which gives the title of the content it's linking to? So in this case instead of 1 2 3 4, the links would say:
Grow Bags | Naked Slabs/Blocks | Discs | Bulk

And if there isn't a built-in control for this, do you think it's something I could achieve with some custom development?

Many thanks, Emily

[Luo Yang]

No, I don't think so, in view pagination shortcode can not display the post title.

In your case, you might consider custom JS codes, for example:
Create two post views, both views should disable pagination, output all result:
The first post view, output the post title as a link, when user click the link, use JS codes to display the related item of below second view.

The second post view, in view's loop, output the post content in hidden div tags.

More help:
hidden link
hidden link
hidden link

[emilyT]

Thanks, I've found a workaround for this. Would be great to see more options added to the pagination in the future.