Category: Theme customization

If you need to access your achive title and or description, you can the code below. I used it to take the description as meta description. A better policy would be to write a custom metadesciption. But that’s a quick fix while you are working on a better solution.

    $title=get_the_archive_title();
    echo(explode('<',explode('>',$title)[1])[0]);
    if(get_the_archive_description()){
	echo '<meta name="description" content="'.preg_replace('/\<.*\>/',' ',get_the_archive_description()).'">';
    }

There are several options to do so.

Here are two exemples, on being taken from the twentyfifteen template.

The class is to apply woocommerce styling in case you are using it.

      <div>
         <nav class="woocommerce-pagination bt_search_pagination"> <?php
          // Previous/next page navigation.

          the_posts_pagination(

              array(

                  'prev_text'          => __( 'Previous page', 'twentyfifteen' ),

                  'next_text'          => __( 'Next page', 'twentyfifteen' ),

                  'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',

              )

          );?> 
      </nav></div>
 

A second example more compact:

     <div class="row">
          <div class="col-md-12 text-center">
              <nav class="woocommerce-pagination bt_search_pagination"><?php echo paginate_links(); ?></nav>
          </div>
      </div>

You can add this code in search.php or catregory.php

At time, it might be useful to debug some plugin or theme function directly in your browser console. It comes handy specially if you are sending some data live with jquery to a php function when you input something here and click some button there.

Add the following function to your theme functions.php:

//Send message to the web console

function debug_to_console( $data ) {
    $consoleLog = $data;
    if ( is_array( $consoleLog ) )
          $consoleLog = implode( ',', $consoleLog);
    echo '<script>console.log( "Debug Objects: ' . $consoleLog . '" );</script>';
 } 

Now you can add debug_to_console($data ) in your theme and plugins to check what value your variable take. Replace $data with whatever value you need to monitor.

You might want to wrap your woocommerce product thumbnails in specific elements and classes.

We will explore how to do that:

wp_get_attachment_image()

It is possible to modify image wrapping by a simple hook in function.php

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);


if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
} 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) { 
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = '<div class="imagewrapper">';

if ( has_post_thumbnail() ) { 
$output .= get_the_post_thumbnail( $post->ID, $size, ); 
var_dump($output); 
} 
$output .= '</div>';
return $output;

}
}

The data from get_the_post_thumbnails() comes from: https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

That’s where the img html is formed. This is what I would like to modify. That would require to rewrite the whole wordpress loop if I am not mistaken.

Accessing the image URL might be enough to get us the desired result. To be complete, we should also get the image size and class.

$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->id), $size)[0];

get_post_meta( get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true );

Current working code:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);


if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
} 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) { 
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = '<div class="imagewrapper">';

if ( has_post_thumbnail() ) { 
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $size);
$image_url =$image_url[0];
# $output .= get_the_post_thumbnail( $post->ID, $size, ); 
$output .='<img class="lozad" data-src="'.$image_url.'" alt="">';
var_dump($output); 
} 
$output .= '</div>';
return $output;

}
}