WordPress Tricks

Yoast breadcrumb add Product or any Text with links just after Home text

allaboutbasic
yoast breadcrumb add Product or any Text with links just after Home text

Please add the following code to your theme’s function.php

add_filter( 'wpseo_breadcrumb_links', 'yoast_seo_breadcrumb_add_link' );

function yoast_seo_breadcrumb_add_link( $links ) {
    global $post;

    
        $breadcrumb[] = array(
            'url' => site_url( '/products/' ),
            'text' => 'Products',
        );
 
        array_splice( $links, 1, 0, $breadcrumb );
     

    return $links;
}
Web Development

Click button and change image color using css only ( jQuery not needed)

allaboutbasic
Button Click and Image color will change using css only. No JQuery is needed.

Here is the code I am Sharing

CSS CODE

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  background-size: 225px 70px;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);   }

.red{ background: red; }

.red:checked{ background: linear-gradient(brown, red) }

.green{ background: green; }

.green:checked{ background: linear-gradient(green, lime);}

.red:checked ~ img,.red:checked ~ p img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img,.green:checked ~ p img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

HTML CODE

  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
 
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>

   
   <p><strong><a>sample1</a></strong><br><a id="sample1"><img src="https://i.stack.imgur.com/bd7VJ.png" alt="sample1" height="74" title="sample1" class="invert"></a></p>
   
  <p><strong><a>sample2</a></strong><br><a id="sample2"><img src="https://i.stack.imgur.com/bd7VJ.png" alt="sample1" height="74" title="sample2" class="invert"></a></p>
WordPress Tricks

Click on Link and Scroll to ID: Fix Overlapping issue of top fixed header

allaboutbasic

Sometimes you face issue where Top fixed header overlap the portion of the Target. To fix the issue you can use this jquery code. You need to have good understanding about how to use it. Or do a comments if you need help

You need to change the Parent Element ID or Class in the provided code

 jQuery('Parent Element ID or Class').on('click', 'a', function(e){
		   e.preventDefault();
		   e.stopImmediatePropagation();
	var id=	jQuery(this).attr('href');
		 console.log(id);
 jQuery('html,body').animate({scrollTop: jQuery(id).offset().top -180},'slow');
	   });
WordPress Tricks

Media display settings set “Link to” “Media File” or “None” by default

allaboutbasic

I am sharing you the code to do this

set Link To “Media File”

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
function default_attachment_display_settings() {
	update_option( 'image_default_link_type', 'file' );
}

set Link To “None”

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
function default_attachment_display_settings() {
	update_option( 'image_default_link_type', 'none' );
}
WordPress Tricks

How to Add a product search form in woocommerce Category page

allaboutbasic

Here I am sharing you the code to show a product search form in woocommerce category page. You need to put the code in functions.php page

adding product search form in woocommmerce product category page
add_action( 'woocommerce_before_shop_loop', 'my_woocommerce_before_shop_loop' );

function my_woocommerce_before_shop_loop() {
    if ( is_tax( 'product_cat' )   ) {?>

<div class="et_pb_row et_pb_row_0 et_pb_equal_columns et_pb_gutters3 productsearch">						
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
	<label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
	<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
	<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
	<input type="hidden" name="post_type" value="product" />
</form>						
						</div>
<?php
         
    }
}
WordPress Tricks

WordPress Copy Content Protection: Protect Specific page to be copied and disable CTRL+C, CTRL+V using jQuery and Javascript

allaboutbasic

Here I am sharing you a code snippet which you can use to protect your specific page to be copied. This Code will disable Right Click, CTRL+C and CTRL+V etc. I got this code from StackOverflow.com and modified it a little so that you can use it for your WordPress Page.

Just change the Page ID in the code with your own page ID which you want to be protected.

<?php
	if(is_page('YOUR PAGE ID')){?>
<script>

jQuery(document).ready(function() {
 jQuery(function() {
       jQuery(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
});
	
// Disable Right click
document.addEventListener('contextmenu', event => event.preventDefault());

// Disable key down
document.onkeydown = disableSelectCopy;

// Disable mouse down
document.onmousedown = dMDown;

// Disable click
document.onclick = dOClick;

function dMDown(e) { return false; }

function dOClick() { return true; }

function disableSelectCopy(e) {
    // current pressed key
    var pressedKey = String.fromCharCode(e.keyCode).toLowerCase();
    if ((e.ctrlKey && (pressedKey == "c" || pressedKey == "x" || pressedKey == "v" || pressedKey == "a" || pressedKey == "u")) ||  e.keyCode == 123) {
        return false;
    }
}	
	
</script>
<?php } ?>
Web Development

Menu Drag and scroll in left and right using Mouse : HTML CSS and JavaScript

allaboutbasic

Basically I got the code from Codepan. But I am describing it here again with my html and css for the novice users. I am sharing the CSS, HTML and Javascript related to it.

CSS

<style>
.menu {
    overflow-x: scroll;
    display: -webkit-box !important;
    flex-wrap: inherit !important;
    width: 251px;
}
ul.menu li {
    list-style: none;
    margin-right: 12px;
}
</style>

HTML

<ul class="menu">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
<li><a>test 4</a></li>
<li><a>test 5</a></li>
<li><a>test 6</a></li>
<li><a>test 7</a></li>
<li><a>test 8</a></li>
<li><a>test 9</a></li>
<li><a>test 10</a></li>

</ul>

Javascript

<script>

const slider = document.querySelector('ul.menu');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
 // console.log(walk);
});

</script>
WordPress Tricks

Woocommerce shortcode to show product image, sku, regular price, sales price, title using wp_Query

allaboutbasic

Here I am sharing you the code to see how it works. The shortcode will be [strong_overstock_products]

function strong_overstock_products_output(){
 $args = array(
        'post_type'      => 'product',
         'product_cat'    => 'overstock'
    );

    $loop = new WP_Query( $args );
?>
 
<ul class="txt">
<?php
    while ( $loop->have_posts() ) : $loop->the_post();
        global $product;
	 $sku = get_post_meta( get_the_ID(), '_sku', true );
	echo '<li class="wc-taxonomy-child">' ;
        echo '<br /><a href="'.get_permalink().'">' . woocommerce_get_product_thumbnail().'<div class="taxc-product--overlay">
                            <div>
			                    VIEW PRODUCT                            </div>
                        </div>'.' </a>';
	echo "<div class='sku'>SKU : ".$sku."</div>";
	  echo ' <a href="'.get_permalink().'">' .get_the_title().'</a>';
   $pricer = get_post_meta( get_the_ID(), '_regular_price', true );
	$prices = get_post_meta( get_the_ID(), '_sale_price', true );
if ( $product->is_on_sale()) {
                 echo '<p class="taxc-product--price">
                    <del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi> ' .$pricer.'</bdi></span></del> <ins><span class="woocommerce-Price-amount amount"><bdi>' .$prices . ' </bdi></span></ins> </p>';
            } else {
                 echo '<p class="taxc-product--price">
                      <ins><span class="woocommerce-Price-amount amount"><bdi>' .$pricer . ' </bdi></span></ins> </p>';
            }
	
	?>
	 
		
<?php	
	echo '</li>' ;
	endwhile;
	?>
</ul>	
<?php	

    wp_reset_query();
}

add_shortcode('strong_overstock_products', 'strong_overstock_products_output');