Make your CSS and JS files smaller by using a PHP compression script in your WordPress child theme

  I am looking to implement a PHP script that will serve combined, pre-gzipped, and minified JS and CSS files. You can find the source code for this script here: https://code.google.com/p/compress/
I have a WAMP localhost with WordPress installed.
Here's what I have done so far:

  • I have added three files (jsmin.php, cssmin.php, compress.php) in the child-theme's folder;

  • I created a directory 'min' within the child-theme folder;

  • I created a file 'compress_timestamp.php'

  • I added the following code into header.php (first tried functions.php then moved it to the first line of header.php)

    require_once('compress_timestamp.php');         //load timestamp created by compress.php module sets field $compress_stamp=unix_timestamp<br>
if (stripos($_SERVER['HTTP_ACCEPT_ENCODING'],'GZIP')!==false)<br>
    $gz='gz';
else
    $gz=null;
echo '<link rel="stylesheet" type="text/css" href="min/css_schedule_'.$compress_stamp.'.css'.$gz.'" />',PHP_EOL;
//    the following scripts were combined into css_schedule
//      echo '<link rel="stylesheet" type="text/css" href="CSS/menu.css" />',PHP_EOL;
//      echo '<link rel="stylesheet" type="text/css" href="CSS/ThreeColumnFixed.css" />',PHP_EOL;
//      echo '<link rel="stylesheet" type="text/css" href="CSS/sprite.css" />',PHP_EOL;
//      echo '<link rel="stylesheet" type="text/css" href="CSS/iCal.css" />',PHP_EOL;


  • I have adjusted the lines according to the child theme and parent folders:

      echo '<link rel="stylesheet" type="text/css" href="style.css" />',PHP_EOL;
  echo '<link rel="stylesheet" type="text/css" href="../twentyfourteen/style.css"

What steps may have been missed and what is the correct approach to ensure it works properly?
And once everything is set up, how do we launch that script remotely on XAMPP (VPS)?

javascriptcsswordpresscompressionminify

Answer №1

If you're looking for a top-notch WordPress plugin that can optimize your website, look no further than JCH Optimize. This handy tool minifies CSS and JavaScript files with ease. Whether you opt for the free version or upgrade to the paid one, you'll gain access to a plethora of features designed to enhance the speed of your WordPress site. Plus, JCH Optimize also offers support for Joomla users.

And let's not forget about the excellent customer service that comes with it!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting a JavaScript Error in AngularJS Module

I created a Module called "app" with some helper functions in the file "scripts/apps.js": angular.module('app', ['ngResource']).run(function($scope){ $scope.UTIL = { setup_pod_variables: function (pods){...} ... }); Now, I want to ...

javascriptangularjs

Expand the spectrum of the input range

Is there a way to make the cursor and bar of a range input bigger without changing their length? <input id="speed" type="range" min="10" max="80" /> Any suggestions on how to achieve this? Appreciate your assistance. ...

htmlcssrange

Retrieving information from the Header element (<H></H>) with the help of Selenium

I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...

javahtmlcssselenium

Create specification for the properties of the child component

I am interested in working with the props of a parent element's children and validating those props. Can I achieve this using prop-types? export default function MyComponent(props) { return ( <div> {React.Children.map(props.chil ...

javascriptreactjsdictionarychildrenreact-proptypes

Creating a dynamic div and populating it with data from various elements in separate xhtml files: a step-by-step guide

I am looking to dynamically add a div under the div tag with id "includedContent" in the code below. Additionally, I would like to modify the load method to accept an array of ids instead of a hardcoded Id(123) and display the data in the dynamically creat ...

javascriptjqueryhtml

Am I on track with this observation?

I am currently using the following service: getPosition(): Observable<Object> { return Observable.create(observer => { navigator.geolocation.watchPosition((pos: Position) => { observer.next(pos); observer.c ...

javascripttypescriptgeolocationangularrxjs

The presence of concealed cells within an HTML table is leading to an increase in the

I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows ...

htmlcss

Assign a specific value to each object

Receiving data from the backend in a straightforward manner: this.archiveService.getRooms(team).subscribe( res => { this.form = res; this.form.forEach(el => { el.reservation.slice(-6).match(/.{1,2}/g).join('/'); }); }, ...

javascriptangulartypescript

Struggling to interpret JSON data from an AJAX call using jQuery in a Python/Flask application

Currently, I am attempting to analyze a POST request sent via AJAX using jQuery in a python script. The structure of the request is as follows: request.js function get_form_data($form){ var unindexed_array = $form.serializeArray(); var indexed_ar ...

javascriptjquerypythonjsonajax

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

htmlcsshover

Is there a way to assign API data as inner HTML using Lit?

Need help setting inner html of html elements with a get request Any suggestions on how to achieve this? import { LitElement, html, css } from "lit"; import { customElement } from "lit/decorators.js"; import axios from "axios" ...

javascripttypescriptlit-elementlit

streaming audio data from a MongoDB database to an HTML audio element

As part of my current project, I am delving into the realm of creating an audio player. The concept of database storage for files is relatively new to me, as my previous experience has mainly involved storing strings. Up to this point, here's what I ...

javascriptnode.jsmongodbhtml5-audiogridfs

Tips for aligning a flex element child vertically

I am trying to achieve a layout where there are 3 divs vertically centered in one flex container with flex-direction:column. However, I need the 3rd div to be positioned at the bottom of the container. To better illustrate what I am looking for, you can v ...

cssflexbox

"Enhance your website with dynamic PHP Ajax live search and infinite scrolling

When scrolling to the bottom of the .dropdown-menu, I would like to load an additional 7 rows from the database. However, I haven't been successful in implementing this feature using the script provided. I am currently utilizing Bootstrap CSS and JS f ...

javascriptphpjqueryajax

Troubles with showcasing icons on a website

I need some help with a minor issue that I'm stuck on. I'm trying to display an information icon that, when clicked, opens a pdf. The strange thing is that the icon doesn't show up on the page even though it exists on the server. However, wh ...

javascripthtmljsp

Set a CSS rule to style every other row in a table, starting from the second row and resetting after

Is there a way to refresh the even and odd count in CSS whenever a specific row is shown? Here's an example setup: header header header even even even odd odd odd Subhead Subhead Subhead even even even How can I ensu ...

htmlcss

Issue with Material-UI: Unforeseen TypeError arises while toggling between two Drawer elements

Note: I am utilizing material-ui 3.3.0 My goal is to have two <Drawer> components displayed on a page, with one sliding in from the left and the other from the right. In an <AppBar>, there are two <Button> components that toggle the visi ...

javascriptreactjsmaterial-ui

Tips for resolving the error "Parsing near 'Unexpected end of JSON input while parsing...' for...'mocha':'^3.2.0','s'":

Once I've successfully set up react and react-dom, the next step is to install webpack. However, I encountered an error during this process. To troubleshoot, I decided to install babel-loader first to ensure that both npm and my internet connection a ...

javascriptnpmwebpack

React-Redux Error: The function this.props.AppendCharacter is not defined

I have been looking for a solution to my issue but couldn't find anything that matches it. I am working on creating a calculator app using React & Redux, and whenever I click on one of the number buttons, I receive an error message saying "this.props. ...

javascriptreactjsreduxreact-redux

Tips for positioning a React component above another component

I am currently facing a challenge while working on a table with an expand more option to display additional details for each specific row. I have implemented a slider to facilitate the expansion of the table. Presently, my ExpandToggle component is embedde ...

javascriptcssreactjscomponentsmaterial-ui