Month: December 2016

You don’t need searchform.php

Searchform.php is only needed if you are actually making changes to the default search form.

While reviewing themes submitted to WordPress.org, I often notice that authors are including searchform.php without making any changes compared to the default form.

Other authors are using

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

But replacing the search form with a non html5 form. This is unneccesary.

The Developer Code reference on WordPress.org explains how get_search_form() first attempts to locate the searchform.php file in either the child or the parent theme, then load it. If it doesn’t exist, then the default search form will be displayed.

get_search_form()

Styling the WooCommerce pagination.

While creating the Deejay theme, I decided that I wanted to change the styling of the pagination to better match the theme.
Since I only want to change a few details, I choose not to remove the entire WooCommerce stylesheet.
If you do want to disable the entire style sheet, follow these instructions: https://docs.woocommerce.com/document/disable-the-default-stylesheet/

First, I inspected the output of the existing pagination:

<nav class="woocommerce-pagination">
 <ul class='page-numbers'>
 <li><span class='page-numbers current'>1</span></li>
 <li><a class='page-numbers' href='shop/page/2/'>2</a></li>
 <li><a class='page-numbers' href='shop/page/3/'>3</a></li>
 <li><a class="next page-numbers" href="shop/page/2/">→</a></li>
 </ul>
</nav>

I learnt that the nav has a different class than the standard output for the_post_pagination(), and that
no screen reader text is present. Since I build accessible themes, I want the screen reader text to be available.

We have several options to change the pagination:
Overwriting the css
This is probably the best option if you are not comfortable editing your themes functions.php file or replacing functions.
Note that Woocommerce styling is fairly specific, and that you need to add the .woocommerce class: .woocommerce nav.woocommerce-pagination.
You can either add the styling to style.css in your child theme, or perhaps use the Custom CSS option in the Customizer.

Filtering the function
The function used to add the pagination in Woocommerce is called woo_pagination().
Just like the_posts_pagination(), woo_pagination() uses paginate_links() and accepts a number of different arguments.
However, it does not use the screen_reader_text argument, and to add this I would need to use things like str_replace to change the class
of the nav element and add the screen reader text. This is why I choose option 3.

Replacing the function
Another option would be to replace the woocommerce pagination function with the_post_pagination() which I am using in the rest of my theme.
You can replace the function by placing the following code in your themes functions.php file. Change the prefix to your theme slug.

First, we are making sure that woocommerce is activated:

if ( class_exists( 'woocommerce' ) ){
 function prefix_woocommerce_pagination() {
 the_posts_pagination(); 
 }
 remove_action('woocommerce_after_shop_loop', 'woocommerce_pagination', 10);
 add_action( 'woocommerce_after_shop_loop', 'prefix_woocommerce_pagination', 10);
}

Since I am using the list type in my theme, I would use the_posts_pagination( array( ‘type’ => ‘list’ ) ); instead.

References:
https://docs.woocommerce.com/document/woo_pagination/.
https://github.com/woocommerce/woocommerce/blob/master/templates/loop/pagination.php

the_posts_pagination()


https://docs.woocommerce.com/document/query-whether-woocommerce-is-activated/