Using WordPress ‘navigation_markup_template’ PHP filter

by

The navigation_markup_template filter allows you to modify the default navigation markup template in WordPress.

Usage

add_filter('navigation_markup_template', 'your_custom_function', 10, 2);

function your_custom_function($template, $css_class) {
    // your custom code here
    return $template;
}

Parameters

  • $template (string) – The default navigation template.
  • $css_class (string) – The CSS class passed by the calling function.

Examples

Change the navigation CSS class

add_filter('navigation_markup_template', 'change_navigation_css_class', 10, 2);

function change_navigation_css_class($template, $css_class) {
    $custom_css_class = 'my-navigation';
    $template = str_replace('%1$s', $custom_css_class, $template);
    return $template;
}

This code replaces the default CSS class in the navigation markup template with ‘my-navigation’.

Add a custom ARIA label

add_filter('navigation_markup_template', 'add_custom_aria_label', 10, 2);

function add_custom_aria_label($template, $css_class) {
    $custom_aria_label = 'Custom ARIA Label';
    $template = str_replace('%4$s', $custom_aria_label, $template);
    return $template;
}

This code adds a custom ARIA label to the navigation markup template.

add_filter('navigation_markup_template', 'wrap_navigation_links', 10, 2);

function wrap_navigation_links($template, $css_class) {
    $wrapped_links = '<div class="wrapped-links">%3$s</div>';
    $template = str_replace('%3$s', $wrapped_links, $template);
    return $template;
}

This code wraps the navigation links with an additional div having the class ‘wrapped-links’.

Change the screen-reader-text value

add_filter('navigation_markup_template', 'change_screen_reader_text', 10, 2);

function change_screen_reader_text($template, $css_class) {
    $custom_screen_reader_text = 'Custom Screen Reader Text';
    $template = str_replace('%2$s', $custom_screen_reader_text, $template);
    return $template;
}

This code changes the default screen-reader-text value to ‘Custom Screen Reader Text’.

add_filter('navigation_markup_template', 'add_extra_div_before_nav_links', 10, 2);

function add_extra_div_before_nav_links($template, $css_class) {
    $extra_div = '<div class="extra-div"></div>';
    $nav_links = '%3$s';
    $template = str_replace($nav_links, $extra_div . $nav_links, $template);
    return $template;
}

This code adds an extra div with the class ‘extra-div’ before the navigation links.