Skip to content

Instantly share code, notes, and snippets.

View askwpgirl's full-sized avatar

Angela Bowman askwpgirl

8 followers · 3 following
View GitHub Profile
@askwpgirl
askwpgirl / custom.css
Created July 10, 2025 17:49
Respect Motion Preferences for Elementor Animated Headline
/* Use the selector below to hide the animated headline highlight */
@media (prefers-reduced-motion: reduce) {
.elementor-headline--style-highlight svg {
display: none !important;
}
}
/* Use the selectors below to hide the rotating headline and use a different headline */
@askwpgirl
askwpgirl / custom.js
Created May 7, 2025 22:50
Add aria-current="page" for Elementor mega menu subitems
<script>document.addEventListener('DOMContentLoaded', function () {
const currentUrl = window.location.origin + window.location.pathname;
const links = document.querySelectorAll('a[href]');
links.forEach(link => {
const linkUrl = new URL(link.href);
const normalizedLink = linkUrl.origin + linkUrl.pathname;
if (normalizedLink === currentUrl) {
link.setAttribute('aria-current', 'page');
@askwpgirl
askwpgirl / functions.php
Last active May 6, 2025 23:37
Hide License Renewal Notice in Elementor
<?php
// copy the following code in to Code Snippets plugin and set to only run in Adminstration area.
// do not copy this text or anything above it.
/**
* Remove annoying Elementor license notice
*/
add_action("admin_enqueue_scripts", function() {
?>
@askwpgirl
askwpgirl / custom.js
Created April 11, 2025 22:14
Flipbox script for click custom flipbox in Elementor
<script>
(function($) {
function setupFlipBoxes($scope) {
$scope.find('.custom-flip-box').each(function () {
const $flipBox = $(this);
$flipBox.off('click').on('click', function () {
$flipBox.toggleClass('flipped');
});
});
}
@askwpgirl
askwpgirl / custom.css
Last active July 10, 2025 17:54
CSS for Elementor to Respect Reduced Motion
/* This is a CSS media query for accessibility-aware
** browsers respects reduced motion setting in operating systems */
@media (prefers-reduced-motion: reduce) {
.elementor-element.animated {
transform: none !important;
}
}
@askwpgirl
askwpgirl / style.css
Last active April 8, 2025 21:24
Elementor Accessibile Hyperlinks and Hover State
/* Add this CSS to your Custom CSS in Site Settings
** or custom.css */
/* Underline hyperlinks in text widgets */
.elementor-widget-text-editor a {
text-decoration: underline;
}
.elementor-widget-text-editor a:hover {
@askwpgirl
askwpgirl / pause-sliders.js
Created April 8, 2025 19:44
Add Pause Button to Elementor Carousels
//Add this to Header/Footer plugin in the HTML <head>
<script>
document.addEventListener('DOMContentLoaded', function () {
const seen = new WeakSet();
const interval = setInterval(() => {
const swiperEls = document.querySelectorAll('.swiper.swiper-initialized');
swiperEls.forEach((swiperEl, index) => {
if (seen.has(swiperEl)) return;
@askwpgirl
askwpgirl / gist:5daf4c7e8b6e43b952df6d71dd2a32ca
Created February 27, 2025 01:40
CSS for Elementor's broken lightbox styles
/* Elementor's Site Settings for Lightbox icon colors
has been broken for a long time.
You can use the code below in your custom CSS to control
the icon colors */
.elementor-slideshow__header,
.elementor-lightbox .dialog-lightbox-close-button,
.elementor-lightbox .elementor-swiper-button {
color: #000 !important;
}
@askwpgirl
askwpgirl / robots.txt
Last active February 2, 2025 16:39
Robots.txt for The Events Calendar
The Events Calendar can drive up huge amoounts of CPU by generating tons of worthless URLs that bots try to call.
Following is a robots.txt file that can combat these excessive server hits from Google and Facebook bots.
Note, this also blocks The Events Calendar Categories which you may or may not want to do.
User-agent: *
Crawl-delay: 3
Disallow: /wp-login.php
Disallow: /trackback
Disallow: /feed
@askwpgirl
askwpgirl / gist:b6658d29f377b41e600cf737359c4274
Created February 1, 2025 18:09
Fix Elementor Mobile Display on Post Widget with Left Positioned Image
/* Text content disappears on post widgets that have a left-aligned image,
unless the image ratio is adjusted to be very tiny on mobile.
To stack the image instead, use this CSS in the Customizer. */
@media(max-width: 767px) {
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
left: auto !important;
position: relative !important;
top: auto !important;
transform: none !important;