Skip to content

Instantly share code, notes, and snippets.

View henshaw's full-sized avatar

Jon Henshaw henshaw

10 followers · 16 following
View GitHub Profile
@henshaw
henshaw / article-schema.php
Created May 4, 2025 02:30
WordPress functions for dynamically inserting data into Article schema markup
"@id": "<?php the_permalink(); ?>"
"headline": "<?php the_title(); ?>"
"description": "<?php echo get_the_excerpt(); ?>"
"datePublished": "<?php the_time('c'); ?>"
"dateModified": "<?php the_modified_time('c'); ?>"
// For author type
"name": "<?php the_author(); ?>"
"url":"<?php echo get_the_author_meta('user_url'); ?>"
// For image type
"url": "<?php if ( has_post_thumbnail() ) { the_post_thumbnail_url( 'full' ); } ?>"
@henshaw
henshaw / lazy-loading-image.html
Created May 4, 2025 02:29
Lazy loading an image
<img src="https://domain.com/image.png” loading="lazy" alt="Image description">
@henshaw
henshaw / prefetch-js.html
Created May 4, 2025 02:27
Prefetch used for resource hints
<link rel="prefetch" href="script.js" as="script">
@henshaw
henshaw / async-script.html
Created May 4, 2025 02:26
Loading JavaScript asynchronously
<script async src="script.js">
@henshaw
henshaw / exclude-css.php
Created May 4, 2025 02:25
Exclude CSS not used on the page
<?php if (is_front_page()) : ?> CSS only for homepage <?php elseif (is_category(1)) : ?> CSS only for category with ID 1 <?php elseif (is_category(2)) : ?> ... <?php endif; ?>
@henshaw
henshaw / preload-css.html
Created May 4, 2025 02:24
Defering CSS that isn't required for the initial render
<link rel="preload" href="path/to/stylesheet.css" as="style" onload="this.rel='stylesheet'">
@henshaw
henshaw / css.php
Created May 4, 2025 02:22
PHP for including a CSS file in a WordPress template
<style><?php include_once( 'app.css.php' ); ?></style>
@henshaw
henshaw / font-display.css
Created May 4, 2025 02:19
Font display options
font-display:swap;
font-display:optional;
@henshaw
henshaw / ratings-block.php
Created May 4, 2025 02:13
Custom WordPress block used for rating summaries
<div class="ratingsummary">
<div class="rating">
<div><span title="Rating: <?php block_field( 'rating' ); ?> out of 10"><?php block_field( 'rating' ); ?></span></div>
</div>
<div class="pros">
<h2>What I liked most</h2>
<?php block_field( 'strengths' ); ?>
</div>
<div class="cons">
<h2>Could be better</h2>
@henshaw
henshaw / coywolf-logo-srcset.html
Created March 30, 2025 17:06
Coywolf logo swap using the image srcset property
<picture>
<source media="(max-width: 39rem)" srcset="https://coywolf.pro/wp-content/themes/coywolf-v2/images/coywolf-white.svg" width="60" height="52">
<source media="(min-width: 40rem)" srcset="https://coywolf.pro/wp-content/themes/coywolf-v2/images/coywolf-horizontal-logo.svg" width="287" height="52">
<img src="https://coywolf.pro/wp-content/themes/coywolf-v2/images/coywolf-white.svg" loading="eager" alt="Paint color swatches" width="60" height="52">
</picture>