How to Create a Zip File For Your WordPress Plugin

Creating a zip file for your plugin is a necessary step to take, especially as you share your plugin with others. You can use this zip file as the source of a GitHub Release, as a submission to WordPress.org, or to send to users.

While some tools and operating systems make creating zip files easy, it’s a lot cleaner to do this from the command line as you have more control over the output.

In this tutorial, I’ll show you how to create a zip file for your plugin using two different techniques: @wordpress/scripts and Grunt.

Plugin file structure

Here is the file structure of the plugin we’ll be creating a zip file for:

dlx-powerblocks
├── build
├── dist
├── src
├── includes
├── dlx-powerblocks.php
└── readme.txtCode language: AsciiDoc (asciidoc)

The src folder is used locally for scripts and styles, so this folder shouldn’t be in the final zip file.

Creating a package.json file

Navigate to your plugin via command line and check if there’s a package.json file present. If not, create it using npm init.

npm init
Code language: Bash (bash)

If running npm init, just press Enter all the way through.

Pin itShare

Here’s what the package.json looks like so far:

{
  "name": "dlx-powerblocks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}Code language: JSON / JSON with Comments (json)

Creating a zip file using @wordpress/scripts

Add the @wordpress/scripts package to your project

Going back to Terminal, install @wordpress/scripts via npm.

npm install --save-dev @wordpress/scripts
Code language: Bash (bash)

Add a “zip” command to package.json

Once that is installed, let’s add the zip command to package.json.

{
  "name": "dlx-powerblocks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "zip": "wp-scripts plugin-zip"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^27.4.0"
  }
}
Code language: JSON / JSON with Comments (json)

In this case, we’ll add a zip command so that we can run it from command line using npm run zip.

Setting the file structure

Before you run the zip feature, we need to specify our file structure in package.json. The @wordpress/scripts package does its best to adhere to a common structure, but it’s best to define it anyway so that nothing is missed.

We’ll be using a property called “files” and listing all the files and directories we want in the zip.

{
  "name": "dlx-powerblocks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "zip": "wp-scripts plugin-zip"
  },
  "files": [
	"build",
	"dist",
	"includes",
	"dlx-powerblocks.php",
	"readme.txt"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^27.4.0"
  }
}Code language: JSON / JSON with Comments (json)

Run the zip command

In command line, type in: npm run zip

This will generate a zip file in your plugin directory.

Pin itShare

Inspecting the zip file shows the contents.

Pin itShare

Creating a zip file using Grunt

Not all WordPress projects use @wordpress/scripts, so it’s understandable if you want to use a different technique to build your zip files. In this example, we’ll be using Grunt.

Installing Grunt and Grunt-CLI

In terminal, install Grunt and Grunt-CLI.

npm install --save-dev grunt grunt-cli grunt-contrib-compress
Code language: Bash (bash)

Next, we’ll create a file called Gruntfile.js in the plugin’s root.

We’ll fill in our files within the new file.

module.exports = function( grunt ) {
	grunt.initConfig( {
		compress: {
			main: {
				options: {
					archive: 'dlx-powerblocks.zip',
				},
				files: [
					{ src: [ 'dlx-powerblocks.php' ], dest: '/', filter: 'isFile' },
					{ src: [ 'readme.txt' ], dest: '/', filter: 'isFile' },
					{ src: [ 'build/**' ], dest: '/' },
					{ src: [ 'dist/**' ], dest: '/' },
					{ src: [ 'includes/**' ], dest: '/' },
				],
			},
		},
	} );
	grunt.registerTask( 'default', [ 'compress' ] );

	grunt.loadNpmTasks( 'grunt-contrib-compress' );
};
Code language: JSON / JSON with Comments (json)

Run the grunt command to generate the zip

With Grunt installed and the Gruntfile.js file filled out, you can simply type in: grunt

Pin itShare

Here are the innards of the zip file.

Pin itShare

As opposed to the @wordpress/scripts way, you’ll find you have more control over the output using Grunt.

Conclusion

Within this tutorial, I demonstrated how to create zip files from @wordpress/scripts and Grunt. With Grunt, you have more control over what’s in the zip file, but @wordpress/scripts is a more native (and easier) way to generate zip files. The technique you choose is up to you.

Like this tutorial? There's more like it. Subscribe today!

Name(Required)

First Last

Email(Required)

Δ

Published On: on March 13, 2024

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.