Code

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.

Code

Redirect Shopify Homepage

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

Code

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')) {
      $('body').addClass('dark');
   } else {
      $('body').removeClass('dark');
   }
});

Code

How to stop a video on click

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

Code

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) {
e.preventDefault();
$(this).closest('.shipping-origin').find('.content').slideToggle();
$(this).closest('.shipping-origin').toggleClass('active');
});

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.

Code

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

# REDIRECT SINGLE SHOP PRODUCTS TO AFFILIATE URL
while ( have_posts() ) : the_post();
header('Location: ' . get_field('link'));
exit;
endwhile;

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){ 
    e.preventDefault();
    $(this).closest('.wpcf7-list-item').find('input[type="checkbox"]').trigger('click');
    $(this).toggleClass('active');
   if ($(this).is('[aria-checked="true"]')) {
       $(this).attr('aria-checked', 'false');
   } else {
       $(this).attr('aria-checked', 'true'); 
   }
});

Code

Take out .html and redirect

Source: ^/(.+).html/?$
Destination: ____.com/$1

Code

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>
</div>

Code

Delete All Featured Images for Posts

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

Code

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%;
}

Code

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:

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
  Order allow,deny
  Allow from all
</Directory><Virtualhost *:80>
  VirtualDocumentRoot "/Users/mckenzierucker/blogs/sites/home/wwwroot"
  ServerName home.test
  UseCanonicalName Off
</Virtualhost><Virtualhost *:80>
  VirtualDocumentRoot "/Users/mckenzierucker/blogs/sites/%1/wwwroot"
  ServerName sites.test
  ServerAlias *.test
  UseCanonicalName Off
</Virtualhost>

Save and restart apache.

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/mod_vhost_alias.so

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 as well:

tail -f /var/log/apache2/access_log

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

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

Code

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

<pre>add_filter('autoptimize_filter_js_defer','my_ao_override_defer',10,1);
function my_ao_override_defer($defer) {
 return $defer."async ";
}</pre>

Code

Add Class when Div is in View

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

CodeJavaScript

Use Keyboard Arrows for Slider

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

CodeScrolling

Add Class when Element hits top of browser

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

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

   if ( docScroll >= homepageNavOffset ) {
	$('.homepage-wrap').addClass('tan');
   } else {
	$('.homepage-wrap').removeClass('tan');
   }
}

CodeScrolling

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'))) {
   $('body').addClass('footer-visible');
} else {				 
   $('body').removeClass('footer-visible');
}

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');
}

Code

Search Results by Relevance instead of Post Date

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

Code

Screenshots to be JPG instead of PNG

Type into Terminal:

defaults write com.apple.screencapture type jpg;killall SystemUIServer

Code

Email Signature

<table style="font-size: 12.8px; font-family: times;">
<tbody><tr><td><a href="http://mckenziesuemakes.com/" target="_blank">
<img src="http://mckenziesue.engine.com/wp-content/themes/mckenziesue-basetheme/img/[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>

Code

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.

Code

[email protected]_______.com.test-google-a.com

When Contact Form 7 does not send to a Gmail email for some reason, add .test-google-a.com 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.

Code

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);
  }
});

Code

Scroll to bottom of Page

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height()-$(window).height()){
    //Add Javascript
}
});

Code

Hide Pinterest Link once you hit the bottom of site

// Hide Pinterest Link
if (docScroll > ($(document).height() - $(window).height() - 100)) {
  $('._____').addClass('hidden');
    } else {
  $('._____').removeClass('hidden');
}