Skip to content

Instantly share code, notes, and snippets.

View doubleedesign's full-sized avatar

Leesa Ward doubleedesign

View GitHub Profile
@doubleedesign
doubleedesign / typechecker.test.ts
Last active February 5, 2023 11:30
Function to determine the TypeScript type of a given value using a predefined list of types
import savedArtists from '../json-data/test/artists.json' assert { type: 'json'};
import { getType } from './typechecker';
// NOTE: These tests are a work in progress,
as I have so far only completed work with the "Artist" type on the project at the time of writing
describe('Typechecker', () => {
it('Correctly identifies and Artist', () => {
const item = savedArtists[0];
const type = getType(item);
@doubleedesign
doubleedesign / cpt-case_study.php
Created June 28, 2021 09:43
Use a WooCommerce product attribute taxonomy for a custom post type
<?php
// Register Custom Post Type
// Note: Using woocommerce_after_register_taxonomy hook instead of init because we're using a product attribute taxonomy with this CPT
function doublee_cpt_case_study() {
$labels = array(
'name' => _x('Case studies', 'Post Type General Name', 'doubleedesign'),
'singular_name' => _x('Case study', 'Post Type Singular Name', 'doubleedesign'),
'menu_name' => __('Case studies', 'doubleedesign'),
'name_admin_bar' => __('Case study', 'doubleedesign'),
@doubleedesign
doubleedesign / widget-product-categories.php
Created January 17, 2021 06:27
Override the output of the WooCommerce product categories widget to be a Bootstrap accordion
<?php
/**
* Product Categories Widget
* Modifies the WooCommerce product categories widget to display as a Bootstrap accordion.
*
* @package WooCommerce/Widgets
* @version 2.3.0
*/
defined( 'ABSPATH' ) || exit;
@doubleedesign
doubleedesign / mixin-tags.scss
Last active March 7, 2023 23:12
Mixin to display a list of links like label tags
@mixin tags {
ul {
margin: 0;
li {
list-style: none;
display: inline-block;
&:before {
@doubleedesign
doubleedesign / _box.scss
Last active March 19, 2023 10:27
Vertically centred CSS arrow/triangle on side of box. Demo: https://codesandbox.io/s/css-arrowbox-demo-8pif6y?file=/src/styles.scss
$spacing: (
xs: 0.25rem,
sm: 0.5rem,
md: 0.75rem,
lg: 1rem,
xl: 1.5rem,
xxl: 2rem
);
$colours: (
@doubleedesign
doubleedesign / useLocalStorage.ts
Created March 21, 2023 11:25
useLocalStorage React hook. Keep a state value in sync with one cached in the browser using local storage.
import { useState, useEffect, Dispatch, SetStateAction } from 'react';
export function useLocalStorage<T>(key: string, defaultValue: T): { value: T; setValue: Dispatch<SetStateAction<T>> } {
const [value, setValue] = useState(() => {
return localStorage?.getItem(key) ? JSON.parse(localStorage.getItem(key)) : defaultValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
@doubleedesign
doubleedesign / class-unhooky-plugin-custom-admin-stuff.php
Last active March 21, 2023 11:26
Unhook a Ninja Forms plugin action from within another plugin. The context for this example was using Ninja Forms for Expression of Interest forms associated with Jobs (a custom post type), and a customised admin screen for viewing submissions. (This isn't the whole plugin, it's just the parts required to show how to unhook a Ninja Forms functio…
/**
* Job listings functionality for Client Website
* Note: Requires Ninja Forms plugin
* Note: Truncated for use in a gist to demonstrate unhooking a Ninja Forms function
*
* @since 1.0.0
* @package MyPlugin
* @subpackage MyPlugin/admin
*/
class MyPlugin_Jobs extends MyPlugin_Settings {
@doubleedesign
doubleedesign / filter-orders-by-role.php
Last active March 22, 2023 21:45
Add the ability to filter WooCommerce orders by role in wp-admin
<?php
/**
* Add role drop-down to orders screen
*/
function doublee_add_order_user_role_filter_selectbox() {
global $typenow, $wp_query;
if (in_array($typenow, wc_get_order_types('order-meta-boxes'))) :
$user_role = '';
@doubleedesign
doubleedesign / _useResize.ts
Last active March 31, 2023 02:20
useResize React hook. Dynamically get height and width of an element when its size changes and store the values in state. Demo: https://codesandbox.io/s/useresize-demo-de04o8?file=/src/hooks/useResize.ts
import { MutableRefObject, useMemo, useEffect, useState } from 'react';
interface Dimensions {
width: number;
height: number;
}
export function useResize(ref: MutableRefObject<HTMLElement | undefined>, deps: unknown[]): Dimensions {
const [width, setWidth] = useState<number>(0);
const [height, setHeight] = useState<number>(0);
@doubleedesign
doubleedesign / Button.styled.ts
Created April 7, 2023 00:10
Extend a styled component as a different HTML element
import styled from 'styled-components';
interface ButtonProps {
// Props to be used for styling below
}
export const StyledButton = styled.button<ButtonProps>`
// Styles
&:hover, &:focus, &:active {