Skip to content

Instantly share code, notes, and snippets.

Avatar
🏄‍♂️

mark l chaves marklchaves

🏄‍♂️
View GitHub Profile
@marklchaves
marklchaves / astra-fix-unwanted-border-outline.css
Created Jul 23, 2021
Astra theme fix for unwanted border style and outline on mobile submenu toggle
View astra-fix-unwanted-border-outline.css
/**
* Add this custom CSS to remove the unwanted border
* (large dots) and thin outline on focus. See screengrab
* in the gist comments section.
*
* https://marklchaves.medium.com/adding-custom-css-to-your-wordpress-website-how-to-guide-a50b474af36d
*/
.ast-menu-toggle {
border-style: none; /* Add !important if needed. */
View find-images-with-no-alt-text.js
console.clear();
let out = '';
let images = [];
let problems = [];
$$('img').forEach(img => {
//document.querySelectorAll('img').forEach(img => {
let text = img.getAttribute('alt');
if (!text) {
img.style.outline = '3px solid orangered';
problems.push(img);
@marklchaves
marklchaves / avada_add_custom_html_above_header.php
Last active Jul 15, 2021
PHP hook for adding custom HTML above the header in the Avada theme.
View avada_add_custom_html_above_header.php
<?php // Don't copy this first line when adding to your child theme's functions.php file.
/** Add custom HTML above the header in the Avada theme. */
function add_my_html() {
if ( is_page( array( 'sample-page' ) ) ) {
return;
}
$my_html = <<<EOT
<style>
.my-header-styles {
@marklchaves
marklchaves / popup-maker-1-3-5-plus-pages.js
Last active Jul 20, 2021
Show a Popup Maker popup for the first, third, fifth, and sixth+ pages only.
View popup-maker-1-3-5-plus-pages.js
/** Set up the page counter in the browser's session storage. */
(function(){
let pc = parseInt(sessionStorage.getItem("page-count"));
if (!pc) {
sessionStorage.setItem("page-count", 1);
} else {
if (pc >= 5) return; // Can stop counting now.
sessionStorage.setItem("page-count", pc += 1);
}
})();
@marklchaves
marklchaves / alternative-jquery-solution.js
Last active Jul 16, 2021
Try overriding the Gravity Forms default confirmation with a Popup Maker popup using either a GF hook or with jQuery.
View alternative-jquery-solution.js
/* Try this code in the footer area of your page if the PHP hook below doesn't work. */
jQuery(document).ready(function ($) {
// Replace 123 and 456 with your respective popup IDs throughout.
$("#pum-123").on("pumBeforeOpen", function () {
const $gfConfirmation = $("#gform_confirmation_message_2"); // Replace 2 with your form's ID.
if ($gfConfirmation.length) {
console.log(`%c[PUM] Confirmation loaded for Gravity Forms form #2.`, 'color:orangered;font-size:16px');
PUM.preventOpen(123); // First popup with the GF form.
PUM.open(456); // Thank you popup.
@marklchaves
marklchaves / popup-maker-send-impression-conversion-to-ga4-all-popups.js
Last active Jul 13, 2021
Popup Maker: Send a popup impression and conversion to GA4 using the gtag.js API
View popup-maker-send-impression-conversion-to-ga4-all-popups.js
/**
* Generic version to send impresions for all popups.
* I.e., no harcoded values.
*/
jQuery(document).ready(function($){
// Let's send popup impressions to GA4.
$("[id^='pum-']").on("pumAfterOpen", function (e) {
console.log(`[GA4] Popup impression for popup ${$(e.target).attr("id")}.`);
gtag("event", "popup_impression", {
popup_id: $(e.target).data("popmake").slug,
@marklchaves
marklchaves / ashtabula-custom.css
Last active Jul 13, 2021
Override Ashtabula Settings
View ashtabula-custom.css
/**
* Keep the image and the text stacked for
* all display widths.
*/
.swiper-slider-plugin__section {
display: flex;
align-items: center;
justify-content: center;
}
@marklchaves
marklchaves / send-generate-lead-ga4-using-gtag.js
Last active Jul 6, 2021
jQuery for sending a generate_lead event (form submission) to GA4 using WPForms and gtag.js API
View send-generate-lead-ga4-using-gtag.js
/** We'll use WPForms as an example. */
jQuery(document).ready(function($){
// Trick from https://www.chrisains.com/seo/tracking-wpforms-submissions-with-google-analytics/
let $wpConfirmationDiv = $('#wpforms-confirmation-357');
if ($wpConfirmationDiv.length) {
console.log('[GA4] WPForms #357 was successfully submitted.');
gtag("event", "generate_lead", {
'form_id': 'WPForm #357', // TO DO: Try to get form ID or name here.
});
}
@marklchaves
marklchaves / popup-maker-find-all-triggers.js
Last active Jul 23, 2021
Chrome snippet to highlight and console.log all Popup Maker and custom popup triggers
View popup-maker-find-all-triggers.js
console.clear();
let allTriggers = [...$$(".pum-trigger"), ...$$("[class*='launch']")]; // Replace launch with your custom trgger if any.
if (allTriggers.length > 0) {
let firstTrigger = "";
let s = allTriggers.length === 1 ? "" : "s";
console.info('[PUM] %d trigger%s found!', allTriggers.length, s);
console.groupCollapsed('[PUM] All triggers');
allTriggers.forEach(t => {
if (!firstTrigger) {
firstTrigger = t;
@marklchaves
marklchaves / popup-maker-highlight-triggers.js
Last active Jun 16, 2021
Highlight the popup triggers on a page. Original and minified versions provided.
View popup-maker-highlight-triggers.js
(function ($) {
$("style#pum-highlighted").remove();
$("body").append(
$("")
.attr("id", "pum-highlighted")
.text(
".pum-highlighted { background-color: rgba(255, 255, 0, .75)!important; outline: 3px dashed #fe5d26ff !important; }"
)
);
function highlight() {