Elementor Website Course Logo

WordPress Page Speed

WordPress Page Speed Optimization Elementor Websites

This is how to Boost WordPress Page Speed Optimisation WordPress for FREE. 

Use the Code Snippets below, and ensure you use the correct snippet depending on if you’re using an Elementor or a Non-Elementor WordPress site.

Hover over the Snippet and then click the ‘Copy’ Button.

We recommend backups before applying in case your site has any problems (that could be due to other codes, plugins, or the set up).

Sign up for our Learn to Build an Elementor Website Course.

Remove Google Fonts (Elementor Site) for Elementor Optimization

				
					add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
				
			

Reduce Revisions to 3 to improve WordPress Optimization.

				
					define('WP_POST_REVISIONS', 3);
				
			

Ensure Webfont is Loaded (Elementor Site)

				
					add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );
				
			

Stop Lazy Load

				
					add_filter( 'wp_lazy_loading_enabled', '__return_false' );
				
			

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 admin
 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 );
				
			

Explicit Fixed Width and Height when you have Elementor Carousels and want to apply Elementor Optimization.

				
					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;
        }

        // Check if the image has the excluded classes
        if ( in_array( 'class', $img[1] ) ) {
            $classes = $img[2][ array_search( 'class', $img[1] ) ];
            if ( preg_match( '/\b(elementor-widget-image-carousel|swiper|swiper-container)\b/i', $classes ) ) {
                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;
}
				
			

Add Purge Site to Admin Bar

				
					/*
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();
}

				
			

Removed Unused CSS (Elementor Only) but can be ignored if you are using PhastPress for WordPress Optimization.

				
					function exclude_specific_css_files($src, $handle) {
    // List of CSS file URLs to exclude from minification
    $excluded_css_files = array(
        '/wp-content/plugins/elementor/assets/css/frontend-lite.min.css',
        '/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css',
    );

    // Check if the current CSS file URL matches any of the excluded URLs
    foreach ($excluded_css_files as $excluded_css_file) {
        if (strpos($src, $excluded_css_file) !== false) {
            return $src; // Return the original unminified CSS file
        }
    }

    // If the CSS file is not in the excluded list, proceed with minification
    return minify_css_content($src);
}

function minify_css_content($content) {
    $content = preg_replace('/\s+/', ' ', $content); // Remove extra whitespaces
    $content = str_replace(array("\r\n", "\r", "\n", "\t"), '', $content); // Remove newlines and tabs

    return $content;
}

add_filter('style_loader_src', 'exclude_specific_css_files', 10, 2);

				
			

Remove Google Fonts (Non-Elementor Site) to boost WordPress Page Speed Optimization

				
					function disable_google_fonts() {
	return false;
}
add_filter( 'print_google_fonts', 'disable_google_fonts' );
				
			

Ensure Webfont is Loaded (Non-Elementor Site)

				
					function custom_font_display( $current_value, $font_family, $data ) {
	return 'swap';
}
add_filter( 'font_display', 'custom_font_display', 10, 3 );
				
			

Stop Lazy Load for a specific image

Place your Media Library into List View and not Gallery, and then get the ID for the chosen image. Then copy and paste that 3 times over the example code below (10576)

				
					/* Disable lazy loading for single image* */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 10576, 'large' ); 
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10576, 10576 );
				
			

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;
}
				
			

Convert Images to WebP when added to the Media Library to reduce large images loading on your page and to improve WordPress Page Speed Optimization.

				
					/**
 * Convert Uploaded Images to WebP Format
 *
 * This snippet converts uploaded images (JPEG, PNG, GIF) to WebP format
 * automatically in WordPress. Ideal for use in a theme's functions.php file,
 * or with plugins like Code Snippets or WPCodeBox.
 * 
 * @package    WordPress_Custom_Functions
 * @author     Mark Harris
 * @link       www.christchurchwebsolutions.co.uk
 *
 * Usage Instructions:
 * - Add this snippet to your theme's functions.php file, or add it as a new
 *   snippet in Code Snippets or WPCodeBox.
 * - The snippet hooks into WordPress's image upload process and converts
 *   uploaded images to the WebP format.
 *
 * Optional Configuration:
 * - By default, the original image file is deleted after conversion to WebP.
 *   If you prefer to keep the original image file, simply comment out or remove
 *   the line '@unlink( $file_path );' in the wpturbo_handle_upload_convert_to_webp function.
 *   This will preserve the original uploaded image file alongside the WebP version.
 */

add_filter( 'wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp' );

function wpturbo_handle_upload_convert_to_webp( $upload ) {
    if ( $upload['type'] == 'image/jpeg' || $upload['type'] == 'image/png' || $upload['type'] == 'image/gif' ) {
        $file_path = $upload['file'];

        // Check if ImageMagick or GD is available
        if ( extension_loaded( 'imagick' ) || extension_loaded( 'gd' ) ) {
            $image_editor = wp_get_image_editor( $file_path );
            if ( ! is_wp_error( $image_editor ) ) {
                $file_info = pathinfo( $file_path );
                $dirname   = $file_info['dirname'];
                $filename  = $file_info['filename'];

                // Create a new file path for the WebP image
                $new_file_path = $dirname . '/' . $filename . '.webp';

                // Attempt to save the image in WebP format
                $saved_image = $image_editor->save( $new_file_path, 'image/webp' );
                if ( ! is_wp_error( $saved_image ) && file_exists( $saved_image['path'] ) ) {
                    // Success: replace the uploaded image with the WebP image
                    $upload['file'] = $saved_image['path'];
                    $upload['url']  = str_replace( basename( $upload['url'] ), basename( $saved_image['path'] ), $upload['url'] );
                    $upload['type'] = 'image/webp';

                    // Optionally remove the original image
                    @unlink( $file_path );
                }
            }
        }
    }

    return $upload;
}
				
			

The Settings Pack - Code Snippets

Last Updated Wednesday 17th July 2024

Code Snippets Bundle

The Bundle contains 22 Snippets that improve Performance of your website, and add Admin Controls. You can import them all in one go rather than copying and pasting individually.

You will need the Free Code Snippets Plugin.

Before adding New Snippets

  1. Always take a Backup
  2. Preferably Export a Full Backup
  3. Test on a Staging Site.
 

Click to download the Bundle OR Scroll down to see each individual snippet and add individually.

