Skip to content

Instantly share code, notes, and snippets.

@diggeddy
diggeddy / castos-mega-menu-sprites.php
Last active Aug 29, 2021
Castos Mega Menu Builder with SVG Sprites
View castos-mega-menu-sprites.php
<?php
/**
* Castos Mega Menu Options page
* Purpose: store location of SVG Sprite and display preview of sprite symbols
* Retrieve sprite URL options with:
* $castos_mega_menu_options = get_option( 'castos_mega_menu_option_name' ); // Array of All Options
* $svg_sprite_url_0 = $castos_mega_menu_options['svg_sprite_url_0']; // SVG Sprite URL
*/
class CastosMegaMenu {
private $castos_mega_menu_options;
@diggeddy
diggeddy / castos-options.php
Last active Aug 27, 2021
Castos Options Page Example
View castos-options.php
<?php
// Options page for Castots Mega menu icons
class CastosMegaMenu {
private $castos_mega_menu_options;
public function __construct() {
add_action( 'admin_menu', array( $this, 'castos_mega_menu_add_plugin_page' ) );
add_action( 'admin_init', array( $this, 'castos_mega_menu_page_init' ) );
}
@diggeddy
diggeddy / price-table-toggle.js
Last active Aug 17, 2021
Castos Monthly Annual Price Table Toggle JS
View price-table-toggle.js
/* Get Our Elements */
const starterPrice = document.querySelector('.starter-price');
const starterUom = document.querySelector('.starter-uom');
const growthPrice = document.querySelector('.growth-price');
const growthUom = document.querySelector('.growth-uom');
const proPrice = document.querySelector('.pro-price');
const proUom = document.querySelector('.pro-uom');
const btnMonthly = document.querySelector('.btn-monthly');
const btnAnnual = document.querySelector('.btn-annual');
const planDescription = document.querySelector('.plan-description');
@diggeddy
diggeddy / avery.html
Last active Jul 16, 2021
AveryHomePageHTML
View avery.html
<!-- wp:generateblocks/container {"uniqueId":"9d00a292","containerWidth":640,"paddingTop":"120","paddingRight":"20","paddingBottom":"180","paddingLeft":"20","paddingTopMobile":"100","paddingRightMobile":"20","paddingBottomMobile":"160","paddingLeftMobile":"20","backgroundColorOpacity":0.19,"gradient":true,"gradientDirection":270,"gradientColorOne":"#f1c1d2","gradientColorOneOpacity":1,"gradientColorStopOne":0,"gradientColorTwo":"#f4ddf8","gradientColorTwoOpacity":1,"gradientColorStopTwo":100,"bgImage":{"id":2583,"image":{"height":800,"width":1200,"url":"https://gpsites.co/avery/wp-content/uploads/sites/56/avery-1200x800.jpg","orientation":"landscape"}},"bgOptions":{"overlay":false,"position":"left top","size":"cover","repeat":"no-repeat","attachment":"","selector":"pseudo-element","opacity":0.7},"isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"0d1cf1d8","element":"h1","alignment":"center","backgroundColor":"","backgroundColorOpacity":0.2,"textColor":"#72727f","borderColor":"","borderColorOpa
View Star Bar Shortcode
function make_star_bar( $atts ) {
$value = shortcode_atts( array(
'stars' =>5,
'color' => '#f00'
),$atts);
$percentage = 100 * $value['stars'] / 5;
$html = '<span class="star-bar">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<style>
.star-bar {
background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%);
View skip-lazy-first-featured-image.php
View catalyst-home
<!-- wp:generateblocks/container {"uniqueId":"be95a9f6","elementId":"intro","paddingTop":"120","paddingRight":"20","paddingBottom":"20","paddingLeft":"20"} -->
<div id="intro" class="gb-container gb-container-be95a9f6"><div class="gb-inside-container"><!-- wp:generateblocks/headline {"uniqueId":"98637e69","alignment":"center"} -->
<h2 class="gb-headline gb-headline-98637e69">Discover New Worlds Using GeneratePress &amp; GenerateBlocks</h2>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/headline {"uniqueId":"23ca4fcc","elementId":"intro","element":"p","alignment":"center","marginTop":"30","marginRight":"200","marginBottom":"60","marginLeft":"200","marginTopTablet":"30","marginRightTablet":"20","marginBottomTablet":"60","marginLeftTablet":"20"} -->
<p id="intro" class="gb-headline gb-headline-23ca4fcc">Create custom layouts of any type with GenerateBlocks. The Grid Block allows you to add any number of columns at any width. Set your column widths individually for desktop, tablet and mobile devices
View Dispatch WPSP Grid
/* WPSP Grids */
/* Single column align side image */
/* Add wpsp-align class to to WPSP List shortcode wrapper */
.wpsp-card,
.wpsp-card a,
.wpsp-card .wp-show-posts-meta a,
.wpsp-card .wp-show-posts-meta a:visited {
color: #fff;
}
View REMspacing-Tyopgraphy.css
/* Experimental basic REM spacing and typography */
html {
font-size: 18px;
}
@media(max-width: 768px) {
html {
font-size: 16px;
}
@diggeddy
diggeddy / GP + Perfmatters No Lazy on logos
Created Aug 3, 2020
Add no-lazy class to GP logos to exclude perfmatters lazy loading
View GP + Perfmatters No Lazy on logos
add_filter( 'generate_mobile_header_logo_output', function( $output ) {
if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
return $output;
}
$settings = wp_parse_args(
get_option( 'generate_menu_plus_settings', array() ),
generate_menu_plus_get_defaults()
);