Retina Display Media Query

Using cross browser retina/high resolution media queries for icons (on hover, focus, before/after pseudo elements):

// Retina
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {

   .spritesheet,
    #faqs-accordion button.accordion h3::after {
        content: '' !important;
	background-image: url(../images/yorkregion_spritesheet@2x.png) !important;
	background-size: 800px !important;
    }
    #faqs-accordion button.button-bg:after {
        content: '' !important;
        background: url(../images/menu-items-bg@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;        
    }
    #faqs-accordion button.accordion:hover:after,
    #faqs-accordion button.accordion:focus:after {
        content: '' !important;
        background: url(../images/menu-items-bg-dark@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;
    }    
}

Deregister script and css file that is registered by Visual Composer from a theme

An example how to deactivate the whole Flexslider, Nivoslider and Owl Carousel sliders in the Visual Composer plugin.

add_action( 'wp_enqueue_scripts', 'remove_vc_modules', 99 );
function remove_vc_modules() {
	wp_deregister_style( 'flexslider' );
	wp_deregister_script( 'flexslider' );

	wp_deregister_style( 'nivo-slider-css' );
	wp_deregister_style( 'nivo-slider-theme' );
	wp_deregister_script( 'nivo-slider' );

	wp_deregister_style( 'owl-carousel' );
	wp_deregister_script( 'owl-carousel' );
}

Advanced Custom Field custom field to select one or many Gravity Forms

This is a WP Advanced Custom Field plugin custom field to select one or many Gravity Forms. This provides a field that lets you select from a list of active Gravity Forms https://github.com/stormuk/Gravity-Forms-ACF-Field

Installation

This add-on can be treated as both a WP plugin and a theme include.

Plugin 1. Copy the ‘Gravity-Forms-ACF-field’ folder into your plugins folder 2. Activate the plugin via the Plugins admin page

Include 1. Copy the ‘Gravity-Forms-ACF-field’ folder into your theme folder (can use sub folders). You can place the folder anywhere inside the ‘wp-content’ directory 2. Edit your functions.php file and add the code below (Make sure the path is correct to include the acf-gravity_forms.php file)

include_once('acf-gravity_forms.php');

Using the field

The field lets you pick one or many fields.

The data returned is either a Form object, an array of Form objects or false if an error occurred.

If you have selected a single form and you want to display the form on the page, you can use:

<?php 
    $form_object = get_field('your_form_field');
    gravity_form_enqueue_scripts($form_object['id'], true);
    gravity_form($form_object['id'], true, true, false, '', true, 1); 
?>

or

<?php 
    $form_object = get_field('your_form_field');
    echo do_shortcode('[gravityform id="' . $form_object['id'] . '" title="true" description="true" ajax="true"]');
?>

You can find out more about the gravity_form method to embed a form on a page in their documentation

If you are using the field to select multiple forms, you will have to iterate over the array. You can then use the form object as you like:

<?php
    $form_objects = get_field('your_forms');

    foreach($form_objects as $form){
        echo $form['title'];  
    }
?>

Custom Scrollbar (Always Showing)

Note: can be applied to general page
Note 2: If applied to specific element/container a position absolute may be necessary
CSS

p.customClass {
  overflow-y: scroll;
}

p.customClass::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

p.customClass::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(98, 93, 78, 0.75);
  border: 2px solid #eee;
}

p.customClass::-webkit-scrollbar-corner {
  background-color: transparent;
}

Add responsive full width video on background

HTML

CSS

#homepage-video {
	&.embed-responsive {
		position: relative;
		display: block;
		height: 0;
		padding: 0;
		overflow: hidden;
	}
	&.embed-responsive .embed-responsive-item,
	&.embed-responsive iframe,
	&.embed-responsive embed,
	&.embed-responsive object,
	&.embed-responsive video {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	&.embed-responsive-16by9 {
		padding-bottom: 35%;
	}
	&.embed-responsive-4by3 {
		padding-bottom: 55%;
	}
}