WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 5 weeks 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 2 years ago.

Download all attachments as: .zip

Change History (5)

#1 @maor
2 years ago

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

#2 @ramiy
2 years 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
2 years 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
2 years ago

This ticket was mentioned in Slack in #themereview by joyously. View the logs.


5 weeks ago

Note: See TracTickets for help on using tickets.