Skip to content

Instantly share code, notes, and snippets.



View GitHub Profile
ben-heath / simple-modal-popup.css
Created March 26, 2020 18:44
Simple JavaScript Popup Modal
View simple-modal-popup.css
/* 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 / facetwp-template-display-if-facet-selected.php
Last active June 9, 2022 19:07
FacetWP - show template only if a facet is selected
View facetwp-template-display-if-facet-selected.php
/* This code goes into your child theme's function.php file
* Or it can use FacetWP's recommendation and use a plugin
* I found that the tutorial on FacetWP's site didn't function how I wanted it to.
* 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 / custom-child-theme-customizer.php
Created February 8, 2019 20:46
Add custom customizer sections / panels for Wordpress child theme
View custom-child-theme-customizer.php
function fod_custom_customizer_options( $wp_customize ) {
$wp_customize->add_section( 'fod_options' , array(
'title' => __('Homepage Popup Form'),
'panel' => '',
'priority' => 1000
) );
ben-heath / sls-countdown-flipper-clock.php
Created August 31, 2018 14:15
WordPress Shortcode countdown clock using FlipClock.js
View sls-countdown-flipper-clock.php
/* Need to include flipclock.js's css and js files. Instructions found on their github page
// Flipper countdown function
function sls_flipper_countdown($atts){
// Attributes - For the End Date
extract( shortcode_atts(
ben-heath / reorder-html-by-data-attribute.php
Created April 11, 2018 21:51
Reorder html elements by data attribute using JS
View reorder-html-by-data-attribute.php
* 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 / shortcode-list-cpt-posts.php
Created April 11, 2018 15:25
Shortcode list CPT posts
View shortcode-list-cpt-posts.php
add_shortcode( 'video-testimonials', 'sls_video_testimonial_short_code' );
function sls_video_testimonial_short_code( $atts ) {
$query = new WP_Query( array(
'post_type' => 'video-testimonial',
'posts_per_page' => 4,
'order' => 'ASC',
'orderby' => 'title',
ben-heath / bootstrap-2-modal.php
Created March 16, 2018 14:36
This code works with bootstrap 2, and fixes the show/hide behavior experienced with Respondo if following normal Bootstrap documentation
View bootstrap-2-modal.php
# 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>
ben-heath / breadcrumb-shortcode.php
Created March 14, 2018 20:17
Short to add breadcrumb
View breadcrumb-shortcode.php
function breadcrumbs() {
global $post;
// 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 / animated-counter-intersectionObserver.js
Created February 23, 2018 23:21
Makes numbers animate from a number to another number (using IntersectionObserver API)
View animated-counter-intersectionObserver.js
//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 / link-and-scroll-to-tab.js
Created September 5, 2017 16:44
Link to specific tab on different page (or same page)
View link-and-scroll-to-tab.js