How to Create a WordPress Plugin Zip File Using Command Line – Two Approaches

Summary

In this article, I show you two ways to create WordPress plugin zip files from the command line: using @wordpress/scripts with package.json, and using Grunt.

To create a zip file using @wordpress/scripts, you would run the command in your repo’s folder:

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

Add the following to your “scripts” parameter in package.json:

"scripts": {
  "zip": "wp-scripts plugin-zip"
},Code language: JSON / JSON with Comments (json)

Fill out a “files” attribute in package.json:

"files": [
	"build",
	"dist",
	"includes",
	"dlx-powerblocks.php",
	"readme.txt"
],Code language: JSON / JSON with Comments (json)

And run the command:

npm run zip
Code language: Bash (bash)

For Grunt, you would install it via the command line in your repo:

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

In the repo, you’d create a project file named Gruntfile.js with your project structure. An example is below.

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: JavaScript (javascript)

And run via command line:

grunt
Code language: Bash (bash)

Why do you need a plugin zip file?

Creating a zip file for your plugin is a necessary step, especially when sharing it 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.

An example 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.

First step: create the package.json file

I’ll show you how to create a zip file using the npm package @wordpress/scripts and Grunt, but to make it portable, you need a package.json file to house all of your project’s NPM dependencies.

Navigate to your plugin via the 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. Although you can fill out as much information as you are comfortable with.

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)

Now that there’s a package.json, I can proceed to show you how I would create the zip files each way:

• via @wordpress/scripts
• via Grunt

Please refer to Mastering package.json for more information on this file.

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 --legacy-peer-deps
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 the 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 from the command line

In command line, type in:

npm run zip
Code language: Bash (bash)

This will generate a zip file in your plugin directory.

Inspecting the zip file shows the contents.

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 the terminal, install Grunt and Grunt-CLI.

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

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

We’ll create the folder hierarchy and static files as shown in the example below. Examples of folders and files are shown.

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: JavaScript (javascript)

Run the ‘grunt’ command to generate the zip

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

grunt
Code language: Bash (bash)

Here are the innards of the zip file.

In contrast to the @wordpress/scripts approach, you’ll find that 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.

Is there an alternative way to generate plugin zips? Please leave a comment below, and I’ll be sure to feature it in the article.