Skip to content

Instantly share code, notes, and snippets.

View doubleedesign's full-sized avatar

Leesa Ward doubleedesign

View GitHub Profile
@doubleedesign
doubleedesign / _export-orders.php
Last active March 19, 2024 10:05
Export selected data about the currently shown WooCommerce orders to a CSV file
<?php
/**
* Function to export the orders list to a CSV download (not stored anywhere)
* CSV construction based on https://gist.github.com/vrushank-snippets/4274500
* Dev notes:
* - This file is designed to be called via AJAX, with that function providing the order IDs.
* - To use this without AJAX you would just need to define $order_ids = wp_list_pluck($wp_query->posts, 'ID') instead,
* and define $filename as something appropriate here.
*/
function doublee_export_orders() {
# ZSH Theme based on Solus (https://gist.github.com/cloudnull/4cc7890acaae6cb809e811e09e9eaade#file-solus-zsh-theme)
# Modified with custom colours
# See https://coderwall.com/p/pb1uzq/z-shell-colors for colour codes
if [[ $UID -eq 0 ]]; then
local user_symbol='%F{196}#%f'
else
local user_symbol='%F{226}$%f'
fi
@doubleedesign
doubleedesign / breadcrumbs-list.php
Created December 4, 2018 00:52
Mark up Yoast breadcrumbs as an unordered list
<?php
/**
* Filter the output of Yoast breadcrumbs so each item is an <li> with schema markup
* @param $link_output
* @param $link
*
* @return string
*/
function doublee_filter_yoast_breadcrumb_items( $link_output, $link ) {
@doubleedesign
doubleedesign / previous-sibling.scss
Last active January 28, 2024 10:47
CSS previous sibling selector example
// I have sections (called blocks here) that should have top and bottom padding,
// unless two of the same kind with the same background colour are together -
// in which case I want them to be right up next to each other - no padding between them.
// In the HTML it looks something like this:
// <section class="block my-special-block has-primary-background-color">
.block {
padding-top: map-get($spacing, 'lg');
padding-bottom: map-get($spacing, 'lg');
}
@doubleedesign
doubleedesign / checkout-functions.php
Created May 17, 2019 06:50
Add reCaptcha v2 to WooCommerce Checkout
<?php
/**
* Add reCaptcha to checkout form
* Note: Can't place within the payment part of the form, WooCommerce just won't show it, choose an appropriate action to add it to accordingly
* @param $checkout
*/
function doublee_show_me_the_checkout_captcha($checkout) {
echo '<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>';
}
add_action('woocommerce_checkout_order_review', 'doublee_show_me_the_checkout_captcha', 18);
@doubleedesign
doubleedesign / App.vue
Created December 17, 2023 01:24
Vue component with customisable HTML element using "as" prop
<script setup lang="ts">
import Drawer from './components/Drawer.vue';
</script>
<template>
<div class="app-wrapper">
<Drawer position="left" :open="true" as="header">
<p>Stuff goes here</p>
</Drawer>
<main class="page-content">
@doubleedesign
doubleedesign / class-admin-ui.php
Last active December 16, 2023 06:49
Rename a WordPress admin menu item without knowing its index (because they can change!)
<?php
// Note: it's not mandatory to put this in a class, it's just how I write my plugins
class Doublee_Admin_UI {
public function __construct() {
add_action('admin_menu', array($this, 'rename_menu_items'));
// ...other function calls
}
/**
@doubleedesign
doubleedesign / scripts.js
Created May 18, 2020 09:05
Use Animate.css for Slick slider transitions
// Note: This assumes you already have the CSS set up for the classes you want to use.
function initCarousel() {
$('.my-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
adaptiveHeight: false,
fade: true,
@doubleedesign
doubleedesign / markup.php
Created September 23, 2023 11:45
Alter output of WordPress TinyMCE field content
<?php
/**
* Add spans and icons to buttons added by applying custom link classes in the WYSIWYG editor
* @param $content
* @return string
*/
function wapr_add_icons_to_buttons($content): string {
return preg_replace_callback('/<a class="btn btn--(?:.*) btn--icon" href="(?:.*)">(.*)<\/a>/', function($match) {
return str_replace($match[1], '<span>'.$match[1].'</span><i class="fa-regular fa-chevron-right"></i>', $match[0]);
}, $content);
@doubleedesign
doubleedesign / useTruncatedText.ts
Last active August 7, 2023 01:27
React hook to keep text on one line, truncating it with an ellpisis if it's longer than its container's width. Demo: https://codesandbox.io/s/morning-butterfly-x8rxwy?file=/src/App.tsx
import { useState, useEffect, useMemo, MutableRefObject } from 'react';
import { useVisibleSize } from './useVisibleSize.ts';
export function useTruncatedText(outerRef: MutableRefObject<any>, innerRef: MutableRefObject<any>) {
const { width: outerWidth } = useVisibleSize(outerRef.current);
const { width: innerWidth } = useVisibleSize(innerRef.current);
useEffect(() => {
if (innerRef.current) {
innerRef.current.style.whiteSpace = "nowrap";