1) Unzip the File.

2) Go to WordPress Dashboard > Snippets > Import

3) The snippets will be added in ‘Deactivated’ form so you can manually activate them depending on your choice.

Go to Upload Files, and choose the unzipped file: elementor.code-snippets.json

Click the ‘Upload files and import’

If you are adding the Bundle again after it’s been updated with new snippets, then select the 3rd option to not import any duplicate snippets.

Then go to All Snippets and decide on which Snippets to Activate.

Activate and check one at a time.

				
					add_action( 'init', 'add_categories_to_pages' );
 /*
  * Add CATEGORIES to pages
  */
function add_categories_to_pages() {
  
  register_taxonomy_for_object_type( 'category', 'page' );
  
}
				
			
				
					// Add the Contrast Checker Menu
add_action('admin_menu', 'contrast_checker_menu');
add_action('admin_init', 'contrast_checker_settings');

function contrast_checker_menu() {
    add_options_page('Contrast Checker', 'Contrast Checker', 'manage_options', 'contrast-checker', 'contrast_checker_page');
}

function contrast_checker_settings() {
    add_settings_section('contrast_checker_section', 'Contrast Checker Settings', null, 'contrast-checker');

    add_settings_field('background_color', 'Background Color', 'background_color_callback', 'contrast-checker', 'contrast_checker_section');
    add_settings_field('text_color', 'Foreground Color', 'foreground_color_callback', 'contrast-checker', 'contrast_checker_section');

    register_setting('contrast_checker_group', 'background_color');
    register_setting('contrast_checker_group', 'text_color');
}

function background_color_callback() {
    $background_color = get_option('background_color', '#FFFFFF');
    echo '<div style="display: flex; align-items: center;"><input type="text" id="background_color" name="background_color" value="' . esc_attr($background_color) . '" class="my-color-field" style="font-size: 15px !important;" />';
    echo '<span id="background_color_hex" style="margin-left: 10px; font-size: 15px;">' . esc_attr($background_color) . '</span></div>';
}

function foreground_color_callback() {
    $foreground_color = get_option('text_color', '#000000');
    echo '<div style="display: flex; align-items: center;"><input type="text" id="text_color" name="text_color" value="' . esc_attr($foreground_color) . '" class="my-color-field" style="font-size: 15px !important;" />';
    echo '<span id="text_color_hex" style="margin-left: 10px; font-size: 15px;">' . esc_attr($foreground_color) . '</span></div>';
}

function contrast_checker_page() {
    ?>
    <div class="wrap" style="font-size: 15px; line-height: 1.2em; background-color: #ffffff; padding: 20px; border-radius: 5px;">
        <h1 style="font-size: 20px; line-height: 1.2em;">Contrast Checker</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('contrast_checker_group');
            do_settings_sections('contrast-checker');
            submit_button('Save Colors', 'primary', 'submit', true, array('style' => 'background-color: #000; font-size: 16px; font-weight: 600;'));
            ?>
        </form>
        <div id="contrast-result" style="margin-top: 20px;"></div>
        <div style="margin-top: 20px; font-size: 15px; line-height: 1.2em;">
            <h2 style="font-size: 15px; line-height: 1.2em;">What is AA?</h2>
            <p style="font-size: 15px; line-height: 1.2em;">AA compliance refers to the Web Content Accessibility Guidelines (WCAG) 2.1, which require a contrast ratio of at least 4.5:1 for normal text (minimum 16px) and 3:1 for large text (minimum 24px or 19px bold). This ensures that content is readable and accessible for individuals with moderate visual impairments.</p>
            <h2 style="font-size: 15px; line-height: 1.2em;">What is AAA?</h2>
            <p style="font-size: 15px; line-height: 1.2em;">AAA compliance is the highest level of conformance in WCAG 2.1. It requires a contrast ratio of at least 7:1 for normal text (minimum 16px) and 4.5:1 for large text (minimum 24px or 19px bold). Achieving AAA compliance ensures that content is accessible to the widest range of users, including those with significant visual impairments.</p>
        </div>
    </div>
    <style>
        .my-color-field {
            font-size: 15px !important;
        }
        .contrast-pass-yes {
            color: #007E33; font-weight: 600;
        }
        .contrast-pass-no {
            color: #E60000; font-weight: 600;
        }
    </style>
    <?php
}

