Code

Create a Custom Widget in WordPress

if (function_exists('register_sidebar')) {
     register_sidebar(array(
         '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; ?>


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 (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
</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, 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/libphp7.so

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

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