Recently I needed to alter the HTML output of WP-PageNavi next and previous buttons to add custom SVG arrows. I struggled to find a decent solution, so I created one myself using the wp_pagenavi
filter.
Drop this code into your functions.php
file and amend the SVG code accordingly to suit your given arrow styling.
// Add arrows to WP-PageNavi next and previous buttons function custom_wp_pagenavi_arrows($html) { // Find the 'nextpostslink' element in the HTML $next_pattern = '/(<a class="nextpostslink".*?>)(.*?)(<\/a>)/i'; // Find the 'previouspostslink' element in the HTML $prev_pattern = '/(<a class="previouspostslink".*?>)(.*?)(<\/a>)/i'; // Define the SVG arrows $next_svg_arrow = '<svg aria-hidden="true" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8862 13.5934L16.1413 8.33832L0.561405 8.34021L0.561405 6.65979L16.1602 6.64276L10.9222 1.40467L12.0803 0.246534L19.3338 7.5L12.0632 14.7705L10.8881 13.5953L10.8862 13.5934Z" fill="black"/></svg>'; $prev_svg_arrow = '<svg aria-hidden="true" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.11466 1.40655L3.85956 6.66163L19.4395 6.65974L19.4395 8.34016L3.84066 8.35719L9.07866 13.5953L7.92056 14.7534L0.667058 7.49995L7.93766 0.229453L9.11276 1.40465L9.11466 1.40655Z" fill="black"/></svg>'; // Replace the link text with the link text + SVG arrow for 'nextpostslink' $next_replacement = '$1$2' . $next_svg_arrow . '$3'; // Replace the link text with the SVG arrow + link text for 'previouspostslink' $prev_replacement = '$1' . $prev_svg_arrow . '$2$3'; // Apply the replacements to the 'nextpostslink' and 'previouspostslink' elements $modified_html = preg_replace($next_pattern, $next_replacement, $html); $modified_html = preg_replace($prev_pattern, $prev_replacement, $modified_html); return $modified_html; } // Hook your custom function to the 'wp_pagenavi' filter add_filter('wp_pagenavi', 'custom_wp_pagenavi_arrows');