Integrating slick.js into wordpress

Adjusted some of your code. This should work: [php]<?php /** * Block Name: Testimonials * * This is the template that displays the testimonials loop block. */ $argType = get_field(‘loop_argument_type’); if ($argType == "count") : $args = array( ‘orderby’ => ‘title’, ‘post_type’ => ‘testimonials’, ‘posts_per_page’ => get_field(‘testimonial_count’) ); else : $testimonials = get_field(‘select_testimonials’); $args = … Read more

Consider marking event handler as ‘passive’ to make the page more responsive

I am using hammer for dragging and it is getting choppy when loading other stuff, as this warning message is telling me. Handling of ‘touchstart’ input event was delayed for X ms due to main thread being busy. Consider marking event handler as ‘passive’ to make the page more responsive. So I tried to add … Read more

WordPress and best practice with passive event listeners

So I have run an audit on a website in chrome and google says I should use passive event listeners. I have looked through the code and identified it’s coming from the wordpress emoji integration: [code lang=”js”]/*<![CDATA[*/window._wpemojiSettings={"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72×72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/mysite.com.au\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=14BexZMoP1gqvSbLZSfYigjUvfcXkroScK"}};!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);/*]]>*/</script> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3Eimg.wp-smiley%2Cimg.emoji%7Bdisplay%3Ainline%20!important%3Bborder%3Anone%20!important%3Bbox-shadow%3Anone%20!important%3Bheight%3A1em%20!important%3Bwidth%3A1em%20!important%3Bmargin%3A0%20.07em%20!important%3Bvertical-align%3A-0.1em%20!important%3Bbackground%3Anone%20!important%3Bpadding%3A0%20!important%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" … Read more

‘hr’ right aligned next to text – CSS

Explanation: Here, the main part is to use overflow: hidden; on the element, and than am creating a virtual element using an :after pseudo with content property, and am positioning it absolute to the parent element which am setting to relative [php]<h2>Hello World</h2>[/php]   [css]h2 { font-size: 20px; font-family: Arial; position: relative; overflow: hidden; } h2:after { display: inline-block; content: ""; height: 4px; background: … Read more

Custom order status background button color in WooCommerce 3.3 admin order list

You can set CSS color and background color to your custom order status displayed in admin order list this way: [php]add_action(‘admin_head’, ‘styling_admin_order_list’ ); function styling_admin_order_list() { global $pagenow, $post; if( $pagenow != ‘edit.php’) return; // Exit if( get_post_type($post->ID) != ‘shop_order’ ) return; // Exit // HERE we set your custom status $order_status = ‘Dispatched’; // … Read more

How to Resizing Image in Bootstrap Carousel

The reason why your image is resizing which is because it is fluid. You have two ways to do it: 1. Either give a fixed dimension to your image using CSS like: [css].carousel-inner > .item > img { width:640px; height:360px; }[/css] 2. A second way to can do this: [css].carousel { width:640px; height:360px; }[/css] [custom-related-posts … Read more

How to Hide Added to Cart message in WooCommerce

Update for WooCommerce 3+ The hook wc_add_to_cart_message is deprecated and replaced by wc_add_to_cart_message_html. You can use the following (compact effective way): [php]add_filter( ‘wc_add_to_cart_message_html’, ‘__return_false’ );[/php] Or the normal way: [php]add_filter( ‘wc_add_to_cart_message_html’, ’empty_wc_add_to_cart_message’); function empty_wc_add_to_cart_message( $message, $products ) { return ”; }; [/php] Before WooCommerce 3, use this: Removing only the message (pasting it to your function.php file inside … Read more