// Enqueue the color picker script and add inline script
add_action('admin_enqueue_scripts', 'contrast_checker_enqueue_scripts');
function contrast_checker_enqueue_scripts($hook_suffix) {
    if ($hook_suffix != 'settings_page_contrast-checker') {
        return;
    }
    wp_enqueue_style('wp-color-picker');
    wp_enqueue_script('wp-color-picker');
    wp_add_inline_script('wp-color-picker', '
        jQuery(document).ready(function($) {
            function updateContrast() {
                var bgColor = $("#background_color").val();
                var txtColor = $("#text_color").val();

                $.ajax({
                    url: ajaxurl,
                    type: "POST",
                    data: {
                        action: "check_contrast",
                        bg_color: bgColor,
                        txt_color: txtColor
                    },
                    success: function(response) {
                        if (response.success) {
                            $("#contrast-result").html(response.data);
                        }
                    }
                });
            }

            $(".my-color-field").wpColorPicker({
                defaultColor: {
                    background_color: "#FFFFFF",
                    text_color: "#000000"
                },
                change: function(event, ui) {
                    var color = ui.color.toString();
                    if (event.target.id === "background_color") {
                        $("#background_color_hex").text(color);
                    } else if (event.target.id === "text_color") {
                        $("#text_color_hex").text(color);
                    }
                    updateContrast();
                }
            });

            // Initial contrast check
            updateContrast();
        });
    ');
}

// AJAX handler for checking contrast
add_action('wp_ajax_check_contrast', 'ajax_check_contrast');
function ajax_check_contrast() {
    $bg_color = sanitize_hex_color($_POST['bg_color']);
    $txt_color = sanitize_hex_color($_POST['txt_color']);
    $result = check_contrast($bg_color, $txt_color);
    wp_send_json_success($result);
}

function check_contrast($bg_hex, $txt_hex) {
    $bg_rgb = hex_to_rgb($bg_hex);
    $txt_rgb = hex_to_rgb($txt_hex);

    $bg_luminance = luminance($bg_rgb);
    $txt_luminance = luminance($txt_rgb);

    $contrast_ratio = contrast_ratio($bg_luminance, $txt_luminance);
    $aa_pass = ($contrast_ratio >= 4.5) ? '<span class="contrast-pass-yes">Yes</span>' : '<span class="contrast-pass-no">No</span>';
    $aaa_pass = ($contrast_ratio >= 7) ? '<span class="contrast-pass-yes">Yes</span>' : '<span class="contrast-pass-no">No</span>';

    $suggested_aa = adjust_foreground_color($bg_rgb, $txt_rgb, 4.5);
    $suggested_aaa = adjust_foreground_color($bg_rgb, $txt_rgb, 7);

    return '
        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
            <div style="background-color: ' . esc_attr($bg_hex) . '; width: 20px; height: 20px; border: 1px solid #000;"></div>
            <div style="background-color: ' . esc_attr($txt_hex) . '; width: 20px; height: 20px; border: 1px solid #000;"></div>
        </div>
        <div style="font-size: 15px; line-height: 1.2em;">
            <div style="margin-bottom: 5px;"><strong>Contrast Ratio:</strong> ' . round($contrast_ratio, 2) . '</div>
            <div style="margin-bottom: 5px;"><strong>AA Compliant:</strong> ' . $aa_pass . '</div>
            <div style="margin-bottom: 5px;"><strong>AAA Compliant:</strong> ' . $aaa_pass . '</div>
        </div>
        <div style="margin-top: 20px; font-size: 15px; line-height: 1.2em;">
            <div style="margin-bottom: 20px;">
                <strong>Suggested Foreground Color for AA:</strong>
                <span style="background-color: ' . $suggested_aa . '; width: 20px; height: 20px; display: inline-block; border: 1px solid #000;"></span> ' . $suggested_aa . '
            </div>
            <div>
                <strong>Suggested Foreground Color for AAA:</strong>
                <span style="background-color: ' . $suggested_aaa . '; width: 20px; height: 20px; display: inline-block; border: 1px solid #000;"></span> ' . $suggested_aaa . '
            </div>
        </div>';
}

function hex_to_rgb($hex) {
    $hex = ltrim($hex, '#');
    $r = hexdec(substr($hex, 0, 2)) / 255;
    $g = hexdec(substr($hex, 2, 2)) / 255;
    $b = hexdec(substr($hex, 4, 2)) / 255;
    return array($r, $g, $b);
}

function rgb_to_hex($rgb) {
    return sprintf("#%02x%02x%02x", round($rgb[0] * 255), round($rgb[1] * 255), round($rgb[2] * 255));
}

function luminance($rgb) {
    list($r, $g, $b) = $rgb;
    $r = ($r <= 0.03928) ? $r / 12.92 : pow(($r + 0.055) / 1.055, 2.4);
    $g = ($g <= 0.03928) ? $g / 12.92 : pow(($g + 0.055) / 1.055, 2.4);
    $b = ($b <= 0.03928) ? $b / 12.92 : pow(($b + 0.055) / 1.055, 2.4);
    return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
}

function contrast_ratio($l1, $l2) {
    $lighter = max($l1, $l2);
    $darker = min($l1, $l2);
    return ($lighter + 0.05) / ($darker + 0.05);
}

function adjust_foreground_color($bg_rgb, $txt_rgb, $target_ratio) {
    $bg_luminance = luminance($bg_rgb);
    $step = 0.02; // Adjust step value for precision and performance

    // Incrementally adjust the RGB values to find a compliant color
    for ($i = 0; $i <= 1; $i += $step) {
        $test_rgb = adjust_rgb_lightness($txt_rgb, $i);
        $test_luminance = luminance($test_rgb);
        if (contrast_ratio($test_luminance, $bg_luminance) >= $target_ratio) {
            return rgb_to_hex($test_rgb);
        }

        $test_rgb = adjust_rgb_lightness($txt_rgb, -$i);
        $test_luminance = luminance($test_rgb);
        if (contrast_ratio($test_luminance, $bg_luminance) >= $target_ratio) {
            return rgb_to_hex($test_rgb);
        }
    }

    return "#000000"; // fallback to black if no suitable color found
}

function adjust_rgb_lightness($rgb, $adjustment) {
    return array(
        min(1, max(0, $rgb[0] + $adjustment)),
        min(1, max(0, $rgb[1] + $adjustment)),
        min(1, max(0, $rgb[2] + $adjustment))
    );
}

				
			
				
					// Disable user registration
add_filter('pre_option_users_can_register', '__return_zero');

				
			
				
					/**
 * Duplicate WordPress Posts, Pages, and Custom Post Types as Drafts
 *
 * This code snippet enables the duplication of WordPress posts, pages, and all registered custom post types (CPTs).
 * It adds a 'Duplicate' link to the row actions for each item in the admin dashboard. When clicked, this link
 * triggers the duplication of the selected item, creating a new draft with the same content, custom fields,
 * and taxonomies.
 *
 * Functions:
 * 1. `duplicate_post_as_draft`: Handles the duplication process. It copies the post data, including title,
 *    content, excerpt, and custom fields, and creates a new post with a 'draft' status. It also maintains
 *    the taxonomy terms (like categories and tags) from the original post.
 * 2. `duplicate_post_link`: Adds the 'Duplicate' action link to the WordPress admin interface for each post,
 *    page, and custom post type. This link uses WordPress's built-in nonce functionality for security.
 * 3. `apply_duplicate_post_link_to_cpts`: Dynamically applies the duplicate post link function to all public
 *    post types, ensuring the 'Duplicate' link appears for any custom post types registered on the site.
 *
 * Author: Mark Harris
 * URI: https://www.christchurchwebsolutions.co.uk
 */

function duplicate_post_as_draft() {
    global $wpdb;

    // Verify the nonce for security
    $nonce_action = 'duplicate_post_as_draft';
    $nonce_name = 'duplicate_nonce';
    if (!isset($_GET[$nonce_name]) || !wp_verify_nonce($_GET[$nonce_name], $nonce_action)) {
        wp_die(esc_html__('Security check failed.', 'wpturbo'));
    }

    // Check if the 'post' parameter is set in either GET or POST request
    $post_id = filter_input(INPUT_GET, 'post', FILTER_SANITIZE_NUMBER_INT) ?: filter_input(INPUT_POST, 'post', FILTER_SANITIZE_NUMBER_INT);

    if (!$post_id) {
        wp_die(esc_html__('No post to duplicate has been supplied!', 'wpturbo'));
    }

    // Check if the post exists
    $post = get_post($post_id);
    if (!$post) {
        wp_die(esc_html(sprintf(__('Post creation failed, could not find original post: %s', 'wpturbo'), $post_id)));
    }

    $current_user = wp_get_current_user();
    $new_post_author = $current_user->ID;

    $args = [
        "comment_status" => $post->comment_status,
        "ping_status" => $post->ping_status,
        "post_author" => $new_post_author,
        "post_content" => $post->post_content,
        "post_excerpt" => $post->post_excerpt,
        "post_name" => $post->post_name,
        "post_parent" => $post->post_parent,
        "post_password" => $post->post_password,
        "post_status" => "draft",
        "post_title" => $post->post_title . " (Copy)",
        "post_type" => $post->post_type,
        "to_ping" => $post->to_ping,
        "menu_order" => $post->menu_order
    ];

    $new_post_id = wp_insert_post($args);

    $taxonomies = get_object_taxonomies($post->post_type);
    foreach ($taxonomies as $taxonomy) {
        $post_terms = wp_get_object_terms($post_id, $taxonomy, ["fields" => "slugs"]);
        wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
    }

    $post_meta_infos = $wpdb->get_results(
        $wpdb->prepare("SELECT meta_key, meta_value FROM $wpdb->postmeta WHERE post_id = %d", $post_id)
    );
    if (count($post_meta_infos) != 0) {
        foreach ($post_meta_infos as $meta_info) {
            $meta_key = $meta_info->meta_key;
            $meta_value = sanitize_meta($meta_info->meta_key, $meta_info->meta_value, "post");
            $wpdb->insert($wpdb->postmeta, [
                "post_id" => $new_post_id,
                "meta_key" => $meta_key,
                "meta_value" => $meta_value
            ]);
        }
    }

    // Redirect to the post list screen and show a success message
    $redirect_url = admin_url("edit.php?post_type=" . $post->post_type);
    wp_redirect(add_query_arg("message", "101", $redirect_url));
    exit();
}

add_action("admin_action_duplicate_post_as_draft", "duplicate_post_as_draft");

function duplicate_post_link($actions, $post) {
    if (current_user_can('edit_posts')) {
        $actions['duplicate'] = '<a href="' . 
            wp_nonce_url(
                admin_url("admin.php?action=duplicate_post_as_draft&post=" . $post->ID), 
                'duplicate_post_as_draft', 
                'duplicate_nonce'
            ) . 
            '" title="' . esc_attr__('Duplicate this item', 'wpturbo') . 
            '" rel="permalink">' . esc_html__('Duplicate', 'wpturbo') . '</a>';
    }
    return $actions;
}

add_filter("post_row_actions", "duplicate_post_link", 10, 2);
add_filter("page_row_actions", "duplicate_post_link", 10, 2);

function apply_duplicate_post_link_to_cpts() {
    $post_types = get_post_types(["public" => true], "names");
    foreach ($post_types as $post_type) {
        add_filter("{$post_type}_row_actions", "duplicate_post_link", 10, 2);
    }
}

add_action("admin_init", "apply_duplicate_post_link_to_cpts");

function show_duplicate_admin_notice() {
    if (isset($_GET['message']) && $_GET['message'] === '101') {
        echo '<div class="notice notice-success is-dismissible"><p>' . esc_html('Post duplicated successfully.') . '</p></div>';
    }
}

add_action('admin_notices', 'show_duplicate_admin_notice');
				
			
				
					// Function to add the calculator to the admin menu
function ft_calculator_admin_menu()
{
    add_menu_page(
        "Fluid Typography Calculator", // Page title
        "Clamp Calculator", // Menu title
        "manage_options", // Capability
        "fluid-typography-calculator", // Menu slug
        "ft_calculator_page" // Function that displays the page content
    );
}

add_action("admin_menu", "ft_calculator_admin_menu");

// Function that generates the calculator page
function ft_calculator_page() {
    // Initialize the $useRem variable at the start of the function
    $useRem = false;

    echo '<div class="wrap"><h1>Fluid Typography Calculator</h1>';

    // Basic styles for the form and output
    echo '<style>
            .ft-form input[type="number"] {
                width: 100px;
                padding: 8px;
                margin: 4px 0;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            .ft-form label {
                font-weight: bold;
            }
            .ft-form div {
                margin-bottom: 10px;
            }
			.ft-form textarea {
				width: 100%;  // Adjust this to your preference
				height: 150px; // Or any height that suits your layout
				padding: 8px;
				border: 1px solid #ccc;
				border-radius: 4px;
				margin-top: 10px;
			}
			
			#cssOutput, #cssVariablesOutput {
				width: 50%; // Makes the textarea take up the full width of its container
				max-width: 50%; // You can adjust this as needed
				min-width: 300px; // Ensures a minimum width
				padding: 8px;
				border: 1px solid #ccc;
				border-radius: 4px;
				margin-top: 10px;
			}

            .ft-form button {
                background-color: #4CAF50;
                color: white;
                padding: 10px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            .ft-form button:hover {
                background-color: #45a049;
            }
            .grid-container {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 10px;
            }
          </style>';

// Initialize variables
    $rootFontSize = isset($_POST["rootFontSize"]) ? $_POST["rootFontSize"] : 16;
    $defaultValues = [
        "h1" => [
            "MinWidth" => 380,
            "MinFontSize" => 29,
            "MaxWidth" => 1600,
            "MaxFontSize" => 68,
        ],
        "h2" => [
            "MinWidth" => 380,
            "MinFontSize" => 24,
            "MaxWidth" => 1600,
            "MaxFontSize" => 51,
        ],
        "h3" => [
            "MinWidth" => 380,
            "MinFontSize" => 20,
            "MaxWidth" => 1600,
            "MaxFontSize" => 38,
        ],
        "h4" => [
            "MinWidth" => 380,
            "MinFontSize" => 17,
            "MaxWidth" => 1600,
            "MaxFontSize" => 29,
        ],
        "h5" => [
            "MinWidth" => 380,
            "MinFontSize" => 14,
            "MaxWidth" => 1600,
            "MaxFontSize" => 22,
        ],
        "h6" => [
            "MinWidth" => 380,
            "MinFontSize" => 12,
            "MaxWidth" => 1600,
            "MaxFontSize" => 16,
        ],
        "body" => [
            "MinWidth" => 380,
            "MinFontSize" => 16,
            "MaxWidth" => 1600,
            "MaxFontSize" => 24,
        ],
        "p" => [
            "MinWidth" => 380,
            "MinFontSize" => 16,
            "MaxWidth" => 1600,
            "MaxFontSize" => 24,
        ],
    ];

    $cssOutput = ""; // Initialize traditional CSS output string
    $cssVariablesOutput = ""; // Initialize CSS variables output string

    // Check if form is submitted
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $useRem = isset($_POST["unitToggle"]) && $_POST["unitToggle"] === 'on';
        // Security check using nonce
        if (!isset($_POST["ft_calculator_nonce_field"]) || !wp_verify_nonce($_POST["ft_calculator_nonce_field"], "ft_calculator_action")) {
            echo "<p>Security check failed. Please try again.</p>";
            return;
        }

foreach (["h1", "h2", "h3", "h4", "h5", "h6", "body", "p"] as $tag) {
            $minWidth = $_POST[$tag . "MinWidth"]; // In pixels
            $minFontSizePx = $_POST[$tag . "MinFontSize"]; // In pixels or REM based on $useRem
            $maxWidth = $_POST[$tag . "MaxWidth"]; // In pixels
            $maxFontSizePx = $_POST[$tag . "MaxFontSize"]; // In pixels or REM based on $useRem

            // Handle unit conversion
            if ($useRem) {
                // Convert REM to Pixels for internal calculation
                $minFontSizePx *= $rootFontSize;
                $maxFontSizePx *= $rootFontSize;
            }

            // Convert pixel values to REM for CSS generation
            $minFontSize = $minFontSizePx / $rootFontSize; // In rem
            $maxFontSize = $maxFontSizePx / $rootFontSize; // In rem

            // Convert widths from px to vw (assuming 1rem = rootFontSize px)
            $minWidthVW = $minWidth / $rootFontSize; // In vw
            $maxWidthVW = $maxWidth / $rootFontSize; // In vw

            // Calculate the CSS
            $vwUnit =
                (($maxFontSize - $minFontSize) / ($maxWidthVW - $minWidthVW)) *
                100;
            $constant = $minFontSize - ($vwUnit * $minWidthVW) / 100;

            // Format to a maximum of 5 decimal places
            $vwUnitFormatted = number_format($vwUnit, 5, ".", "");
            $constantFormatted = number_format($constant, 5, ".", "");

            // Add to traditional CSS output
            $cssOutput .=
                "{$tag} {font-size: clamp(" .
                $minFontSize .
                "rem, " .
                $constantFormatted .
                "rem + " .
                $vwUnitFormatted .
                "vw, " .
                $maxFontSize .
                "rem);}\n";

            // Add to CSS variables output
            $cssVariablesOutput .=
                "  --{$tag}-font-size: clamp(" .
                $minFontSize .
                "rem, " .
                $constantFormatted .
                "rem + " .
                $vwUnitFormatted .
                "vw, " .
                $maxFontSize .
                "rem);\n";
        }

        // Wrap CSS variables in a :root selector
        $cssVariablesOutput = ":root {\n" . $cssVariablesOutput . "}\n";
    }

// Display the form
echo '<form class="ft-form" method="post">';
wp_nonce_field("ft_calculator_action", "ft_calculator_nonce_field");

echo '<div>
        <label for="rootFontSize">Root HTML Font Size (px):</label>
        <input type="number" id="rootFontSize" name="rootFontSize" required value="' . htmlspecialchars($rootFontSize) . '">
      </div>
      <div>
        <label for="unitToggle">Use REM Units for Font Size:</label>
        <input type="checkbox" id="unitToggle" name="unitToggle" ' . ($useRem ? 'checked' : '') . ' onchange="toggleUnits()">
      </div>';

echo '<div class="grid-container">
        <div><strong>Tag</strong></div>
        <div><strong>Min Width (px)</strong></div>
        <div><strong>Min Font Size (' . ($useRem ? 'rem' : 'px') . ')</strong></div>
        <div><strong>Max Width (px)</strong></div>
        <div><strong>Max Font Size (' . ($useRem ? 'rem' : 'px') . ')</strong></div>';

// Display input fields for each tag
foreach (["h1", "h2", "h3", "h4", "h5", "h6", "body", "p"] as $tag) {
    $minWidthValue = isset($_POST[$tag . "MinWidth"]) ? $_POST[$tag . "MinWidth"] : $defaultValues[$tag]["MinWidth"];
    $minFontSizeValue = isset($_POST[$tag . "MinFontSize"]) ? $_POST[$tag . "MinFontSize"] : $defaultValues[$tag]["MinFontSize"];
    $maxWidthValue = isset($_POST[$tag . "MaxWidth"]) ? $_POST[$tag . "MaxWidth"] : $defaultValues[$tag]["MaxWidth"];
    $maxFontSizeValue = isset($_POST[$tag . "MaxFontSize"]) ? $_POST[$tag . "MaxFontSize"] : $defaultValues[$tag]["MaxFontSize"];

echo "<div><strong>{$tag}</strong></div>
          <div><input type='number' id='{$tag}MinWidth' name='{$tag}MinWidth' class='unit-input' required value='{$minWidthValue}'></div>
          <div><input type='number' id='{$tag}MinFontSize' name='{$tag}MinFontSize' class='unit-input' step='0.01' required value='{$minFontSizeValue}'></div>
          <div><input type='number' id='{$tag}MaxWidth' name='{$tag}MaxWidth' class='unit-input' required value='{$maxWidthValue}'></div>
          <div><input type='number' id='{$tag}MaxFontSize' name='{$tag}MaxFontSize' class='unit-input' step='0.01' required value='{$maxFontSizeValue}'></div>";
}


echo '</div><input type="submit" value="Generate CSS"></form>';


    // Display the traditional CSS output
    if (!empty($cssOutput)) {
        echo "<h2>Generated CSS:</h2>";
        echo '<textarea id="cssOutput" rows="10">' . htmlspecialchars($cssOutput) . "</textarea><br>";
        echo '<button onclick="copyToClipboard(\'cssOutput\')">Copy CSS</button>';
    }

    // Display the CSS variables output
    if (!empty($cssVariablesOutput)) {
        echo "<h2>Generated CSS Variables:</h2>";
        echo '<textarea id="cssVariablesOutput" rows="10">' . htmlspecialchars($cssVariablesOutput) . "</textarea><br>";
        echo '<button onclick="copyToClipboard(\'cssVariablesOutput\')">Copy CSS Variables</button>';
    }

    // JavaScript for copy to clipboard functionality and unit conversion
    echo '<script>
            function copyToClipboard(elementId) {
                var copyText = document.getElementById(elementId);
                copyText.select();
                document.execCommand("copy");
            }

function toggleUnits() {
    var useRem = document.getElementById("unitToggle").checked;
    var rootFontSize = parseFloat(document.getElementById("rootFontSize").value);
    var fontSizeElements = document.querySelectorAll(".unit-input"); // Class for font size inputs

    fontSizeElements.forEach(function(element) {
        if (element.id.endsWith("MinFontSize") || element.id.endsWith("MaxFontSize")) {
            var value = parseFloat(element.value);
            if (!isNaN(value)) {
                if (useRem) {
                    element.value = (value / rootFontSize).toFixed(2); // Convert to REM
                } else {
                    element.value = (value * rootFontSize).toFixed(0); // Convert to Pixels
                }
            }
        }
    });
}

          </script>';

    echo "</div>";
}


// Define the function for the fluid typography calculator
function fluid_typography_calculator() {
    // Call the existing function to display the fluid typography calculator
    ft_calculator_page();
}

// Add the shortcode
add_shortcode('Fluid_calc', 'fluid_typography_calculator');

				
			
				
					add_filter( 'media_library_infinite_scrolling', '__return_true' );
				
			
				
					function custom_mime_types($mimes) {
    $mimes['woff'] = 'font/woff';
    $mimes['woff2'] = 'font/woff2';
    return $mimes;
}
add_filter('upload_mimes', 'custom_mime_types');

				
			
				
					function limit_image_sizes($sizes) {
    // Keep only the thumbnail size
    return array(
        'thumbnail' => $sizes['thumbnail']
    );
}
add_filter('intermediate_image_sizes_advanced', 'limit_image_sizes');

function set_thumbnail_size() {
    // Set the thumbnail size to 150x150
    update_option('thumbnail_size_w', 150);
    update_option('thumbnail_size_h', 150);
    update_option('thumbnail_crop', 1); // 1 for hard crop, 0 for soft crop
}
add_action('admin_init', 'set_thumbnail_size');

// Remove the unnecessary regenerate_thumbnails function as the thumbnail is already handled

				
			
				
					function restrict_plugins_page() {
    // Check if the current user is trying to access the Plugins page
    global $pagenow;
    if ($pagenow === 'plugins.php' || strpos($_SERVER['REQUEST_URI'], 'plugin-install.php') !== false || strpos($_SERVER['REQUEST_URI'], 'plugin-editor.php') !== false) {
        
        // Start a session if not already started
        if (!session_id()) {
            session_start();
        }
        
        // SET THE PASSWORD HERE !!
        $required_password = '123'; // Change this to your desired password
        
        // Check if the password has been submitted and is correct
        if (isset($_POST['plugins_password']) && $_POST['plugins_password'] === $required_password) {
            $_SESSION['plugins_access_granted'] = true;
        }
        
        // Check if the session variable is not set, meaning access is not granted
        if (empty($_SESSION['plugins_access_granted'])) {
            // Display the password form
            echo '<form method="post" action="">
                <p>Enter the password to access the Plugins page:</p>
                <input type="password" name="plugins_password" />
                <input type="submit" value="Submit" />
            </form>';
            
            // Prevent the rest of the Plugins page from loading
            exit;
        }
    }
}
add_action('admin_init', 'restrict_plugins_page');

				
			
				
					function restrict_settings_page() {
    // Check if the current user is trying to access the Settings page
    global $pagenow;
    $settings_pages = array(
        'options-general.php',
        'options-writing.php',
        'options-reading.php',
        'options-discussion.php',
        'options-media.php',
        'options-permalink.php',
        // Add more settings pages if you have plugins that add their own settings
    );

    if (in_array($pagenow, $settings_pages)) {
        
        // Start a session if not already started
        if (!session_id()) {
            session_start();
        }
        
        // Set the password
        $required_password = '123'; // Change this to your desired password
        
        // Check if the password has been submitted and is correct
        if (isset($_POST['settings_password']) && $_POST['settings_password'] === $required_password) {
            $_SESSION['settings_access_granted'] = true;
        }
        
        // Check if the session variable is not set, meaning access is not granted
        if (empty($_SESSION['settings_access_granted'])) {
            // Display the password form
            echo '<form method="post" action="">
                <p>Enter the password to access the Settings page:</p>
                <input type="password" name="settings_password" />
                <input type="submit" value="Submit" />
            </form>';
            
            // Prevent the rest of the Settings page from loading
            exit;
        }
    }
}
add_action('admin_init', 'restrict_settings_page');

				
			
				
					if (!function_exists('restrict_snippets_pages')) {
    function restrict_snippets_pages() {
        // Check if the current user is trying to access the Snippets pages
        global $pagenow;
        $restricted_pages = array(
            'admin.php?page=snippets',
            'admin.php?page=snippet-manager',
            'admin.php?page=snippet-import',
            'admin.php?page=add-snippet',
            'admin.php?page=import-code-snippets'
        );

        // Check if the current request URI contains any of the restricted pages
        $is_restricted_page = false;
        foreach ($restricted_pages as $restricted_page) {
            if (strpos($_SERVER['REQUEST_URI'], $restricted_page) !== false) {
                $is_restricted_page = true;
                break;
            }
        }

        if ($is_restricted_page) {
            // Start a session if not already started
            if (!session_id()) {
                session_start();
            }
            
            // SET THE PASSWORD HERE !!
            $required_password = '123'; // Change this to your desired password
            
            // Check if the password has been submitted and is correct
            if (isset($_POST['snippets_password']) && $_POST['snippets_password'] === $required_password) {
                $_SESSION['snippets_access_granted'] = true;
            }
            
            // Check if the session variable is not set, meaning access is not granted
            if (empty($_SESSION['snippets_access_granted'])) {
                // Display the password form
                echo '<form method="post" action="">
                    <p>Enter the password to access the Snippets pages:</p>
                    <input type="password" name="snippets_password" />
                    <input type="submit" value="Submit" />
                </form>';
                
                // Prevent the rest of the Snippets page from loading
                exit;
            }
        }
    }
    add_action('admin_init', 'restrict_snippets_pages');
}

				
			
				
					function restrict_users_page() {
    // Check if the current user is trying to access the Users page
    global $pagenow;
    if ($pagenow === 'users.php' || $pagenow === 'user-new.php' || $pagenow === 'profile.php') {
        
        // Start a session if not already started
        if (!session_id()) {
            session_start();
        }
        
        // Set the password
        $required_password = '123'; // Change this to your desired password
        
        // Check if the password has been submitted and is correct
        if (isset($_POST['users_password']) && $_POST['users_password'] === $required_password) {
            $_SESSION['users_access_granted'] = true;
        }
        
        // Check if the session variable is not set, meaning access is not granted
        if (empty($_SESSION['users_access_granted'])) {
            // Display the password form
            echo '<form method="post" action="">
                <p>Enter the password to access the Users page:</p>
                <input type="password" name="users_password" />
                <input type="submit" value="Submit" />
            </form>';
            
            // Prevent the rest of the Users page from loading
            exit;
        }
    }
}
add_action('admin_init', 'restrict_users_page');

				
			
				
					if ( ! function_exists( 'custom_set_permalink_structure_to_post_name' ) ) {
    /**
     * Sets the default permalink structure to 'Post Name' if it is not already set.
     *
     * To change the default permalink structure, update the `$desired_permalink_structure`
     * variable with one of the following values:
     *
     * - Plain: ''
     * - Day and Name: '/%year%/%monthnum%/%day%/%postname%/'
     * - Month and Name: '/%year%/%monthnum%/%postname%/'
     * - Numeric: '/%post_id%/'
     * - Post Name: '/%postname%/'
     * - Custom Structure: '/your/custom/structure/'
     */
    function custom_set_permalink_structure_to_post_name() {
        // Get the current permalink structure
        $current_permalink_structure = get_option('permalink_structure');

        // Set the desired permalink structure here
        // Default is 'Post Name'
        $desired_permalink_structure = '/%postname%/';

        // Uncomment one of the following lines to set a different permalink structure
        // Plain: 
        // $desired_permalink_structure = '';
        
        // Day and Name: 
        // $desired_permalink_structure = '/%year%/%monthnum%/%day%/%postname%/';
        
        // Month and Name: 
        // $desired_permalink_structure = '/%year%/%monthnum%/%postname%/';
        
        // Numeric: 
        // $desired_permalink_structure = '/%post_id%/';
        
        // Custom Structure: 
        // $desired_permalink_structure = '/your/custom/structure/';

        // Check if the current structure is not already set to the desired structure
        if ($current_permalink_structure != $desired_permalink_structure) {
            // Update the permalink structure
            update_option('permalink_structure', $desired_permalink_structure);
            // Flush rewrite rules to apply the new permalink structure
            flush_rewrite_rules();
        }
    }
    add_action('admin_init', 'custom_set_permalink_structure_to_post_name');
}

				
			
				
					/*
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();
}
				
			
				
					/*
Comments in WordPress are like an open mic.
Sometimes you want to turn the mic off.
Silencing the comment section might just be your ticket to serenity.*/

function codesnippets_disable_comments() {
    // Remove comment support for posts
    remove_post_type_support( 'post', 'comments' );

    // Remove comment support for pages
    remove_post_type_support( 'page', 'comments' );

    // Remove comments from the admin menu
    remove_menu_page( 'edit-comments.php' );

    // Redirect comment-related URLs to the homepage
    add_action( 'template_redirect', 'codesnippets_disable_comments_redirect' );
}

function codesnippets_disable_comments_redirect() {
    global $wp_query;
    if ( is_single() || is_page() || is_attachment() ) {
        if ( have_comments() || comments_open() ) {
            wp_redirect( home_url(), 301 );
            exit;
        }
    }
}

add_action( 'admin_init', 'codesnippets_disable_comments' );
				
			
				
					function remove_dashboard_widgets() {
    remove_action( 'welcome_panel', 'wp_welcome_panel' );
    remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
    remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
    remove_meta_box( 'dashboard_site_health', 'dashboard', 'normal' );
	 remove_meta_box( 'e-dashboard-overview', 'dashboard', 'normal' );
}
add_action( 'wp_dashboard_setup', 'remove_dashboard_widgets' );
				
			
				
					add_action('save_post', function ($post_id, $post, $update) {
    // Check if the post is an instance of Elementor's Kit
    if ('elementor_library' === get_post_type($post_id) && 'kit' === get_post_meta($post_id, '_elementor_template_type', true)) {
        $meta = get_post_meta($post_id, '_elementor_page_settings', true);

        // Handle custom colors
        if (!empty($meta['custom_colors'])) {
            foreach ($meta['custom_colors'] as &$custom_color) {
                // Replace the hyphens inside of titles with underscores to ensure consistency
                $custom_color['_id'] = str_replace('-', '_', sanitize_title($custom_color['title']));
            }
        }

        // Update post meta
        update_post_meta($post_id, '_elementor_page_settings', $meta);
    }
}, 10, 3);

				
			
				
					define('WP_POST_REVISIONS', 3);
				
			

This comes in 3 parts.

  1. HTML Widget for the Toggle, adjust the CSS for styling. Place in your Header Template or anywhere else on your site.
  2. Add the Code Snippet to Code Snippets.
  3. Use the CSS as an example of how to style for the Light and Dark Mode. Note that using the Custom Global Colours CSS will help with using Custom Colours. The CSS should be added to Site Settings or any Customised CSS area.

Part 1: The HTML

				
					<div class="mode-toggle">
  <input type="checkbox" id="mode-switch" aria-label="Toggle dark mode" role="switch" aria-checked="false" />
  <label for="mode-switch" class="toggle-label">
    <span class="light-mode">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
      </svg>
    </span>
    <span class="dark-mode">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
      </svg>
    </span>
  </label>
</div>


<style>
/* Toggle switch container */
.mode-toggle {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 28px;
}

/* Hide default checkbox */
.mode-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom slider */
.toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  border-radius: 28px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Slider before/after */
.toggle-label::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s, background-color 0.3s;
  z-index: 999;
}

