Snippet

Minify CSS and JavaScript in WordPress Using PHP Functions

How to minify css and javascript in wordpressMinify css js using php wordpressBest wordpress plugin for minifying css and jsMinify css javascript wordpress php functionWordpress minify css js tutorialMinify css js wordpress without pluginPhp script to minify css and js in wordpressWordpress minify css js manuallyOptimize wordpress by minifying css and jsMinify css and javascript wordpress guide

Explanation

To make your WordPress site load faster, you can minify your CSS and JavaScript files. Minifying means removing unnecessary spaces, comments, and characters from your code, which reduces file size and speeds up loading times.

Here's how it works:

  • Minify CSS: The function removes comments and extra spaces from your CSS file, making it smaller and quicker to load.
  • Minify JavaScript: Similarly, this function cleans up your JavaScript file by removing unnecessary parts, ensuring it loads faster.

How to Use:

  • The code reads your theme's CSS and JavaScript files.
  • It then applies the minification functions to these files.
  • Finally, it enqueues the minified versions, meaning it tells WordPress to use these optimized files instead of the original ones.

This approach is a manual way to optimize your site without using a plugin. It's a great option if you want more control over your site's performance.

Code

1<?php 2// Function to minify CSS 3function wp_dudecom_minify_css($css) { 4 // Remove comments, whitespace, and unnecessary characters 5 $css = preg_replace('/\/\*.*?\*\//s', '', $css); 6 $css = preg_replace('/\s*([{}|:;,])\s+/', '$1', $css); 7 $css = preg_replace('/\s\s+(.*)/', '$1', $css); 8 $css = str_replace(';}', '}', $css); 9 return trim($css); 10} 11 12// Function to minify JavaScript 13function wp_dudecom_minify_js($js) { 14 // Remove comments, whitespace, and unnecessary characters 15 $js = preg_replace('/\/\*.*?\*\//s', '', $js); 16 $js = preg_replace('/\s*([{}|:;,])\s+/', '$1', $js); 17 $js = preg_replace('/\s\s+(.*)/', '$1', $js); 18 return trim($js); 19} 20 21// Hook to minify CSS and JS files 22function wp_dudecom_enqueue_minified_assets() { 23 // Get the theme directory URI 24 $theme_uri = get_template_directory_uri(); 25 26 // Minify and enqueue CSS 27 $css_file = file_get_contents($theme_uri . '/style.css'); 28 $minified_css = wp_dudecom_minify_css($css_file); 29 wp_register_style('wp-dudecom-minified-style', false); 30 wp_enqueue_style('wp-dudecom-minified-style'); 31 wp_add_inline_style('wp-dudecom-minified-style', $minified_css); 32 33 // Minify and enqueue JavaScript 34 $js_file = file_get_contents($theme_uri . '/script.js'); 35 $minified_js = wp_dudecom_minify_js($js_file); 36 wp_register_script('wp-dudecom-minified-script', false); 37 wp_enqueue_script('wp-dudecom-minified-script'); 38 wp_add_inline_script('wp-dudecom-minified-script', $minified_js); 39} 40 41add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_minified_assets'); 42?>

Instructions

File Location: Add the code to your theme's functions.php file or create a custom plugin file.

Prerequisites: Ensure you have access to your WordPress theme files and a basic understanding of how to edit them.

Implementation Steps:

  1. Access Your Theme Files: Use an FTP client or your hosting provider's file manager to navigate to your WordPress installation directory.
  2. Locate functions.php: Go to wp-content/themes/your-theme-name/ and find the functions.php file.
  3. Edit functions.php: Open the functions.php file in a text editor.
  4. Insert the Code: Copy the provided PHP code and paste it at the end of the functions.php file.
  5. Save Changes: Save the functions.php file and upload it back to your server if using an FTP client.
  6. Verify Implementation: Visit your website and check if the CSS and JavaScript files are minified. You can use browser developer tools to inspect the loaded resources.

If you encounter any issues or need further assistance, consider reaching out to wp-dude.com for expert help with implementation or more advanced functionality.