zackpyle

/** TABLE OF CONTENTS
---------------------------------------------------------------------------/


1.0 - Global Styles
  1.1 - General
  1.2 - Selection Highlight
  1.3 - Buttons
  1.4 - Typography
  1.5 - Custom Font Face

zackpyle

This is a collection of my most used or most useful PHP and JS snippets
**Disclaimer, I didn't write most of these - I just curated them over the years**

zackpyle

// A Button that scrolls the page down from section to section smoothly
// Button needs to be positioned absolutely and design using css or a builder
// Here is the demo of this button in use https://youtu.be/_JZ9k0kT7yY?t=382
// Borrowed from https://github.com/thisbit/github_snippets/blob/main/js/scroll-down-button.js and converted to jQuery

jQuery(document).ready(function($) {
    const $button = $('.carret-down');
    const $sections = $('.custom-section');
    
    function* goToNextSection(event) {

zackpyle

<?php // ignore this line - only for formatting

// Use the [URLParam param='paramName'] shortcode to display GET parameters from the current URL

function displayURLparam( $atts ) {
    extract( shortcode_atts( array(
        'param' => 'param',
    ), $atts ) );
    return esc_attr(esc_html($_GET[$param]));
}

zackpyle

jQuery(document).ready(function($) {
  $.fn.equalHeights = function() {
    let max_height = 0;
    $(this).each(function() {
      max_height = Math.max($(this).height(), max_height);
    });
    $(this).each(function() {
      $(this).height(max_height);
    });
  };

zackpyle

A Read More button (in Beaver Builder but could be adapted for anywhere)

- I have included html, css, and js examples -

I have added a bunch of comments to help you adapt to your situation and explain it along the way

zackpyle

<?php //ignore - only for gist formatting

// Only show current user's posts in BB post module with current-user as module ID
function showAuthorPosts( $query_args ) {
  if ( 'current-user' == $query_args['settings']->id ) { // Set the id of the post module to current-user
    $query_args['author'] = get_current_user_id(); // Filter by the current logged-in user
  }
  return $query_args;
}
add_filter( 'fl_builder_loop_query_args', 'showAuthorPosts' );

zackpyle

<!-- Team CPT (team_member), and Team Category (team_category) - Separeted into their categories -->

<!-- Note: In this case, the order of the taxonomy matters, so we will use a plugin to set
menu order of team_category and use orderby=menu_order to respect that order instead of just outputting it in alpha order -->


<Loop type=taxonomy_term taxonomy=team_category orderby=menu_order>
  <h2><Field title /></h2>
  <Loop type=team_member taxonomy=team_category terms="{Field id}">
    <Field title />

zackpyle

Pull posts from a CPT into a <select> field and then display content from that post based on if it is selected

- This example is showing a list of insurance companies and which states they cover

1. The content is pulled from a CPT called insurance_company. That CPT has a taxonomy called state. Using Loops & Logic, we will output a <select> containing the insurance companies.
2. Next to that, we will output a list of divs, one for each insurance company with their corresponding covered States.
3. Then with the JS, we will hide all those divs, leaving an instructional div showing when nothing is selected. When an insurance company is selected, we will find the matching div and display it.

zackpyle

<?php // ignore - for gist formatting only

// Add Page Slug to Body Class
function add_slug_body_class( $classes ) {
	global $post;
	if ( isset( $post ) ) {
		$classes[] = $post->post_type . '-' . $post->post_name;
	}
	return $classes;
}