/* Light and Dark labels */
.light-mode,
.dark-mode {
  position: absolute;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 28px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 0.3s;
}

.light-mode {
  left: 0;
}

.dark-mode {
  right: 0;
}

/* When checked, move the slider */
input:checked + .toggle-label {
  background-color: #fff;
}

input:checked + .toggle-label::before {
  transform: translateX(26px);
  background-color: #000;
}

/* Change label colors when in dark mode */
input:checked + .toggle-label .light-mode,
input:checked + .toggle-label .dark-mode {
  color: #000;
}

/* Smooth transition for body and headings */
body {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
  transition: color 0.2s ease-in-out;
}
</style>
				
			

Part 2: The Snippet

				
					add_action('wp_head', 'dark_mode_toggle_script');

function dark_mode_toggle_script() {
  ?>
  <script>
  document.addEventListener('DOMContentLoaded', (event) => {
    const modeSwitch = document.querySelector('#mode-switch');
    const isDarkMode = localStorage.getItem('darkMode') === 'true';

    // Function to update the mode
    const setMode = (dark) => {
      document.body.classList.toggle('darkMode', dark);
      modeSwitch.setAttribute('aria-checked', dark);
      localStorage.setItem('darkMode', dark);
    };

    // Set initial mode based on localStorage
    setMode(isDarkMode);

    // Toggle mode on button click
    modeSwitch.addEventListener('change', () => {
      const darkModeEnabled = modeSwitch.checked;
      setMode(darkModeEnabled);
    });

    // Keyboard accessibility: toggle dark mode on Enter and Spacebar key press
    modeSwitch.addEventListener('keypress', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        modeSwitch.checked = !modeSwitch.checked;
        modeSwitch.dispatchEvent(new Event('change'));
        event.preventDefault();
      }
    });
  });
  </script>
  <?php
}

				
			

