Skip to content

Instantly share code, notes, and snippets.


Mark Root-Wiley mrwweb

View GitHub Profile
mrwweb / diviToggleAccessibility.js
Last active Dec 2, 2022
Fix Divi Toggle Accessibility - JavaScript with no dependencies. Attempts to drastically improve accessibility of the Divi Toggle module. Should follow basics of ARIA authoring practices accordion: Hat tip to Mike Haydon for convincing me this was doable:…
View diviToggleAccessibility.js
const diviToggleModules = document.querySelectorAll('.et_pb_toggle');
let toggleIndex = 0;
diviToggleModules.forEach( toggle => {
function setupAria(toggle) {
const toggleId = 'toggle-content-' + toggleIndex;
mrwweb / button.php
Created Aug 26, 2022
Using get_template_part() for Componentized WordPress Themes
View button.php
* $args is available with all values passed in third parameter of get_template_part()
* In a real theme, this would go in something like parts/button.php or components/button.php
* Think carefully about which $args you assume will always be available and which you need to check for
* @link
mrwweb / faux-block-editor.css
Last active Feb 10, 2022
CSS to make the Classic Editor look more like the Block Editor
View faux-block-editor.css
* faux-block-editor.css v1.1
* Styles to make the Classic Editor screen appear more like the Block Editor
* Expects the class "faux-block-editor" on any screen that should use these styles
.faux-block-editor {
overflow-x: hidden;
mrwweb / bookmarklet-source.js
Created Apr 8, 2021
Copy/Paste-able Survey Monkey Answers - Paste the following into a bookmark's location setting and then run it on a single page of a Survey Monkey form. You'll then get a list of the questions and answers you can copy and paste. Currently works for radio, textarea, and text input fields. More to come?
View bookmarklet-source.js
( function() {
const questions = document.querySelectorAll( '.question-container' );
let result = '';
questions.forEach( ( q ) => {
let answerText = '';
let question = q.querySelector( '.question-title-container' ).innerText.replace( '* ', '' );
let answer = q.querySelector( 'label.checked' );
if ( null === answer ) {
answer = q.querySelector( 'textarea' );
mrwweb /
Last active Nov 22, 2022
The Events Calendar v2 Template Reset & Customizations

The Events Calendar v2 Template Reset & Customizations

Version 1.5


The Events Calendar is a very powerful WordPress plugin for managing events. However, the way its templates and CSS are implemented—especially in "v2"—leave much to be desired.

This contains all the changes I make on a project for The Events Calendar. Hopefully it's useful. If it saves you an hour, maybe you can buy me a cup of coffee or a beer 🍻

mrwweb / nested-block-alignments.css
Created Jan 6, 2021
WordPress Block Alignment Classes with Support for Nested Group Blocks
View nested-block-alignments.css
.block-container > *, /* [1] */
.wp-block-group__inner-container > * { /* [2] */
max-width: 46.25rem;
margin-left: 1.25rem;
margin-right: 1.25rem;
@media (min-width: 48.75em) { /* [3] */
margin-left: auto;
margin-right: auto;
mrwweb / block-editor-styles.scss
Created Jul 9, 2020
Create a WordPress block editor style variation for the cover block to turn it into a knockout effect. Screenshot:
View block-editor-styles.scss
// we load the other CSS styles into the block editor and then override some of them here
// at present, the color overlay is not knocked out in the block editor
.is-style-knockout-text {
.wp-block-cover__inner-container {
z-index: 1;
.wp-block > * {
font-size: 160px !important;
font-weight: 900 !important;
color: transparent !important;
mrwweb / functions.php
Created Jun 24, 2020
Show Hidden Products as Cross-Sells in WooCommerce Cart.
View functions.php
add_filter( 'woocommerce_product_is_visible', 'prefix_show_hidden_product_crosssells', 10, 2 );
function prefix_show_hidden_product_crosssells( $is_visible, $id ) {
if( is_cart() ) {
$is_visible = true;
return $is_visible;
mrwweb / mrw-tribe-button-in-event-list.php
Created Oct 28, 2019
Show Event Website block in Event List for The Events Calendar
View mrw-tribe-button-in-event-list.php
* Find, parse, and return the Website Button for Tribe's The Events Calendar events
function mrw_get_tribe_website_button( $post_id = false ) {
if( ! $post_id ) {
$post_id = get_the_ID();
$post_content = get_post_field( 'post_content', $post_id );
View session.html
<div id="session-1" class="session session-1 track-1" style="grid-column: track-1; grid-row: time-0800 / time-0900;">
<h3 class="session_title">Talk Title</h3>
<span class="session_time">
<span class="session_time_start">8:00</span>
<span class="session_time_sep"> - </span>
<span class="session_time_end">9:00</span>
<span class="session_track">Track: 1</span>
<span class="session_author"><span class="session_author_gravatar"><img src="..."></span>Mike Rofone</span>