Reorder By Term in custom taxonomy page query with ‘meta_key’

function filter_product_tax( $query ){
  if( $query->is_tax('product-category')):
  		$query_object = get_queried_object();
  		$slug = $query_object->slug;
      $query->set('orderby', 'meta_value_num title');
      $query->set('order', 'ASC');
      $query->set('posts_per_page', 24);
      $query->set('meta_key', '_reorder_term_product-category_' . $slug . '');

add_action('pre_get_posts', 'filter_product_tax');


Stat-filled URL

<?php the_permalink($post->ID); ?>?utm_medium=referral&utm_content=spotlight&utm_source=gmgblog


SBI Instagram Feed CSS


#sb_instagram .sbi_type_carousel .fa-clone {
  display: none !important;

@media (max-width: 768px) {
	#sb_instagram #sbi_images .sbi_item {
    width: 25% !important;
	#sb_instagram #sbi_images .sbi_item:nth-child(5), #sb_instagram #sbi_images .sbi_item:nth-child(6), #sb_instagram #sbi_images .sbi_item:nth-child(7), #sb_instagram #sbi_images .sbi_item:nth-child(8) {
    display: none !important;

@media (max-width: 650px) {
	#sb_instagram #sbi_images .sbi_item {
    width: 33.33% !important;
	#sb_instagram #sbi_images .sbi_item:nth-child(4) {
    display: none !important;


Shopstyle API Link


Redirect rule for Year+Month URL to Post Name

Source:  ^/([0-9]{4})/([0-9]{2})/(.*)
Destination:  /$3


Create a Custom Widget in WordPress

if (function_exists('register_sidebar')) {
         'name' => 'Subscribe Pop-up Wording',
         'id' => 'subscribe-popup',
         'description' => 'This is the content for the subscribe pop-up',
         'before_widget' => '
',         'after_widget' => '
         'before_title' => '',         'after_title' => '

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Subscribe Pop-up') ) : endif; ?>


Fix Stubborn Favicon

Have a favicon that won’t change? Right click on your website and click ‘View Page Source’, then Command + F to search for rel=”icon”.

See how many there are and find the ones that are last. Rename and replace the images in the uploads folder.


Redirect Shopify Homepage

{% unless template != 'index' %} <script> window.location.replace( 'your_url' ); </script> {% endunless %}


Change Logo color depending on slick slide class

$('.content-block-slideshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
   if ($('.slideshow .slide[data-id="' + nextSlide + '"]').hasClass('dark')) {
   } else {


How to stop a video on click

$(this).closest('___').find('iframe').attr('src', $('iframe').attr('src'));


When to use .on()

When you add elements to the dom, and then want click handlers on them, you have to add it to a dom element that was already there on page load.

$('.product-description').on('click', '.toggle-shipping', function(e) {

Since shipping origin and the toggle-shipping link was added after the fact in jQuery, you have to basically call the js .on() handler. Meaning that it’s going to watch the product-description for any .toggle-shipping element added to it and then run that click event.


Redirect Single Pages of a Custom Post Type to a Custom Field URL

while ( have_posts() ) : the_post();
header('Location: ' . get_field('link'));

CodeARIA & ADA Compliance

ARIA for Contact Form 7 Checkboxes

$('.wpcf7-list-item-label').attr('role', 'checkbox');
$('.wpcf7-list-item-label').attr('aria-checked', 'false');

$('.wpcf7-list-item-label').on('touchstart click', function(e){ 
   if ($(this).is('[aria-checked="true"]')) {
       $(this).attr('aria-checked', 'false');
   } else {
       $(this).attr('aria-checked', 'true'); 


Take out .html and redirect

Source: ^/(.+).html/?$


Adding Affirm Payments

<div id="more-information">
<p class="affirm-as-low-as" data-page-type="product" data-amount="{{ current_variant.price | money_without_currency | remove: '.' | remove: ',' }}"></p>


Delete All Featured Images for Posts

global $wpdb;
$wpdb->query( "
DELETE FROM $wpdb->postmeta 
WHERE meta_key = '_thumbnail_id'
" );


Make Video Fluid / Responsive

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;


Software Update and Local Dev doesn’t work

Open Terminal:

cd /etc/apache2

make a copy of all httpd.conf files (usually there is a httpd.conf, httpd.conf.pre-update, and httpd.conf.after-update):

cp /etc/apache2 ~/Desktop

Rename httpd.conf to something like httpd.conf.2020-update and then rename httpd.conf.pre-update to httpd.conf (link to a httpd.conf match):

sudo mv httpd.conf httpd.conf.2020-update
sudo mv httpd.conf.pre-update httpd.conf

Restart apache:

sudo apachectl restart

If that doesn’t work, cd to extra folder and replace httpd-vhosts.conf with previous or this file:

<Directory "/Users/mckenzierucker/blogs">
  Options Indexes MultiViews FollowSymLinks
  AllowOverride All
  Require all granted
<Virtualhost *:80>
  VirtualDocumentRoot "/Users/mckenzierucker/blogs/sites/home/wwwroot"
  ServerName home.test
  UseCanonicalName Off
<Virtualhost *:80>
  VirtualDocumentRoot "/Users/mckenzierucker/blogs/sites/%1/wwwroot"
  ServerName sites.test
  ServerAlias *.test
  UseCanonicalName Off

Save and restart apache.

If that doesn’t work, try deleting ‘Order allow,deny’ and ‘Allow from all’ lines and add ‘Require all granted’. Save and restart apache.

If that doesn’t work, vim httpd.conf file and uncomment this line:

LoadModule php7_module libexec/apache2/

If that doesn’t work, go back to /apache2 folder and sudo vim httpd.conf file and uncomment the include line with httpd-vhosts.conf (take out the #. Restart apache.

Include /private/etc/apache2/extra/httpd-vhosts.conf

If that doesn’t work, vim httpd.conf file and make sure this line is uncommented. Restart apache.

LoadModule vhost_alias_module libexec/apache2/

If that doesn’t work, make sure apache is turned on:

sudo apachectl stop
sudo apachectl start

From here on, do apachectl configtest and check this line by refreshing the browser when this is active:

tail -f /var/log/apache2/error_log

Don’t forget to try this line on your project’s dir too:

sudo chmod -R g+rwx wwwroot/; sudo chown -R _www:staff wwwroot/;

This is a good line to check that your config file is all good:

sudo chmod -R g+rwx wwwroot/; sudo chown -R _www:staff wwwroot/;

Another line to check:

tail -f /var/log/apache2/access_log


Remove Tasty Pins Hover

 Remove Tasty Pins hover
 Disable Tasty Pins Pinterest image hover button.
 remove_action( 'wp_head', array( 'Tasty_Pins\Frontend', 'action_wp_head_print_pinit_js' ) ); 

CodeSite Speed

Add Async Flag to Script Produced by Autoptimize

function my_ao_override_defer($defer) {
 return $defer."async ";


Add Class when Div is in View

$('.site-footer').on('inview', function(event, isInView) {
	if (isInView) {
	  // element is now visible in the viewport
	} else {
	  // element has gone out of viewport


Use Keyboard Arrows for Slider

var $slider = $('.single-project-slideshow');
	$(document).on('keydown', function(e) {
	if(e.keyCode == 37) {
	if(e.keyCode == 39) {


Add Class when Element hits top of browser

var homepageNav = $('.homepage-wrap');

if (homepageNav.length) {
   var homepageNavOffset = homepageNav.offset().top - 70;

   if ( docScroll >= homepageNavOffset ) {
   } else {


Add Class when Element scrolls into View

function isScrolledIntoView(elem) {
  if (elem.length) {
	var docViewTop = $(window).scrollTop();
	var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top - 300;
	var elemBottom = elemTop + $(elem).height();

	return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

if (isScrolledIntoView($('.site-footer'))) {
} else {				 

ShopifyCodeShopify Code

How to add fonts to a Shopify site

Make it a fonts.scss.liquid and then add {{ ‘fonts.scss.css’ | asset_url | stylesheet_tag }} to theme.liquid

Example of formatting:

@font-face {
    font-family: 'BeausiteGrandThin';
    src: url('BeausiteGrandThin.eot');
    src: url('BeausiteGrandThin.eot') format('embedded-opentype'),
         url('BeausiteGrandThin.woff2') format('woff2'),
         url('BeausiteGrandThin.woff') format('woff'),
         url('BeausiteGrandThin.ttf') format('truetype'),
         url('BeausiteGrandThin.svg#BeausiteGrandThin') format('svg');


Search Results by Relevance instead of Post Date

add_filter('relevanssi_orderby', 'rlv_fix_order');
function rlv_fix_order($orderby) {
    $orderby = "relevance";
    return $orderby;


Screenshots to be JPG instead of PNG

Type into Terminal:

defaults write type jpg;killall SystemUIServer


Email Signature

<table style="font-size: 12.8px; font-family: times;">
<tbody><tr><td><a href="" target="_blank">
<img src="[email protected]" width="250&quot;" style="float: left; padding-right: 15px; padding-bottom: 15px;"></a>
<p style="padding-left: 0px; margin-top: 0px; font-family: lato, sans-serif; margin-bottom: 0px; font-size: 7px; letter-spacing: 1px;"><a style="color: black;">MCKENZIE SUE RUCKER<br>
<br>PH: 509.855.2557<br><br>[email protected]</a></p></td></tr></tbody></table>


If WordPress max file-size is too low

*Caution: You should not edit this file if you are not confident in the code. You shouldn’t really change the upload_max_filesize for purposes other than importing.


For wordpress upload go to /etc/php5/apache2
Vim php.ini
Search for upload_max_filesize and post_max_size by writing / before the word.
Instead of copying the wording just change the number.
Do sudo service apache2 restart.


When Contact Form 7 does not send to a Gmail email for some reason, add to the end and it may help. I learned this trick from a Google support agent and it has worked every time. You will want to also download the ‘Contact Form 7 Submissions’ to make sure any submissions don’t get lost between your site and your email inbox.


Smooth Scroll Link

$(".smooth-scroll-link").click(function() {
that = this;

var href = $.attr(that, 'href');
  if (href != '#' && href != '') {
    var target = $(href);
    $('html, body').animate({
       scrollTop: target.offset().top
    }, 1000);


Scroll to bottom of Page

if ($(window).scrollTop() == $(document).height()-$(window).height()){
    //Add Javascript


Hide Pinterest Link once you hit the bottom of site

// Hide Pinterest Link
if (docScroll > ($(document).height() - $(window).height() - 100)) {
    } else {