Skip to content

Instantly share code, notes, and snippets.

View iansvo's full-sized avatar

Ian Svoboda iansvo

View GitHub Profile
@iansvo
iansvo / nginx-redirect-uploads-to-production
Created August 7, 2023 16:40
Open the Nginx configuration for your site and look for a server block that listens for port 443. Look for something like Listen 127.0.0.1:443 ssl in the server { ... } block to find the right one. Add the following location rules near the top of the block, after any other definitions.
set $production your-prod-server.com;
# Redirect requests to /wp-content/uploads/* to production server
location @prod_uploads {
rewrite "^(.*)/wp-content/uploads/(.*)$" "https://$production/wp-content/uploads/$2" break;
}
# Rule for handling local requests for images
location ~ "^/wp-content/uploads/(.*)$" {
try_files $uri @prod_uploads;
@iansvo
iansvo / wp-block-editor-get-canvas-width.css
Last active July 3, 2023 11:12
CSS Snippet to calculate the real available width of the WordPress block editor
.edit-post-layout:has(.interface-interface-skeleton__secondary-sidebar) {
--overview-width: 350px;
}
.edit-post-layout.is-sidebar-opened {
--settings-width: 280px;
}
.edit-post-layout {
--scrollbar-width: 16px;
@iansvo
iansvo / async-preload-stylesheets.php
Created May 16, 2023 16:57
Adds async and preload behavior to a given stylesheet in a WordPress theme. Opt-in only.
<?php
add_action( 'style_loader_tag', function ( string $tag, string $handle, string $href, string $media ) : string {
$allowlist = [ 'lwtd-style' ];
if ( !in_array( $handle, $allowlist, true ) ) {
return $tag;
}
$new_tag = new WP_HTML_Tag_Processor( $tag );
$fallback = '<noscript>' . $tag . '</noscript>';
@iansvo
iansvo / post-tag-add-hash-prefix.php
Created November 27, 2022 21:45
Add's a hash (#) to the front of a tag on the frontend of WordPress
<?php
add_filter('get_term', function ($term, $taxonomy) {
// Bail if we're in the admin
if( is_admin() ) {
return $term;
}
$already_modified = strpos( $term->name, '#' ) === 0;
if ( $taxonomy === 'post_tag' && ! $already_modified ) {
@iansvo
iansvo / add-svg-support.php
Created October 19, 2022 22:01
Add svg support to the WordPress media library
<?php
add_filter( 'upload_mimes', function($mime_types) {
$mime_types['svg'] = 'image/svg+xml';
return $mime_types;
} );
@iansvo
iansvo / gutenberg-add-editor-styles.php
Created October 8, 2022 01:57
Add frontend styles to the Gutenberg editor
<?php
/*
* See: https://developer.wordpress.org/reference/functions/add_editor_style/
*
*/
add_action('admin_init', function() {
// Enable support for editor styles
add_theme_support('editor-style');
add_editor_style('dist/css/your-css-file.css'); // Replace path to your frontend stylesheet
@iansvo
iansvo / codekit-trigger-file-process-hook.scpt
Created September 7, 2022 12:14
A simple AppleScript for CodeKit that triggers the processing of a specific file when the hook runs.
tell application "CodeKit"
set projectRoot to get path of active project
process file at path projectRoot & "/src/css/style.css"
end tell
@iansvo
iansvo / wordpress-cache-bust-enqueues.php
Created February 11, 2022 12:46
This is a simple pattern that uses a helper function to pass a dynamic version value to a style/script enqueue. This ensures WordPress updates the asset URL (e.g. the thing the browser downloads from) so it looks like its a new URL, and downloads the most recent version. This is all triggered when the file is modified on disk so its a simple way…
<?php
// This is used as a fallback if the file isn't found for some reason
global $wp_version;
/*
Note:
This function assumes you're only asking for files in your own theme
and that theme isn't a child theme. If you're using a child theme,
replace get_template_directory() with get_stylesheet_directory().
@iansvo
iansvo / foundation-offcanvas-menu-clickable-parent.scss
Created June 4, 2019 20:52
Uses with the Accordion menu in JointsWP's default offcanvas menu. Allows parent links to be clickable as long as they could potentially be clickable.
.your-menu {
&_menu {
.menu-item-has-children {
display: flex;
flex-wrap: wrap;
> span {
flex-grow: 1;
}
@iansvo
iansvo / get-youtube-id-by-url.js
Created April 9, 2019 20:21
Get the ID of a YouTube video using it's URL. Returns false if no ID can be found.
function getYouTubeIdByUrl(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/,
match = url.match(regExp),
result = false;
if( match && match[2].length == 11 ) {
result = match[2];
}
return result;