define ('WP_MEMORY_LIMIT', '768M');
define('WP_MAX_MEMORY_LIMIT', '756M');
set_time_limit(300);
.site-main p a {
font-weight: bold;
}
p:last-of-type{
margin: 0;
}
body {overflow-x:hidden !important;}
Redirect 404 to Home Page PHP
add_action( 'template_redirect', function() {
if (is_404()) {
wp_safe_redirect(home_url());
exit();
}
} );
Smooth Scrolling for Anchor Links
document.addEventListener('click', function(e) {
// Check if the clicked element is an anchor with href starting with '#'
if (e.target.tagName === 'A' && e.target.getAttribute('href') && e.target.getAttribute('href').startsWith('#')) {
e.preventDefault();
const targetId = e.target.getAttribute('href').slice(1); // Remove the '#' from the href
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
}
});
Limit Uploaded Image Size
add_filter( 'wp_handle_upload', function ( $file ) {
$max_width = 1920;
$max_height = 1920;
// Check if the file is an image.
$mime_type = mime_content_type( $file['file'] );
if ( strpos( $mime_type, 'image' ) === false ) {
return $file;
}
// Get the image size.
$image_size = getimagesize( $file['file'] );
if ( ! $image_size ) {
return $file;
}
// Check if the image is smaller than 1920px width or height.
if ( $image_size[0] <= $max_width && $image_size[1] <= $max_height ) {
return $file;
}
// Resize the image.
$image_editor = wp_get_image_editor( $file['file'] );
if ( is_wp_error( $image_editor ) ) {
return $file;
}
$image_editor->resize( $max_width, $max_height );
$image_editor->save( $file['file'] );
return $file;
} );
Disable Site Health
// Remove Tools Submenu Item for Site Health.
add_action( 'admin_menu', function () {
remove_submenu_page( 'tools.php', 'site-health.php' );
} );
// Prevent direct access to the Site Health page.
add_action( 'current_screen', function () {
$screen = get_current_screen();
if ( 'site-health' === $screen->id ) {
wp_safe_redirect( admin_url() );
exit;
}
} );
// Disable the Site Health Dashboard Widget.
add_action( 'wp_dashboard_setup', function () {
global $wp_meta_boxes;
if ( isset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_site_health'] ) ) {
unset( $wp_meta_boxes['dashboard']['normal']['core']['dashboard_site_health'] );
}
} );
Limit the Number of Post Revisions
add_filter( 'wp_revisions_to_keep', function( $limit ) {
// Limit to the last 10 revisions. Change 10 to whatever limit you want.
return 10;
} );
Change Excerpt Length
add_filter(
'excerpt_length',
function ( $length ) {
// Number of words to display in the excerpt.
return 40;
},
500
);
Dynamic Year Copyright Shortcode
// Copy the Shortcode in the Insertion box below and paste it wherever you want the copyright symbol + year to be displayed.
// This will output © 2023 or the current year automatically.
echo "© " . date( 'Y' );
Disable Thumbnail Image Sizes
add_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {
// Disable specific thumbnail sizes, uncomment the ones you want to disable.
// unset( $sizes['thumbnail'] ); // 150px x 150px
// unset( $sizes['medium'] ); // 300px x 300px
// unset( $sizes['medium_large'] ); // 768px x 0px
// unset( $sizes['large'] ); // 1024px x 1024px
// unset( $sizes['1536x1536'] ); // 1536px x 1536px
// unset( $sizes['2048x2048'] ); // 2048px x 2048px
return $sizes;
} );
Default Featured Image
// Go to Settings > Media after activating this snippet to set the default featured image.
add_action( 'admin_init', function() {
register_setting( 'media', 'default_featured_image', 'absint' );
add_settings_field(
'default_featured_image',
__( 'Default Featured Image', 'wpcode-snippet' ),
function() {
wp_enqueue_media();
$image_id = get_option( 'default_featured_image', 0 );
$image_url = $image_id ? wp_get_attachment_url( $image_id ) : '';
?>
<div>
<img decoding="async" id="default-featured-image-preview" src="<?php echo esc_url( $image_url ); ?>" style="max-width: 150px; display: <?php echo $image_url ? 'block' : 'none'; ?>; margin-bottom: 10px;"/>
<input type="hidden" id="default_featured_image" name="default_featured_image" value="<?php echo esc_attr( $image_id ); ?>"/>
<button type="button" class="button" id="upload-default-featured-image"><?php esc_html_e( 'Choose Image', 'wpcode-snippet' ); ?></button>
<button type="button" class="button" id="remove-default-featured-image"><?php esc_html_e( 'Remove Image', 'wpcode-snippet' ); ?></button>
</div>
<script>
jQuery( document ).ready( function ( $ ) {
var removeButton = $( '#remove-default-featured-image' );
var frame;
$( '#upload-default-featured-image' ).on( 'click', function ( event ) {
event.preventDefault();
if ( frame ) {
frame.open();
return;
}
frame = wp.media( {
title: '<?php echo esc_js( __( 'Select Default Featured Image', 'wpcode-snippet' ) ); ?>',
button: {
text: '<?php echo esc_js( __( 'Use this image', 'wpcode-snippet' ) ); ?>'
},
multiple: false
} );
frame.on( 'select', function () {
var attachment = frame.state().get( 'selection' ).first().toJSON();
$( '#default_featured_image' ).val( attachment.id );
$( '#default-featured-image-preview' ).attr( 'src', attachment.url ).show();
removeButton.show();
} );
frame.open();
} );
$( '#remove-default-featured-image' ).on( 'click', function () {
$( '#default_featured_image' ).val( '' );
$( '#default-featured-image-preview' ).hide();
removeButton.hide();
} );
if ( $( '#default_featured_image' ).val() === '0' ) {
removeButton.hide();
}
} );
</script>
<?php
},
'media',
'default',
array( 'label_for' => 'default_featured_image' )
);
});
add_filter( 'post_thumbnail_html', function( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
if ( ! $html ) {
$default_image_id = get_option( 'default_featured_image' );
if ( $default_image_id ) {
$image_url = wp_get_attachment_image_src( $default_image_id, $size );
if ( $image_url ) {
$html = '<img decoding="async" src="' . esc_url( $image_url[0] ) . '" class="attachment-' . esc_attr( $size ) . ' wp-post-image" alt="' . esc_attr( get_the_title( $post_id ) ) . '" />';
}
}
}
return $html;
}, 10, 5 );
Add Media File Size Column
add_filter( 'manage_upload_columns', function ( $columns ) {
$columns ['file_size'] = esc_html__( 'File size' );
return $columns;
} );
add_action( 'manage_media_custom_column', function ( $column_name, $media_item ) {
if ( 'file_size' !== $column_name || ! wp_attachment_is_image( $media_item ) ) {
return;
}
$filesize = size_format( filesize( get_attached_file( $media_item ) ), 2 );
echo esc_html( $filesize );
}, 10, 2 );
Add Media File Size Column
add_filter( 'manage_upload_columns', function ( $columns ) {
$columns ['file_size'] = esc_html__( 'File size' );
return $columns;
} );
add_action( 'manage_media_custom_column', function ( $column_name, $media_item ) {
if ( 'file_size' !== $column_name || ! wp_attachment_is_image( $media_item ) ) {
return;
}
$filesize = size_format( filesize( get_attached_file( $media_item ) ), 2 );
echo esc_html( $filesize );
}, 10, 2 );
Reorder Admin Menu Items
add_filter( 'custom_menu_order', '__return_true' );
// This will move the WPCode menu under the Dashboard menu item.
// Uncomment and add more items as needed.
add_filter( 'menu_order', function () {
return array(
'index.php',
'wpcode',
// 'edit.php', // Posts
// 'upload.php', // Media
// 'edit.php?post_type=page', // Pages
// 'edit-comments.php', // Comments
);
} );
Add Featured Image Column
add_filter( 'manage_posts_columns', function ( $columns ) {
// You can change this to any other position by changing 'title' to the name of the column you want to put it after.
$move_after = 'title';
$move_after_key = array_search( $move_after, array_keys( $columns ), true );
$first_columns = array_slice( $columns, 0, $move_after_key + 1 );
$last_columns = array_slice( $columns, $move_after_key + 1 );
return array_merge(
$first_columns,
array(
'featured_image' => __( 'Featured Image' ),
),
$last_columns
);
} );
add_action( 'manage_posts_custom_column', function ( $column ) {
if ( 'featured_image' === $column ) {
the_post_thumbnail( array( 300, 80 ) );
}
} );
Customize Password Protect Page Login
.post-password-form {
padding: 200px 100px;
height: 75vh;
background: #e7f1f3;
}
#pwbox-1762 {
background-color: #ffffff;
}
/*
Plugin Name: Purge Cache
Description: Adds a button to the WordPress dashboard to clear the object cache
*/
add_action( 'admin_bar_menu', 'add_purge_cache_button', 999 );
function add_purge_cache_button( $wp_admin_bar ) {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
$args = array(
'id' => 'purge-cache',
'title' => 'Purge Cache',
'href' => '#',
'meta' => array( 'class' => 'purge-cache' )
);
$wp_admin_bar->add_node( $args );
}
add_action( 'admin_footer', 'add_purge_cache_script' );
function add_purge_cache_script() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
?>
<script>
jQuery(document).ready(function($) {
$('#wp-admin-bar-purge-cache').click(function() {
if (confirm('Are you sure you want to purge the cache?')) {
$.ajax({
url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
data: {
action: 'purge_cache',
},
success: function() {
alert('Cache purged successfully!');
},
error: function() {
alert('An error occurred while purging the cache.');
}
});
}
});
});
</script>
<?php
}
add_action( 'wp_ajax_purge_cache', 'purge_cache_callback' );
function purge_cache_callback() {
global $wp_object_cache;
if ( ! current_user_can( 'manage_options' ) ) {
wp_die();
}
wp_cache_flush();
wp_die();
}
//Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );
Explicit Fixed Width and Height
add_filter( 'the_content', 'add_image_dimensions' );
function add_image_dimensions( $content ) {
preg_match_all( '/<img[^>]+>/i', $content, $images);
if (count($images) < 1)
return $content;
foreach ($images[0] as $image) {
preg_match_all( '/(alt|title|src|width|class|id|height)=("[^"]*")/i', $image, $img );
if ( !in_array( 'src', $img[1] ) )
continue;
if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
$src = $img[2][ array_search('src', $img[1]) ];
$alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][ array_search('alt', $img[1]) ] : '';
$title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][ array_search('title', $img[1]) ] : '';
$class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][ array_search('class', $img[1]) ] : '';
$id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][ array_search('id', $img[1]) ] : '';
list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );
$image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
$content = str_replace($image, $image_tag, $content);
}
}
return $content;
}
Remove Unused JS
/**
* We will Dequeue the jQuery UI script as example.
*
* Hooked to the wp_print_scripts action, with a late priority (99),
* so that it is after the script was enqueued.
*/
function wp_remove_scripts() {
// check if user is admina
if (current_user_can( 'update_core' )) {
return;
}
else {
// Check for the page you want to target
if ( is_page( 'homepage' ) ) {
// Remove Scripts
wp_dequeue_style( 'jquery-ui-core' );
}
}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );
Ensure Webfont is loaded
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );
Remove Google Fonts
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Web Squadron Code Snippet Library:
Codes
Password protected Page Styling: https://youtu.be/q8TQU3kMci0?si=lbFIRZ9kpqtBhSBI
Add Preview Sizes, Swapping and Ratios to the Top Bar: remove PHP at top!
<?php
/* Elementor Editor Window Extras
*
* Adds custom width/height inputs, min/max toggle, swap dimensions, and an aspect ratio dropdown
* to the Elementor editor’s responsive preview toolbar.
*
* Features:
* - Width/Height Inputs: Edit preview size directly (disabled in desktop/widescreen). Drag on number to resize live.
* - Min/Max Width Toggle: Toggle breakpoints default loading to min or max width(setting saved in browser).
* - Swap Dimensions Button: Instantly swap width and height of the preview window.
* - Aspect Ratio Dropdown: Apply common aspect ratios with a single click (not persistent/locking).
*
* Installation:
* - Add to a custom plugin, theme's functions.php, or a snippet plugin like WPCodeBox.
* - For extra safety, you may wrap with:
* if (did_action('elementor/loaded')) { add_action('elementor/editor/after_enqueue_scripts', 'add_custom_script_to_elementor'); }
*
* Compatibility:
* - Elementor Free/Pro 3.6+; custom breakpoints supported.
* - No dependencies.
* - Paste as a single snippet. "Run in Admin" or "Run Everywhere".
*
* Usage:
* - Controls appear near the Notes button.
* - Edit or drag width/height, toggle min/max, swap dimensions, or pick an aspect ratio from dropdown.
*
* Debug:
* - Controls not showing? Check Elementor DOM changes, or preview wrapper (#elementor-preview-responsive-wrapper).
* - Increase setTimeout delays if UI seems laggy.
* - You may freely share, modify, or maintain this for your own or community use!
*/
// ==== DEFAULT MOBILE MINIMUM WIDTH ====
// Set default minimum width in Px for the mobile breakpoint(it can manually be made smaller in the editor)
define('ELEMENTOR_MIN_MOBILE_WIDTH', 420);
// ==============================
add_action('elementor/editor/after_enqueue_scripts', function() {
?>
<script type="text/javascript">
(() => {
const MIN_MOBILE_WIDTH = <?php echo ELEMENTOR_MIN_MOBILE_WIDTH; ?>;
const ASPECTS = [
{ label: "16:9", value: 16 / 9 },
{ label: "9:16", value: 9 / 16 },
{ label: "16:10", value: 16 / 10 },
{ label: "10:16", value: 10 / 16 },
{ label: "3:4", value: 3 / 4 },
{ label: "4:3", value: 4 / 3 },
{ label: "19.5:9", value: 19.5 / 9 },
{ label: "9:19.5", value: 9 / 19.5 },
];
let minMaxActive = localStorage.getItem('elementor-minmax-toggle') === '1';
let editing = { width: false, height: false };
function getPreviewWrapper() {
return document.getElementById('elementor-preview-responsive-wrapper');
}
function getBreakpoint() {
return document.body.className.match(/elementor-device-([^\s]+)/)?.[1] || 'tablet';
}
function getBreakpointInfo(name) {
const breakpoints = elementorFrontend?.config?.responsive?.activeBreakpoints || {
mobile: { value: 767, direction: 'max', is_enabled: true },
tablet: { value: 1024, direction: 'max', is_enabled: true },
laptop: { value: 1366, direction: 'max', is_enabled: true },
desktop: { value: 9999, direction: 'min', is_enabled: true },
widescreen: { value: 2400, direction: 'min', is_enabled: true }
};
const bps = Object.keys(breakpoints)
.filter(k => breakpoints[k].is_enabled)
.map(k => ({ name: k, value: breakpoints[k].value, direction: breakpoints[k].direction }))
.sort((a, b) => a.value - b.value);
const bp = bps.find(b => b.name === name) || { name: 'tablet', value: 1024 };
const i = bps.indexOf(bp);
let min;
if (bp.name === 'mobile') {
min = MIN_MOBILE_WIDTH;
} else {
min = bp.direction === 'max' ? (i > 0 ? (bps[i-1].name === 'mobile' ? MIN_MOBILE_WIDTH : bps[i-1].value + 1) : MIN_MOBILE_WIDTH) : bp.value;
}
const max = bp.direction === 'max' ? bp.value : (i < bps.length - 1 ? bps[i+1].value - 1 : 9999);
return { min, max };
}
// NEW: Always display live offsetWidth/offsetHeight on desktop/widescreen
function getWidth(forceLive=false) {
const w = getPreviewWrapper();
const bp = getBreakpoint();
if (!w) return 0;
if (bp === 'desktop' || bp === 'widescreen' || forceLive) return w.offsetWidth;
return parseInt(getComputedStyle(w).getPropertyValue('--e-editor-preview-width')) || w.offsetWidth || 0;
}
function getHeight(forceLive=false) {
const w = getPreviewWrapper();
const bp = getBreakpoint();
if (!w) return 0;
if (bp === 'desktop' || bp === 'widescreen' || forceLive) return w.offsetHeight;
return parseInt(getComputedStyle(w).getPropertyValue('--e-editor-preview-height')) || w.offsetHeight || 0;
}
function setWidthHeight(width, height, updateDisplays = true) {
const w = getPreviewWrapper();
if (!w) return;
w.style.setProperty('--e-editor-preview-width', width + 'px');
w.style.setProperty('--e-editor-preview-height', height + 'px');
w.style.width = '';
w.style.height = '';
w.dispatchEvent(new Event('resize'));
if (updateDisplays) updateAllDisplays();
}
function updateAllDisplays() {
const wrapper = getPreviewWrapper();
const widthSpan = document.querySelector('#width-number');
const heightSpan = document.querySelector('#height-number');
const controlWrapper = document.querySelector('.e-size-control-wrapper');
if (!wrapper || !widthSpan || !heightSpan || !controlWrapper) return;
const bp = getBreakpoint();
const isDisabled = (bp === 'desktop' || bp === 'widescreen');
// FIX: Always display live size on desktop/widescreen (never editable there)
if (!editing.width) widthSpan.textContent = getWidth(true);
if (!editing.height) heightSpan.textContent = getHeight(true);
[widthSpan, heightSpan].forEach((span, i) => {
span.contentEditable = !isDisabled;
span.style.cursor = isDisabled ? 'default' : 'text';
span.setAttribute('data-tooltip', isDisabled ? '' : `Edit ${i ? 'Height' : 'Width'}`);
});
controlWrapper.setAttribute('data-tooltip', isDisabled ? 'Disabled in Desktop Mode' : '');
updateButtonVisibility();
updateMinMaxButtonVisual();
}
function updateButtonVisibility() {
const bp = getBreakpoint();
document.querySelectorAll('.e-size-icon-button').forEach(btn => btn.style.display = 'none');
if (bp === 'desktop' || bp === 'widescreen') return;
if (bp === 'laptop') {
document.querySelector('.e-size-icon-button.minmax')?.style.setProperty('display', '');
} else {
document.querySelectorAll('.e-size-icon-button').forEach(btn => btn.style.display = '');
}
}
function updateMinMaxButtonVisual() {
const minmaxBtn = document.querySelector('.e-size-icon-button.minmax');
if (!minmaxBtn) return;
const icon = minmaxBtn.querySelector('i');
if (minMaxActive) {
minmaxBtn.classList.add('active');
icon.className = 'elementor-icon eicon-shrink';
icon.style.transition = 'transform 0.23s ease-in-out';
icon.style.transform = 'rotate(180deg)';
minmaxBtn.setAttribute('data-tooltip', 'Toggle Min Width');
} else {
minmaxBtn.classList.remove('active');
icon.className = 'elementor-icon eicon-grow';
icon.style.transition = 'transform 0.23s ease-in-out';
icon.style.transform = 'rotate(0deg)';
minmaxBtn.setAttribute('data-tooltip', 'Toggle Max Width');
}
}
function createSizeField(type) {
const container = document.createElement('div');
container.className = 'e-size-field';
container.innerHTML = `<span>${type.charAt(0).toUpperCase() + type.slice(1)}:</span>
<span id="${type}-number" contenteditable="false"></span>
<span>px</span>`;
const span = container.querySelector(`#${type}-number`);
span.onfocus = () => {
editing[type] = true;
setTimeout(() => {
const sel = window.getSelection();
const range = document.createRange();
range.selectNodeContents(span); sel.removeAllRanges(); sel.addRange(range);
}, 10);
};
span.onblur = () => {
editing[type] = false;
const value = parseInt(span.textContent, 10);
if (!isNaN(value) && value > 0) {
if (type === 'width') setWidthHeight(value, getHeight());
else setWidthHeight(getWidth(), value);
}
setTimeout(updateAllDisplays, 80);
};
span.onkeydown = e => {
if (e.key === 'Enter') { e.preventDefault(); span.blur(); }
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
let value = parseInt(span.textContent, 10) || (type === 'width' ? getWidth() : getHeight());
if (e.key === 'ArrowUp') value++;
else value = Math.max(1, value - 1);
if (type === 'width') setWidthHeight(value, getHeight());
else setWidthHeight(getWidth(), value);
span.textContent = value;
}
};
let dragStart = null, origWidth = 0, origHeight = 0;
span.addEventListener('mousedown', e => {
if (e.button !== 0 || span.isContentEditable === false) return;
dragStart = type === 'width' ? e.clientX : e.clientY;
origWidth = getWidth();
origHeight = getHeight();
document.body.style.userSelect = 'none';
const moveHandler = ev => {
let delta = (type === 'width' ? ev.clientX : ev.clientY) - dragStart;
let value = (type === 'width' ? origWidth + delta : origHeight + delta);
if (value < 1) value = 1;
if (type === 'width') setWidthHeight(value, getHeight(), false);
else setWidthHeight(getWidth(), value, false);
span.textContent = value;
};
const upHandler = () => {
document.removeEventListener('mousemove', moveHandler);
document.removeEventListener('mouseup', upHandler);
document.body.style.userSelect = '';
setTimeout(updateAllDisplays, 80);
};
document.addEventListener('mousemove', moveHandler);
document.addEventListener('mouseup', upHandler);
});
return container;
}
function createDropdown(aspectBtn) {
let dropdown = document.createElement('div');
dropdown.className = 'e-size-aspect-dropdown eui-1aoepuf';
dropdown.style.display = 'none';
ASPECTS.forEach(opt => {
const nums = opt.label.split(':').map(Number);
const isLandscape = nums[0] > nums[1];
const isMobile = opt.label === "19.5:9" || opt.label === "9:19.5";
const icon = isMobile ? 'eicon-device-mobile' : 'eicon-device-tablet';
const iconStyle = isLandscape ? 'transform:rotate(-90deg);' : '';
const btn = document.createElement('button');
btn.type = 'button';
btn.innerHTML =
`<span class="elementor-icon ${icon}" style="font-size:1.18em; margin-right:0.2em; vertical-align:-2px;${iconStyle}"></span>${opt.label}`;
btn.dataset.value = opt.value;
btn.onclick = (e) => {
e.stopPropagation();
const w = getWidth();
setWidthHeight(w, Math.round(w / Number(btn.dataset.value)));
const aspectIcon = aspectBtn.querySelector('.elementor-icon');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(0deg)';
dropdown.style.display = 'none';
aspectBtn.classList.remove('active');
setTimeout(updateAllDisplays, 50);
};
dropdown.appendChild(btn);
});
document.body.appendChild(dropdown);
function placeDropdown() {
const rect = aspectBtn.getBoundingClientRect();
dropdown.style.position = 'fixed';
dropdown.style.left = (rect.left) + 'px';
dropdown.style.top = '42px';
dropdown.style.width = '7rem';
dropdown.style.display = 'block';
dropdown.style.zIndex = 9;
}
aspectBtn.onclick = (e) => {
e.stopPropagation();
const aspectIcon = aspectBtn.querySelector('.elementor-icon');
if (dropdown.style.display === 'block') {
dropdown.style.display = 'none';
aspectBtn.classList.remove('active');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(0deg)';
} else {
placeDropdown();
aspectBtn.classList.add('active');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(180deg)';
}
};
document.addEventListener('mousedown', (ev) => {
if (!dropdown.contains(ev.target) && ev.target !== aspectBtn && dropdown.style.display === 'block') {
dropdown.style.display = 'none';
aspectBtn.classList.remove('active');
const aspectIcon = aspectBtn.querySelector('.elementor-icon');
aspectIcon.style.transition = 'transform 0.23s ease-in-out';
aspectIcon.style.transform = 'rotate(0deg)';
}
});
return dropdown;
}
function createUI() {
if (document.querySelector('.e-size-control-wrapper')) {
document.querySelector('.e-size-control-wrapper').remove();
}
const wrapper = document.createElement('span');
wrapper.className = 'MuiBox-root eui-0 e-size-control-wrapper';
wrapper.appendChild(createSizeField('width'));
wrapper.appendChild(createSizeField('height'));
// Min/Max toggle
const toggleBtn = document.createElement('span');
toggleBtn.className = 'e-size-icon-button minmax';
toggleBtn.setAttribute('data-tooltip', 'Toggle Max Width');
toggleBtn.innerHTML = '<i class="elementor-icon eicon-grow" style="transform: rotate(0deg);"></i>';
toggleBtn.onclick = () => {
minMaxActive = !minMaxActive;
localStorage.setItem('elementor-minmax-toggle', minMaxActive ? '1' : '0');
const bp = getBreakpoint();
const { min, max } = getBreakpointInfo(bp);
if (minMaxActive) {
setWidthHeight(max, getHeight());
} else {
setWidthHeight(min, getHeight());
}
updateMinMaxButtonVisual();
};
// Swap dimensions
const rotateBtn = document.createElement('span');
rotateBtn.className = 'e-size-icon-button orientation';
rotateBtn.setAttribute('data-tooltip', 'Swap Dimensions');
rotateBtn.innerHTML = '<i class="elementor-icon eicon-redo" style="transform: rotate(90deg) scaleX(1); transition:transform 0.23s ease-in-out;"></i>';
rotateBtn.onclick = () => {
const width = getWidth();
const height = getHeight();
setWidthHeight(height, width);
const icon = rotateBtn.querySelector('i');
const isMirrored = icon.style.transform.includes('scaleX(-1)');
if (!isMirrored) icon.style.transform = 'rotate(-90deg) scaleX(-1)';
else icon.style.transform = 'rotate(90deg) scaleX(1)';
};
// Aspect ratio dropdown
const aspectBtn = document.createElement('span');
aspectBtn.className = 'e-size-icon-button aspect e-size-breakpoint-show';
aspectBtn.setAttribute('data-tooltip', 'Aspect Ratios');
aspectBtn.innerHTML = '<i class="elementor-icon eicon-frame-expand"></i>';
aspectBtn.style.fontSize = '1rem';
wrapper.appendChild(toggleBtn);
wrapper.appendChild(rotateBtn);
wrapper.appendChild(aspectBtn);
// Place after Notes button in Elementor top bar
const stackRoot = document.querySelector('.MuiStack-root.eui-1g5sxhh');
const noteBox = stackRoot?.querySelector('button[aria-label="Notes"]')?.closest('.MuiBox-root');
if (noteBox) noteBox.after(wrapper);
createDropdown(aspectBtn);
}
// --- Observe for breakpoint changes and preview resizing ---
function forceMobileMinWidth() {
const bp = getBreakpoint();
if (bp === 'mobile') {
const { min } = getBreakpointInfo(bp);
// If width isn't already set to our custom min, force it
if (getWidth(true) !== MIN_MOBILE_WIDTH) {
setWidthHeight(MIN_MOBILE_WIDTH, getHeight(true));
}
}
}
function observeBreakpointAndWindowResize() {
let lastBreakpoint = getBreakpoint();
const observer = new MutationObserver(() => {
const bp = getBreakpoint();
if (bp !== lastBreakpoint) {
lastBreakpoint = bp;
const { min, max } = getBreakpointInfo(bp);
if (minMaxActive) {
// Set width to MAX before Elementor can set min width (delay as little as possible)
requestAnimationFrame(() => setWidthHeight(max, getHeight(true)));
} else {
setTimeout(forceMobileMinWidth, 0);
}
setTimeout(updateAllDisplays, 50);
}
});
observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
const wrapper = getPreviewWrapper();
if (wrapper) {
let prevWidth = wrapper.offsetWidth, prevHeight = wrapper.offsetHeight;
new ResizeObserver(() => {
if (
(!editing.width && wrapper.offsetWidth !== prevWidth) ||
(!editing.height && wrapper.offsetHeight !== prevHeight)
) {
prevWidth = wrapper.offsetWidth;
prevHeight = wrapper.offsetHeight;
setTimeout(updateAllDisplays, 50);
}
}).observe(wrapper);
}
window.addEventListener('resize', () => {
setTimeout(updateAllDisplays, 60);
}, { passive: true });
}
document.addEventListener('DOMContentLoaded', () => {
createUI();
updateAllDisplays();
observeBreakpointAndWindowResize();
// Force min width on page load if mobile
setTimeout(forceMobileMinWidth, 25); // Short delay to allow Elementor to render first
});
})();
</script>
<style>
.e-size-icon-button {
display: flex;
align-items: center;
justify-content: center;
color: white;
width: 32px;
height: 32px;
font-size: 1.125rem;
border-radius: 4px;
background: transparent;
cursor: pointer;
position: relative;
transition: background .16s;
}
.e-size-icon-button.orientation { font-size: 1rem; }
.e-size-icon-button.aspect { font-size: 1rem !important; }
body.elementor-device-widescreen .e-size-icon-button.orientation,
body.elementor-device-desktop .e-size-icon-button.orientation,
body.elementor-device-laptop .e-size-icon-button.orientation,
body.elementor-device-widescreen .e-size-icon-button.aspect,
body.elementor-device-desktop .e-size-icon-button.aspect,
body.elementor-device-laptop .e-size-icon-button.aspect { display: none !important; }
body.elementor-device-widescreen .e-size-icon-button.minmax,
body.elementor-device-desktop .e-size-icon-button.minmax { display: none !important; }
.e-size-icon-button.aspect.active { background: #303236; }
.e-size-icon-button.aspect.active:hover { background: #36383c; }
.e-size-icon-button:hover { background: rgba(255,255,255,0.08);}
.e-size-icon-button .elementor-icon { transition: transform 0.23s ease-in-out; }
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""])::after {
content: attr(data-tooltip);
position: absolute;
background: #3F434C;
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4.5px 8px;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
white-space: nowrap;
transition: opacity 0.2s ease;
z-index: 10000;
pointer-events: none;
}
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""])::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 12px solid transparent;
border-bottom-color: #3F434C;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 9999;
pointer-events: none;
}
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""]):hover::after,
.e-size-control-wrapper [data-tooltip]:not([data-tooltip=""]):hover::before {
opacity: 1;
}
.e-size-icon-button[data-tooltip]::before { top: 29px; }
.e-size-icon-button[data-tooltip]::after { top: 48px; }
.e-size-field span[data-tooltip]::before { top: 20px; }
.e-size-field span[data-tooltip]::after { top: 38px; }
.e-size-control-wrapper[data-tooltip]::before { top: 37px; }
.e-size-control-wrapper[data-tooltip]::after { top: 55px; }
.e-size-icon-button.aspect.active[data-tooltip]::after,
.e-size-icon-button.aspect.active[data-tooltip]::before {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
.MuiBox-root.eui-0.e-size-control-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
gap: 0.5rem;
position: relative;
}
.e-size-field { display: inline-flex; align-items: center;}
.e-size-field span:not([contenteditable]) { user-select: none;}
.e-size-field span[contenteditable] {
outline: none;
display: flex;
user-select: text;
cursor: text;
text-align: right;
padding: 0 0.125rem;
font-family: inherit;
position: relative;
}
#width-number { justify-content: flex-end; }
/* Aspect dropdown menu styling (matches Elementor panel menus) */
.e-size-aspect-dropdown.eui-1aoepuf {
background-color: rgb(12, 13, 14);
color: rgb(255, 255, 255);
box-shadow: rgba(0,0,0,0.2) 0px 3px 5px -1px, rgba(0,0,0,0.14) 0px 6px 10px 0px, rgba(0,0,0,0.12) 0px 1px 18px 0px;
background-image: linear-gradient(rgba(255,255,255,0.11), rgba(255,255,255,0.11));
position: absolute;
overflow-y: auto;
overflow-x: hidden;
min-height: 16px;
max-width: calc(100% - 32px);
max-height: calc(100% - 96px);
margin-top: 12px;
transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1);
border-radius: 4px;
outline: 0;
padding: 7px 0 7px 0;
font-size: 14px;
z-index: 9;
width: 7rem;
top: 42px !important;
}
.e-size-aspect-dropdown button {
background: none;
color: #fff;
width: 100%;
border: none;
padding: 10px 20px;
text-align: left;
font: inherit;
font-size: 15px;
cursor: pointer;
border-radius: 0;
margin: 0;
display: flex;
align-items: center;
gap: 0.18em;
transition: background 0.15s;
}
.e-size-aspect-dropdown button:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.e-size-aspect-dropdown .eicon-device-tablet,
.e-size-aspect-dropdown .eicon-device-mobile {
font-size: 1.18em;
margin-right: 0.15em;
opacity: 0.87;
transition: transform 0.18s;
min-width: 1.1em;
text-align: center;
display: inline-block;
}
</style>
<?php
});
Elementor Pro Form Checkboxes
selector .elementor-field-option {
display: inline-block;
vertical-align: middle;
gap:10px;
accent-color: #21282F;
font-size: 17px
}
input {
display: inline-block;
vertical-align: middle;
width: 17px;
height: 17px;
}