apply_filters( ‘navigation_markup_template’, string $template, string $css_class )

Filters the navigation markup template.

Description

Note: The filtered template HTML must contain specifiers for the navigation class (%1$s), the screen-reader-text value (%2$s), placement of the navigation links (%3$s), and ARIA label text if screen-reader-text does not fit that (%4$s):

<nav class="navigation %1$s" aria-label="%4$s">
    <h2 class="screen-reader-text">%2$s</h2>
    <div class="nav-links">%3$s</div>
</nav>

Parameters

$templatestring
The default template.
$css_classstring
The class passed by the calling function.

Return

string Navigation template.

Source

$template = apply_filters( 'navigation_markup_template', $template, $css_class );

Changelog

VersionDescription
4.4.0Introduced.

User Contributed Notes

  1. Skip to note 2 content

    When creating a child theme, if your parent theme includes styles for WooCommerce navigation which you prefer, here’s a simple way to match the look and markup of the nav on non-WooCommerce pages, so you don’t have to rewrite the styles for it.

    In your template files, update the_posts_pagination() (or replace your parent theme’s custom pagination function) to match the default settings found inside WooCommerce. For example, inside search.php:

    the_posts_pagination(
    	array(
    		// match WooCommerce settings
    		'prev_text' => '&larr;',
    		'next_text' => '&rarr;',
    		'type'      => 'list',
    		'end_size'  => 3,
    		'mid_size'  => 3,
    	)
    );

    In your functions.php file, update the HTML output of the navigation using the navigation_markup_template filter.

    Check your parent theme’s style rules to see how specific they get. In my case, my parent theme specifies .woocommerce nav.woocommerce-pagination ul, so I will need to add a container with the .woocommerce class and add the .woocommerce-pagination class to our nav element. I also need to remove the .nav-links container so some other style rules match:

    function wpdocs_pagination_output( $template, $class ) {
    	
    	$template = '
    	<div class="woocommerce">
    		<nav class="woocommerce-pagination navigation %1$s" role="navigation" aria-label="%4$s">
    			<h2 class="screen-reader-text">%2$s</h2>
    			%3$s
    		</nav>
    	</div>';
    
    	return $template;
    }
    add_filter( 'navigation_markup_template', 'wpdocs_pagination_output', 99, 2 );

    Note: 99 is the arbitrary priority I’ve assigned to the filter. Use a high number to run your filter last.

You must log in before being able to contribute a note or feedback.