WordPress.org

Make WordPress Core

Opened 22 months ago

Last modified 22 months ago

#35696 new enhancement

Allow extra control over CSS Classes in paginate_links()

Reported by: maor Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Themes Keywords: has-patch
Focuses: template Cc:

Description

Currently, paginate_links() does not allow any flexibility in terms of customizing CSS classes in the outputted HTML.

The idea here is to introduce some degree of control in this area.

This idea rose from the need to implement a pagination component in Bootstrap and Zurb's Foundation. As of now, there is no way to implement these components without workarounds / hacks to paginate_links().

Currently, paginate_links() lets me output such HTML:

<ul class="page-numbers">
	<li><span class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="https://example.com/blog/page/2/">2</a></li>
	<li><a class="page-numbers" href="https://example.com/blog/page/3/">3</a></li>
	<li><a class="next page-numbers" href="https://example.com/blog/page/2/">Next &raquo;</a></li>
</ul>

I would expect paginate_links() to allow me to attach custom CSS classes to <ul>, <li> and <a> elements.

<ul class="pagination">
	<li class="page-numbers active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
	<li><a class="page-numbers" href="https://example.com/blog/page/2/">2</a></li>
	<li><a class="page-numbers" href="https://example.com/blog/page/3/">3</a></li>
	<li><a class="next page-numbers" href="https://example.com/blog/page/2/"><i class="fa fa-arrow-right"></i></a></li>
</ul>

This will allow for much more flexibility and less dirty workarounds.

Attachments (1)

35696.patch (4.6 KB) - added by ramiy 22 months ago.

Download all attachments as: .zip

Change History (4)

#1 @maor
22 months ago

@ramiy this has to do with what we discussed today, check this ticket out.

#2 @ramiy
22 months ago

  • Keywords needs-patch added
  • Type changed from defect (bug) to enhancement

Yes, I remember.

It's a simple fix, give me 5 minutes to create the patch.

#3 @ramiy
22 months ago

  • Keywords has-patch added; needs-patch removed

The attached patch adds a $classes argument. It's an array of classes.

WordPress Pagination (those are also the default values for backwards-compatibility):

$args = array(
	'classes' => array(
		'ul'      => 'page-numbers',
		'li'      => '',
		'a'       => 'page-numbers',
		'prev'    => 'prev',
		'next'    => 'next',
		'current' => 'current',
		'dots'    => 'dots'
	)
);
echo paginate_links( $args );

Bootstrap Pagination:

$args = array(
	'classes' => array(
		'ul'      => 'pagination pagination-lg',
		'li'      => '',
		'a'       => '',
		'prev'    => '',
		'next'    => '',
		'current' => 'active',
		'dots'    => ''
	)
);
echo paginate_links( $args );

Foundation Pagination:

$args = array(
	'classes' => array(
		'ul'      => 'pagination',
		'li'      => '',
		'a'       => '',
		'prev'    => 'pagination-previous',
		'next'    => 'pagination-next',
		'current' => 'current',
		'dots'    => 'ellipsis'
	)
);
echo paginate_links( $args );

@ramiy
22 months ago

Note: See TracTickets for help on using tickets.