Part 3: Example CSS

				
					html { font-size: 100%; } /* Default is always 16px */

/* Text */
h1 {
  font-size: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  font-weight: 900;
  color: var(--e-global-color-primary);
}

.darkMode h1 {
  color: #FFF;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--e-global-color-secondary);
}

.darkMode h2 {
  color: #D0D0CE;
}

.purple h2 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--e-global-color-purple_shade);
}

.darkMode .purple h2 {
  color: var(--e-global-color-dark_mode_yellow);
}

p {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
  font-weight: normal;
  color: var(--e-global-color-text);
}

.darkMode p {
  color: var(--e-global-color-white);
}

/* Backgrounds */
body {
  background-color: #FFF; /* Light background */
}

.darkMode {
  background-color: #000; /* Dark background */
}

.hero_banner {
  background-color: #EFEFEF;
}

.darkMode .hero_banner {
  background-color: #222222;
}

/* Buttons */
.elementor-button {
  background-color: var(--e-global-color-primary);
  color: #FFF;
}

.elementor-button:hover {
  background-color: #000;
}

.darkMode .elementor-button {
  background-color: #F3F3F3;
  color: #000;
}

.darkMode .purple_shade .elementor-button {
  background-color: var(--e-global-color-dark_mode_yellow);
  color: #000;
}

