Dev Notes

Software Development Resources by David Egan.

Add MixitUp to a Sage Project


MixItUp, Sage, WordPress
David Egan

MixItUp is a very useful jQuery filtering plugin.

MixItUp is free to use in non-commercial projects under the terms of the creative commons CC-BY-NC license. However, for use in commercial projects and products we require that you purchase a commercial license.

mixitup.kunkalabs.com/licenses

At the time of writing, the single developer commercial license is $25.

Install Using Bower

Run the following line in your project root - Mixitup will be downloaded as a bower_component, and the project bower.json will be amended:

bower install bower-mixitup --save

The project bower.json now looks like this, with a new dependency:

{
  "name": "your-projectname",
  "homepage": "http://carawebs.com/",
  "authors": [
    "David Egan <david@carawebs.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "mixitup": "bower-mixitup#^2.0.4"
  }
}

Sage 8 uses the Asset Builder to pipeline assets. This results in an almost magical connecting up of resources, but it needs the imported project’s bower.json to reference the “main” file for the package. The Mixitup bower.json doesn’t do this, so an override must be added to the PROJECT bower.json, which now looks like this:

{
  "name": "your-projectname",
  "homepage": "http://carawebs.com/",
  "authors": [
    "David Egan <david@carawebs.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "mixitup": "bower-mixitup#^2.0.4"
  },
  "overrides": {
    "mixitup": {
      "main": ["./src/jquery.mixitup.js"]
    }
  }
}

In this example, the main file referenced is an un-minified version - which can make debugging easier. You may as well add the unminified version, since the Sage asset pipeline handles minification.

Adding this allows Asset Builder to grab the imported file and build it into the asset pipeline - which lead us on to the next step.

Add to manifest.json

Adding a proper reference to the bower-installed project in the /assets/manifest.json file will result in a minified asset being built into the dist directory when gulp is run.

Now the asset can be conditionally enqueued where it is needed (it could alternatively be built into main.js).

Enqueuing

To stick with the Sage convention, add your enqueue to the assets() function in /lib/setup.php. For example:

<?php
if( is_post_type_archive( 'project' ) ) {
    wp_enqueue_script('mixitup', Assets\asset_path('scripts/mixitup.js'), ['jquery'], null, true);
    wp_enqueue_script('filter', Assets\asset_path('scripts/filter.js'), ['jquery'], null, true);
  }

Setting Up

  • Create HTML with the right container and filterable elements
  • Add/enqueue JavaScript to initiate and control mixitup
  • Create a HTML filter

Note: By default, MixitUp looks for elements with the class .mix and designates these as filterable elements. You can override this, but if you don’t, and your filter elements don’t have the .mix class, MixItUp isn’t going to work.


comments powered by Disqus