Skip to content

Instantly share code, notes, and snippets.

View SteveJonesDev's full-sized avatar

Steve Jones SteveJonesDev

11 followers · 9 following
View GitHub Profile
@SteveJonesDev
SteveJonesDev / accessible-popup-modal.php
Created June 20, 2024 17:28
Accessible Popup Modal
/**
* Adds an accessible popup to the footer.
*
* This function outputs the HTML, CSS, and JavaScript needed for an accessible popup.
* The popup can be opened with a button click, and it traps focus within itself when open.
* The popup can be closed with a button click or by pressing the Escape key.
*/
function add_accessible_popup_to_footer() {
?>
<!-- Accessible Popup HTML -->
@SteveJonesDev
SteveJonesDev / script.js
Created April 30, 2024 18:25
Elementor Slides Widget - Hide duplicate slides available to keyboard users in the Dom for better accessibility
document.addEventListener('DOMContentLoaded', function() {
const swiperWrapper = document.querySelector('.swiper-wrapper');
if (!swiperWrapper) {
console.error('Swiper wrapper not found!');
return;
}
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
@SteveJonesDev
SteveJonesDev / script.js
Last active June 26, 2024 15:05
Elementor Slides Widget - Accessible Pause Button
// Wait for the DOM content to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Create a MutationObserver to watch for changes in the DOM
const observer = new MutationObserver(function(mutations, obs) {
// Look for the swiper wrapper element
const swiperWrapper = document.querySelector('.elementor-main-swiper .swiper-wrapper');
// If the swiper wrapper is found, set up slider controls and stop observing
if (swiperWrapper) {
@SteveJonesDev
SteveJonesDev / script.js
Created April 25, 2024 20:18
Elementor Mini Cart Accessibility Enhancement
document.addEventListener('DOMContentLoaded', function() {
const toggleButtons = document.querySelectorAll('.elementor-menu-cart__toggle_button');
const closeButtons = document.querySelectorAll('.elementor-menu-cart__close-button');
const modalContainers = document.querySelectorAll('.elementor-menu-cart__container');
function setAccessibility(container, isOpen) {
const focusableElements = container.querySelectorAll('a, button, input, select, textarea, [tabindex]');
focusableElements.forEach(element => {
element.setAttribute('tabindex', isOpen ? '0' : '-1');
});
@SteveJonesDev
SteveJonesDev / scripts.js
Created April 25, 2024 20:00
Elementor Search Widget Accessibility Enhancements
document.addEventListener("DOMContentLoaded", function() {
// Get all search widgets
const widgets = document.querySelectorAll('.elementor-search-form');
widgets.forEach(function(widget) {
const searchToggle = widget.querySelector('.elementor-search-form__toggle');
const searchInput = widget.querySelector('.elementor-search-form__input');
const searchContainer = widget.querySelector('.elementor-search-form__container');
const closeButton = widget.querySelector('.dialog-lightbox-close-button');
@SteveJonesDev
SteveJonesDev / index.html
Last active May 31, 2024 19:17
Screen Reader Only Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sr-only {
position: absolute;
width: 1px;
@SteveJonesDev
SteveJonesDev / functions.php
Created October 20, 2023 19:17
ACF Post Object Field Term Filter
<?php
/**
* Filters the query arguments for the 'featured_posts' ACF Post Object field.
* The filter limits the displayed posts to those associated with the currently edited/viewed term
* for the taxonomies: 'category', and 'post_tag'.
*
* @param array $args The WP_Query arguments.
* @param array $field The field settings.
* @param int $post_id The post ID (or term ID, depending on context).
@SteveJonesDev
SteveJonesDev / functions.php
Created October 11, 2023 18:47
ACF Phone Number Validation for Custom Post Type in WordPress
<?php
/**
* Validates the 'sjd_unit_phone' field for the 'sjd_orders' custom post type.
*
* If the phone number format is incorrect, it prevents the post from being saved,
* sets the post status to 'draft', and redirects the user back to the post editor
* with a custom query parameter to indicate validation failure.
*
* @param int $post_id The ID of the post being saved.
@SteveJonesDev
SteveJonesDev / functions.php
Created October 11, 2023 17:52
On a WordPress multisite subsite track if the user is logged in on the main site and add log In or Log Out link to the primary menu
<?php
/**
* Check if the user is logged in to the main site.
*
* @return bool True if the user is logged in to the main site, false otherwise.
*/
function sjd_is_user_logged_in_main_site() {
switch_to_blog( 1 ); // 1 usually represents the main site in a multisite setup.
$logged_in = is_user_logged_in();
@SteveJonesDev
SteveJonesDev / gist:2b963a33fb6b8e2f89cc6004b1f35bf7
Created October 4, 2023 16:17
functions.php
<?php
function restrict_search_to_specific_post_type($query) {
// Check if query is a search, is on the frontend, and is on the 'product' post type archive
if ($query->is_search && !is_admin() && is_post_type_archive('product')) {
$query->set('post_type', 'product');
}
return $query;
}
add_action('pre_get_posts', 'restrict_search_to_specific_post_type');