Developing a universal.css and universal.js file for a custom WordPress theme

Question

Developing a universal.css and universal.js file for a custom WordPress theme

I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files.

To integrate all these files into my template, I utilized the following code within the function file:

add_action( 'wp_enqueue_scripts', 'files_assets' );

function files_assets() {
    
// Adding CSS files
  wp_enqueue_style( 'Bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.0.0' );


// Adding JS files
  wp_enqueue_script( 'jQuery3.4.1', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', array( 'jquery' ), '1.4.1', true );

}

With a total of 61 style and script files, it has become challenging to introduce each one individually using the aforementioned code.

Is there an efficient method to streamline this process by creating an all.css file containing all styles and linking only this file to my template?

Similarly, is there a way to consolidate all script files into an all.js file for simpler integration?

javascript jquery css wordpress

Answer 1

Answer №1

To efficiently bundle your JavaScript and CSS files, consider using tools like gulp or webpack. Below is a basic configuration example for a gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('styles', function() {
  return gulp.src('./src/css/*.css')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/css/*.css', gulp.series('styles'));
  gulp.watch('./src/js/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.series('styles', 'scripts', 'watch'));

Answer 2

To efficiently bundle your JavaScript and CSS files, consider using tools like gulp or webpack. Below is a basic configuration example for a gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('styles', function() {
  return gulp.src('./src/css/*.css')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/css/*.css', gulp.series('styles'));
  gulp.watch('./src/js/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.series('styles', 'scripts', 'watch'));

Developing a universal.css and universal.js file for a custom WordPress theme

Answer №1

Similar questions

Retrieve a prepared response from a TypeORM query

Troubles with displaying table content in Internet Explorer 9 due to .innerHTML limitations

How can we determine if the first character of a text input is 'X' in JQuery when the input length is 6?

Using jQuery to handle multiple buttons with the same ID

Exploring Opencascade.js: Uncovering the Real Text within a TCollection_ExtendedString

Tips for implementing jQuery overlay to display radio buttons in a popup window

Substitute link with asynchronous JavaScript and XML

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

Prevent mobile view from activating when zoomed in on the screen

Having trouble with displaying the modal dialog in Twitter Bootstrap 3?

What is the best method for applying a style specifically to controls located on the lower part of the

Why does CodeIgniter consistently return true when using Jquery's .ajax() and form validation?

What is the best way to horizontally align an element within a Material UI Grid item?

Parsing HTML to access inner content

Combine the data retrieved from an AJAX call with the original source for autocomplete suggestions

Align the inline text at the center as if it were an inline-block element

Troubleshooting: Problems with AngularJS $http.get functionality not functioning as expected

In JavaScript, Identify the filename selected to be attached to the form and provide an alert message if the user chooses the incorrect file

Using Crawler4j, Jsoup, and JavaScript to retrieve modified attribute values

What are the necessary steps for incorporating Payment/Bank transactions into an e-commerce platform?