Skip Navigation

[Resolved] Setting identifier on pagination to aid styling

This thread is resolved. Here is a description of the problem and solution.

Problem:

Is there a way of adding an id to the pagination so that it identifies which format it represents?

Solution:

There isn't such kind of built-in feature to add ids to the pagination links. you can use CSS codes to style the links, for example:

https://toolset.com/forums/topic/setting-identifier-on-pagination-to-aid-styling/#post-1611749

Relevant Documentation:

https://toolset.com/documentation/user-guides/views/views-shortcodes/#vf-344030

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 0.30 hours from now. Thank you for your understanding.

This topic contains 4 replies, has 2 voices.

Last updated by emilyT 1 year, 5 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#1610979

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

#1611749

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#1611891

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

#1611955

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#1616339

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