Themergency fooplugins.com

WordPress Zip Generator Class

| 0 comments

This is day 24 of my WordPress Developer Advent Calendar.

In yesterday’s post, WordPress Admin Color Scheme Generator, I mentioned that I borrowed some ideas and code from the underscores.me theme generator plugin. That plugin processes a source directory (the underscore theme files) and does text replacements in each file, and then adds them to a zip, which can then be downloaded. It works great, but it’s very specific to the underscore theme situation. I figured that the code and resulting logic could be extracted and made into a reusable PHP class, which can be used in different situations.

Why Code A Reusable Class?

Well, the only reason to do this would be if it can be reused in different projects. The Underscore theme generator plugin creates a zip. So does my Admin Color Scheme Generator, and I am soon going to be working on a generator for the WordPress Plugin Boilerplate, so it makes sense to create a class that all these projects can use and hopefully improve…

WP_Zip_Generator Class

So when I wrote the Admin Color Scheme Generator, I took a little bit of extra time on writing the WP_Zip_Generator class. It turned into quite a useful little class, and I am hoping others will adopt it and use it within their projects or plugins.

A description from the Github repo:

The WP Zip Generator automates a bunch of tasks related to creating a zip file that a user can download. The “source” directory is recursively iterated through and each file is processed. You can specify which files and directories to exclude from the final zip. When each file is processed, a regex replace is performed on the file contents using variables that you can specify.

Example Usage

I made this class a little differently to other classes I have done in the past. I pass in an array or arguments that the class will use, similar to how the WP_Query class works. Here is an example instantiation:

$zip_generator = new WP_Zip_Generator(array(
    'name'                 => 'admin-color-scheme-generator',
    'process_extensions'   => array('php', 'css', 'js', 'txt', 'md'),   
    'source_directory'     => dirname( __FILE__ ) . '/source/',
    'zip_root_directory'   => "color-scheme",
    'download_filename'    => "double-rainbow.zip",
    'filename_filter'      => array($this, 'process_zip_filename'),
    'file_contents_filter' => array($this, 'process_zip_file_contents'),
    'post_process_action'  => array($this, 'process_zip'),
    'variables'            => $variables
));

As you can see, there are lots of things you can change including the files to exclude, the name of the zip file, where the source directory is, and there are also a bunch of hooks where you can customize it for your unique situation.

Filters And Hooks

Based on the name you pass into the class, you can hook into filters and actions like you would normally in WordPress. (using the name ‘doublerainbow’)

add_filter( 'zip_generator_process_filename-doublerainbow', 'process_my_file_name', 10, 2 );
add_filter( 'zip_generator_process_file_contents-doublerainbow', 'process_file_contents', 10, 2 );
add_action( 'zip_generator_post_process-doublerainbow', 'add_stuff_to_my_zip', 10, 2 );

Or you can pass in your functions, and the class will hook up everything for you:

$zip_generator = new WP_Zip_Generator(array(
    'name'                 => 'doublerainbow',
    'filename_filter'      => array($this, 'process_zip_filename'),
    'file_contents_filter' => array($this, 'process_zip_file_contents'),
    'post_process_action'  => array($this, 'process_zip'),
    'variables'            => $variables
));

The 2 filters and 1 action are:

  • filename_filter - use this filter to change the filename of a file in the zip.
  • file_contents_filter - use this filter to change the contents of a file in the zip.
  • post_process_action - this action fires after all files in the source directory have been processed, so you can add extra files to the zip or remove existing files etc.

If you generate zip files in WordPress, then give the class a spin, and contribute to make it better.

WordPress Admin Color Scheme Generator

| 3 Comments

This is day 23 of my WordPress Developer Advent Calendar. Lately, there has been a lot of buzz around WordPress admin color schemes. Sarah published a post on the Tavern which gives you a few options:

  • Admin Color Schemes - add 8 new color schemes to your admin.
  • HS Custom Admin Theme - a plugin to create your own custom color schemes. - seems to have been pulled from the repo!
  • Create a Custom WordPress Admin Color Scheme - a post by my friend Matt who walks you through creating your own color scheme.

