Skip to content

Instantly share code, notes, and snippets.

View justintadlock's full-sized avatar

Justin Tadlock justintadlock

View GitHub Profile
@justintadlock
justintadlock / plugin.php
Last active March 21, 2024 03:38
Virtual page templates with block support
<?php
// This filter specifically checks whether a theme has a `changelog` template.
// If not, it looks for a fallback template in the plugin.
add_filter( 'template_include', function( $template ) {
// I'm just testing a query string here for demonstration/testing
// purposes, but you'll want to add a check for your registered query
// var with WordPress. For now, you can test with `?changelog=anything`.
if ( ! isset( $_GET['changelog'] ) ) {
@justintadlock
justintadlock / cover-max-height.php
Last active February 21, 2024 17:39
Cover Block with a max-height block style
<?php
// Add to your theme's `functions.php` file.
//
// This block style has limited use cases to where you know
// what's going to be shown inside the Cover block. Often,
// setting a `max-height` is not a good idea when you have
// nested variable content.
//
// CSS `min-height` always overrules `max-height`, so this will
@justintadlock
justintadlock / in-main-loop.php
Last active February 11, 2024 20:23
A conditional tag for checking if we're in the core WP main query + loop.
<?php
/**
* Conditional to test if we're in the loop of the main query on a WordPress page.
* Please note that checking `in_the_loop() && is_main_query()` will NOT work in
* this scenario.
*/
add_action( 'loop_start', 'my_loop_start' );
add_action( 'loop_end', 'my_loop_end' );
@justintadlock
justintadlock / indent-paragraph-block.php
Created February 4, 2024 23:46
Paragraph indent block style
<?php
add_action( 'init', function() {
register_block_style('core/paragraph', [
'name' => 'indent',
'label' => __('Indent', 'themeslug'),
'inline_style' => 'p.is-style-indent {
text-indent: 3rem;
}'
]);
@justintadlock
justintadlock / navigation.css
Last active January 11, 2024 14:52
Font Awesome icon for WordPress menu item.
/*
* I'm specifically targeting a URL here, but I'd recommend using a custom
* CSS class for the Navigation Link block instead.
*/
.wp-block-navigation-link a[href*="/my-account"]::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
@justintadlock
justintadlock / jt-get-theme-colors.js
Created January 10, 2024 16:04
Gets the theme color palette from within a component in the editor (view the console for the palette).
import { registerPlugin } from '@wordpress/plugins';
import { useSetting } from '@wordpress/block-editor';
// Just creating a simple component so that we can use hooks.
registerPlugin( 'jt-log-theme-colors', {
render: () => {
// Use `useSettings()` in WP 6.5.
const palette = useSetting( 'color.palette.theme' );
// View the console to see colors.
@justintadlock
justintadlock / pattern-query-grid-cover-stack.html
Created December 21, 2023 14:09
Query Loop pattern with stretched Stack block nested in Cover
<!-- wp:query {"queryId":0,"query":{"perPage":"7","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"align":"full","className":"pattern-post-grid-cover","layout":{"type":"constrained"}} -->
<div class="wp-block-query alignfull pattern-post-grid-cover"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|plus-3","left":"var:preset|spacing|plus-3","top":"var(\u002d\u002dtheme-spacing\u002d\u002dplus-3)","bottom":"var(\u002d\u002dtheme-spacing\u002d\u002dplus-3)"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--theme-spacing--plus-3);padding-right:var(--wp--preset--spacing--plus-3);padding-bottom:var(--theme-spacing--plus-3);padding-left:var(--wp--preset--spacing--plus-3)"><!-- wp:post-template {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|minus-3"}},"className":"is-style-no-gap is-style-flex-grow is-style-fe
@justintadlock
justintadlock / register-post-type.php
Last active October 22, 2023 05:55
Help file when registering post types.
<?php
# Register custom post types on the 'init' hook.
add_action( 'init', 'my_register_post_types' );
/**
* Registers post types needed by the plugin.
*
* @since 1.0.0
* @access public
@justintadlock
justintadlock / wp-recipe-card-pattern.html
Created March 18, 2022 01:50
WordPress block code for creating a recipe card pattern.
<!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"border":{"style":"solid","width":"2px"}},"borderColor":"black"} -->
<div class="wp-block-group has-border-color has-black-border-color" style="border-style:solid;border-width:2px"><!-- wp:image {"align":"center","id":10590,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="http://localhost/wp-content/uploads/2022/03/image-2-1024x605.png" alt="" class="wp-image-10590"/></figure>
<!-- /wp:image -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}}}} -->
<div class="wp-block-group" style="padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:heading -->
<h2>Veggie Pizza</h2>
<!-- /wp:heading -->
@justintadlock
justintadlock / webpack.config.js
Created July 19, 2023 21:23
Theme webpack config with multiple stylesheets
// ---------------------------------------------------------------------------------
// Be sure to install:
// npm install @wordpress/scripts glob path webpack-remove-empty-scripts --save-dev
// ---------------------------------------------------------------------------------
// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );