Skip to content

Instantly share code, notes, and snippets.

@zephyrmike
zephyrmike / gb-grids
Created May 10, 2025 17:46
GenerateBlocks Bento Style Grids
<!-- wp:generateblocks/element {"uniqueId":"64c787fc","tagName":"div","styles":{"paddingTop":"4rem","paddingLeft":"2rem","paddingBottom":"4rem","paddingRight":"2rem","@media (max-width:767px)":{"paddingLeft":"1.5rem","paddingRight":"1.5rem"}},"css":".gb-element-64c787fc{padding:4rem 2rem}@media (max-width:767px){.gb-element-64c787fc{padding-left:1.5rem;padding-right:1.5rem}}","metadata":{"name":"Grid One"}} -->
<div class="gb-element-64c787fc"><!-- wp:generateblocks/element {"uniqueId":"00beb200","tagName":"div","styles":{"marginLeft":"auto","marginRight":"auto","maxWidth":"var(\u002d\u002dgb-container-width)"},"css":".gb-element-00beb200{margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width)}"} -->
<div class="gb-element-00beb200"><!-- wp:generateblocks/text {"uniqueId":"ca6149f8","tagName":"p","styles":{"textAlign":"center","fontSize":"1rem","fontWeight":"700","textTransform":"uppercase","letterSpacing":"4px","color":"var(\u002d\u002dbase-2)","marginBottom":"3rem"},"css":".gb-text-
@zephyrmike
zephyrmike / comparison-tables.html
Last active April 23, 2024 15:34
GenerateBlocks Comparison Tables
<!-- wp:generateblocks/container {"uniqueId":"24ce87be","gradientDirection":120,"gradientColorOne":"var(\u002d\u002dgrey)","gradientColorTwo":"var(\u002d\u002dwhite)","gradientColorStopTwo":50,"bgOptions":{"selector":"pseudo-element","opacity":0.3,"overlay":false,"position":"top 140px right -80px","size":"400px","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"position":"relative","overflowX":"hidden","overflowXTablet":"hidden","overflowXMobile":"hidden","overflowY":"hidden","overflowYTablet":"hidden","overflowYMobile":"hidden","spacing":{"paddingTop":"8rem","paddingLeft":"2rem","paddingRight":"2rem","paddingBottom":"8rem"},"metadata":{"name":"Desktop \u0026 Tablet Version"},"hideOnMobile":true} -->
<!-- wp:generateblocks/container {"uniqueId":"1d296f19","isDynamic":true,"blockVersion":4,"flexDirection":"column","sizing":{"widthTablet":"100%"},"useGlobalMaxWidth":true,"spacing":{"marginRight":"auto","marginLeft":"auto","marginTop":""},"globalStyleId":"primary"} -->
<!-- wp:generatebloc
@zephyrmike
zephyrmike / portfolio.htnl
Created January 1, 2024 20:55
GenerateBlocks Pro Portfolio Template
<!-- wp:generateblocks/container {"uniqueId":"0fc6b28d","anchor":"portfolio","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":4,"sizing":{"height":"","maxWidth":""},"globalStyleLabel":"Outer Container"} -->
<!-- wp:generateblocks/container {"uniqueId":"9e36eb19","isDynamic":true,"blockVersion":4,"sizing":{"maxWidth":""},"useGlobalMaxWidth":true,"spacing":{"paddingTop":"120px","paddingRight":"30px","paddingBottom":"120px","paddingLeft":"30px","marginRight":"auto","marginLeft":"auto"},"globalStyleLabel":"Main Padding"} -->
<!-- wp:generateblocks/headline {"uniqueId":"ec2f8859","element":"h1","blockVersion":3,"display":"inline-flex","spacing":{"paddingBottom":"4px"},"borders":{"borderBottomWidth":"1px","borderBottomStyle":"solid","borderBottomColor":"var(\u002d\u002dcontrast-3)"}} -->
<h1 class="gb-headline gb-headline-ec2f8859 gb-headline-text">Latest projects</h1>
<!-- /wp:generateblocks/headline -->
<!-- wp:generateblocks/container {"uniqueId":"702ba69e","isDynamic":true,"blockVers
@zephyrmike
zephyrmike / siab-css
Last active August 30, 2023 15:03
SIAB
/* remove bottom margin on last paragraph or list in container */
.gb-container p:last-child:last-of-type,
.gb-container ul:last-child:last-of-type {
margin-bottom: 0px;
}
/* footer navigation block spacing */
.wp-block-navigation li {
line-height: 1em;
}
@zephyrmike
zephyrmike / gp-nav-effects
Created August 26, 2023 17:59
GeneratePress Navigation Effects
/* rising underline on hover */
@media (min-width: 769px) {
.main-navigation .main-nav ul li > a {
box-shadow: 0 -4px 0px #0088ff inset;
padding-bottom: 2px;
transition: all 300ms ease-in-out;
margin: 0 30px;
}
}
@zephyrmike
zephyrmike / random-bg-images.php
Created August 16, 2023 22:55
Responsive Hero Background Images That Randomly Change
<?php
// random choice of image from ID array
$att_id = array(#, #, #, #, #, #);
$rnd_att_id = $att_id[array_rand($att_id)];
$full_img_url = wp_get_attachment_image_src($rnd_att_id, 'full');
$md_lg_img_url = wp_get_attachment_image_src($rnd_att_id, 'medium_large');
// preload our random image if the exist
if ( !empty( $full_img_url ) && !empty( $md_lg_img_url ) ) {
echo '<link rel="preload" as="image" href="' . esc_url($full_img_url[0]) . '" type="image/jpeg" media="(min-width: 768px)">';
@zephyrmike
zephyrmike / gpgb-snippets
Last active August 25, 2023 13:21
PHP snippets for GeneretePress and GenerateBlocks
// dynamic titles for search results
// use shortcode [search_title]
add_shortcode('search_title',function(){
return sprintf(
/* translators: 1: Search query name */
__( 'Search Results for: %s', 'generatepress' ),
'<span class="search-query">' . get_search_query() . '</span>'
);
});
@zephyrmike
zephyrmike / featured-images
Created September 4, 2022 15:40
GenerateBlocks dynamic featured image sizing
@zephyrmike
zephyrmike / gp-gb-buttons
Last active January 19, 2024 10:38
Button classes for GeneratePress and GenerateBlocks
/* Use the classes below to style all the GeneratePress and GenerateBlocks buttons */
/* GeneratePress button */
.button,
.button:visited,
.button:focus {
/* add styles here */
}
@zephyrmike
zephyrmike / podia-button.css
Last active July 12, 2022 23:11
Styling a Podia embed button using the WP html block and css
/*
1. get the link embed code for your Podia product
2. add class="button" to the Podia embed code
3. paste the code inside a WordPress html block
4. edit the button css below to style your button
*/
.button {
background-color: #111111;
color: #ffffff;