Add MixitUp to a Sage Project
MixItUp, Sage, WordPress
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.
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:
The project bower.json
now looks like this, with a new dependency:
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:
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:
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