ben-heath

/* Put this in your preferred CSS location */
/* Modal CSS */
/* The Modal (background) */
.sls-modal {
  display: none;
    position: fixed;
    z-index: 999;
		left: 0;
		right: 0;
    top: 0;

ben-heath

<?php
/* This code goes into your child theme's function.php file
 * Or it can use FacetWP's recommendation and use a plugin https://facetwp.com/how-to-use-hooks/
 *
 * I found that the tutorial on FacetWP's site didn't function how I wanted it to.
 * https://facetwp.com/how-to-hide-the-template-until-facets-are-selected/
 * Their method doesn't allow a template to show if you use a link with a url query, indicating a facet selection, it only works if
 * if you 'click' on the page. So I came up with some JS that looks at the facet list, and looks for any 'checked' items.
 * This way, whether it was clicked while on the page, or you linked to the page with a query string selection, it still works as I wanted.
 */

ben-heath

<?php

function fod_custom_customizer_options( $wp_customize ) {

    $wp_customize->add_section( 'fod_options' , array(
    'title'      => __('Homepage Popup Form'), 
    'panel'      => '',
    'priority'   => 1000
    ) ); 

ben-heath

<?php
/* Need to include flipclock.js's css and js files. Instructions found on their github page
 * http://flipclockjs.com
 * 
 */
// Flipper countdown function
function sls_flipper_countdown($atts){
  // Attributes - For the End Date
    extract( shortcode_atts(
        array(

ben-heath

<script>
  /* 
  *   This simple script will take multiple html elements, like a group of <li> or <span> or anything,
  *   and reorder them by the data attribute.
  *   Example:
  *   The script will reorder this:
  *   <span data-test="1">Number 1</span>
  *   <span data-test="4">Number 2</span>
  *   <span data-test="3">Number 3</span>
  *   <span data-test="2">Number 4</span>

ben-heath

<?php

add_shortcode( 'video-testimonials', 'sls_video_testimonial_short_code' );
function sls_video_testimonial_short_code( $atts ) {
    ob_start();
    $query = new WP_Query( array(
        'post_type' => 'video-testimonial',
        'posts_per_page' => 4,
        'order' => 'ASC',
        'orderby' => 'title',

ben-heath

# Trigger button/link
# Must use the 'onClick' method to target the modal, rather than 'data-target'
<a href="javascript:void(0);" id="login-pop-trigger" onClick="jQuery(\'#login-popup\').modal();" role="button" data-toggle="modal"><i class="fas fa-user-plus" aria-hidden="true"></i> Login</a>

# Simple Modal
<div id="login-popup" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-body">
        <p>You are about to delete this Page, this is irreversible.</p>
    </div>
</div>

ben-heath

function breadcrumbs() {
	global $post;
	ob_start();
	// Code
	if(!is_home()) {
		$breadcrumb = '<nav class="breadcrumb">';
		$breadcrumb .= '<a href="'.home_url('/').'">Home</a><span class="divider"> / </span>';
		if (is_category() || is_single()) {
			$breadcrumb .= the_category(' <span class="divider"> / </span> ');
			if (is_single()) {

ben-heath

jQuery(document).ready(function(){
	//jQuery('#rs-fullwidth-helper1').before('<p style="color:black;">testing4</p>');
	function countUp() {

		jQuery('.counter').each(function() {
			  var counter = jQuery(this),
			      countTo = counter.attr("data-count");
			  
			  jQuery({ countNum: counter.text()}).animate({
			    countNum: countTo

ben-heath

<script type="text/javascript"> <!-- remove script tag if putting in html -->
jQuery(document).ready(function(){

  if(window.location.hash != "") {
      // Clicks the tab link so that it is the active one
      jQuery('a[href="' + window.location.hash + '"]').click(); 
      // Animate scroll to the tab
      jQuery('html, body').animate({scrollTop: window.location.hash.offset().top -100 }, 'slow');
  }