So this got me thinking… wouldn’t it be cool if you could enter a few colors into a generator and it spits out a stand-alone WordPress plugin which contains the custom color scheme? Nothing more, nothing less. If you are a freelancer, this would be really cool, cause you can generate a personalized color scheme plugin for an individual customer. Well, I built it! And it’s a WordPress plugin too. So this plugin generates other plugins.

Admin Color Scheme Generator Plugin

The plugin can display the generator form in the admin, under the Tools menu: Admin Color Scheme Generator Or you can use it on the front-end. To use it on the front-end, you will need to include some code in your page template:

do_action('admin_color_scheme_generator_print_form');

I have installed it on my blog and you can test it out right here, right now! The code for the plugin is on Github, so take a look and contribute if you feel like it.

Under the Hood

I borrowed some ideas from the Admin Color Schemes plugin, in the way that is uses SASS to easily create a color scheme stylesheet from literally 5 lines of SASS code:

$base-color: #0c4da1;
$highlight-color: #ed5793;
$notification-color: #43db2a;
$action-color: #eb853b;
@import "../page_2F3/--/admin.css";

I found a cool PHP SASS compiler, called phpscss, which I use to generate the actual stylesheet in the zip. Just include the scss.inc.php file and the rest is easy:

require_once 'includes/phpscss/scss.inc.php';		
$scss = new scssc();
$css = $scss->compile( $scss_code );

I also borrowed a lot from the underscores.me generator code, but more about that in my next post.

Dashicons Picker jQuery Plugin

| 1 Comment

This is day 22 of my WordPress Developer Advent Calendar.

Since the release of WordPress 3.8, there has been a bit of talk around using the new Dashicons within your themes and plugins. Most notably:

  • Using WordPress 3.8′s dashicons in your theme or plugin
  • Using Dashicons for Custom Post Types
  • Adding Dashicons in WordPress

I really liked these ideas, and after finding the Boostrap IconPicker plugin and the very similar Bootstrap Icon Picker, I thought it would be fun to create a clone, but utilizing the Dashicons icon font instead.

Hello Dashicons Picker

I created a very small Dashicons Picker jQuery plugin which allows you to visually pick your dashicon and it returns the class name of the selected icon. Here it is in action:

Dashicons Picker In Action

So as you can see, you can page through the entire dashicons collection, and also search for specific icons by name if you want:

Dashicons Picker Search

A close-up screenshot of the popup:

dashicons-picker-jquery-plugin

Installation

To include the dashicons picker in your plugin is pretty easy. First, include both the dashicons-picker.css and dashicons-picker.js files:

function dashicons_picker_scripts() {
	$css = plugin_dir_url( __FILE__ ) . '../page_2F3/css/dashicons-picker.css';
    wp_enqueue_style( 'dashicons-picker', $css, array( 'dashicons' ), '1.0' );
	$js = plugin_dir_url( __FILE__ ) . '../page_2F3/js/dashicons-picker.js';
	wp_enqueue_script( 'dashicons-picker', $js, array( 'jquery' ), '1.0' );
}
add_action( 'admin_enqueue_scripts', 'dashicons_picker_scripts' );

Together, the 2 files are less than 8KB. And that is unminified, which is very small indeed. And as you can see in the code above, the CSS file is dependent on ‘dashicons’ so that will automatically include the stylesheets needed to view the dashicons font.

Then in your HTML, give the button a class or “dashicons-picker” and include a data-target attribute which stores the selector to the textbox:

<input class="regular-text" id="dashicons_picker_example_icon1" type="text" />
<input class="button dashicons-picker" type="button" value="Choose Icon" data-target="#dashicons_picker_example_icon1" />

Plugin Example

I included a very simple plugin example in the repo. All you need to do download the whole repo as a zip, and install it like you would any other plugin. A new settings page called “Dashicons Picker Example” will be available where you can play with the icon picker.

Check out the Github repo and contribute to it if you like…