/* Applied to Menu */
.elementor-nav-menu a {
  color: #000;
}

.darkMode .elementor-nav-menu a {
  color: var(--e-global-color-dark_mode_yellow);
}

/* Images */
.darkMode img {
  filter: brightness(0.7) contrast(1.1);
}

.darkMode .grayscale img {
  filter: grayscale(1); /* Between 0 and 1 */
}

.darkMode .saturate img {
  filter: saturate(1.5); /* 1+ increase, <1 decrease */
}

.darkMode .sepia img {
  filter: sepia(1); /* Between 0 and 1 */
}

/* SVG Icons */
.elementor-icon svg {
  fill: #000;
}

.darkMode .elementor-icon svg {
  fill: var(--e-global-color-dark_mode_yellow);
}
				
			
				
					add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );
				
			
				
					add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
				
			
				
					/**
 * 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 admin
 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 );
				
			
				
					add_filter( 'wp_lazy_loading_enabled', '__return_false' );
				
			

The Settings Pack - WordPress

Last Updated Saturday 29 June 2024

WordPress General Settings

1) Set the Site Title (or go to WordPress Dashboard > Appearance > Customize).

2) Set the Site Icon (or go to WordPress Dashboard > Appearance > Customize).

3) Ensure the Address/Site URL both begin with https:// (If you don’t have a valid SSL Certificate, then check with your host).

4) Ensure the Admin Email Address is correct.

WordPress Reading Settings

This step can be left until a Homepage or a Landing Page has been created.

Return here to set the first page to be loaded when a user enters your parent domain.

WordPress Discussion Settings

The items here are subjective to if;

1) You permit comments to be added, and

2) You will moderate activity and remove spam.

Within the ‘Course’, we will advise on disabling Comments for particular Posts and Pages.

Inside of the ‘Settings Pack’, you will find the Snippets Bundle with a Code Snippet to fully disable comments on all Posts and Pages.

WordPress Media Settings

When images are added to the Media Library, multiple versions may be created in your wp-uploads folder.

1) Images should be uploaded as a webp format. We show how to convert PNG/JPEG within the ‘Course’.

2) Images should be reasonably sized to the maximum size required on the site. Do not upload an image that is 1920x 1080 if it will only be 300px wide on a site.

I leave the Thumbnail Size as 150×150, and set the others to be 0. 

Inside of the ‘Settings Pack’, you will find the Snippets Bundle with a Code Snippet to ‘future-proof’ prevent duplicate images being created in your database.

WordPress Permalink Settings

Set the format of the links that will appear for Posts, Pages and Products.

I recommend ‘Post Name’ especially if you care about SEO and Keyword Marketing.

Inside of the ‘Settings Pack’, you will find the Snippets Bundle with a Code Snippet to set the Permalink to always stay set to prevent someone modifying it.

Excellent

Click Download for your file

Welcome