What is MixItUp?

MixItUp is a high-performance, dependency-free Javascript library for animated filtering, sorting, insertion, removal and more… It is different from Isotope in that MixItUp works very nicely with your layout if you need to use percentage, media queries, inline-block, CSS3 columns, or Flexbox.

Core Features

• Filter and sort with CSS3-optimised animations
• Build on top of your existing percentage-based responsive layouts and media queries
• Control filtering and sorting via a simple clickable interface or build more complex custom UI via an extensive API
• Customise your animations with CSS3 transforms and easing
• Perform simultaneous filter, sort, and layout change operations

MixItUp 3

MixItUp 3 was introduced in December 2016. It brought about several changes. First, it dropped JQuery as a dependency. With MixItUp 3, we can now interact with MixItUp instances (‘mixers’) directly with minimal abstraction. Second, MixItUp adds many new configuration options, and renames or removes some of those from MixItUp 2. Third, mixers are instantiated synchronously and instantly with no loading animation. Because of this, it is assumed that all targets in the DOM are already shown, so MixItUp only needs to add  display: none; to those targets to be hidden, using whatever display value is declared in your CSS for shown targets. In other words, you don’t need to set display: none;  in CSS. Simply use whatever display value your design requires, regardless of MixItUp.

How to Start?

Step 1

Please visit Kunka Labs MixItUp 3  to download the latest version. Open the zip folder and go to “dist” folder. You will find  mixitup.min.js  in this folder. Add this code to your footer.php before the  </body> tag.

<script type="text/javascript"  src="<?php bloginfo('template_url'); ?>/js/mixitup.min.js"></script>
</body>
</html>

Step 2

Next, you need to build the controls for filtering or sorting. You will need to use WordPress get_categories() API to render MixItUp controls. In your “Posts” or your custom Portfolio posts, you can add several categories. One thing to note is that you don’t need to create “All” category. MixItUp does that for you.

This picture is an example of how one can create categories within the “Posts” or your custom Post menu.


Step 3

After creating the categories, you will need to add the category urls to your portfolio or custom page. One thing to know is that while you may use any clickable element as a control, <button> is recommended for accessibility.

You will need to add the code that will allow you to add or remove the categories that you made in the “Posts” page. Therefore, this is the code you use for WordPress, in which you can use the WordPress get_categories() API to render MixItUp controls.

<div class="controls">
    <!-- Get a list of all categories in the database, excluding those not assigned to posts -->

    <?php
    $all_categories = get_categories(array(
        'hide_empty' => true
    ));
    ?>

    <!-- Iterate through each category -->

    <?php foreach($all_categories as $category): ?>
        <!-- Output control button markup, setting the data-filter attribute as the category "slug" -->

        <button type="button" data-filter=".<?php echo $category->slug; ?>"><?php echo $category->name; ?></button>
    <?php endforeach; ?>
</div>

This code above display the category links that you created in the “Posts” page. However, if you want to add the “All” button, you can add this line:

<button type="button" class="filter" data-filter="all" class="selected">All</button>

 to the code above, before this line:

<?php
    $all_categories = get_categories(array(
        'hide_empty' => true
    ));
    ?>

This is the final code with the “All” button.


<div class="controls">
    <!-- Get a list of all categories in the database, excluding those not assigned to posts -->

    <button type="button" class="filter" data-filter="all" class="selected">All</button>

    <?php
    $all_categories = get_categories(array(
        'hide_empty' => true
    ));
    ?>

    <!-- Iterate through each category -->

    <?php foreach($all_categories as $category): ?>
        <!-- Output control button markup, setting the data-filter attribute as the category "slug" -->

        <button type="button" data-filter=".<?php echo $category->slug; ?>"><?php echo $category->name; ?></button>
    <?php endforeach; ?>
</div>

Step 4

We will now create the portfolio section in which one can display their content/targets such as photos, projects, artworks, etc. To do so, one will need to create a custom WordPress “post loop” to render MixItUp targets. Here is the basic code although you can still customize this code for your needs.

<div class="container">
    <!-- Iterate through each post -->

    <?php while(have_posts()) : the_post(); ?>

        <!-- For each post, construct a space-seperated list of its category "slugs" to function as class names -->
        <!-- e.g. "web-design ux-design typography" -->

        <?php
        $categories = get_the_category();
        $slugs = wp_list_pluck($categories, 'slug');
        $class_names = join(' ', $slugs);
        ?>

        <!-- Output markup for each post, including the post's "permalink", and the list of category "slugs" -->

        <a href="<?php the_permalink(); ?>" class="mix<?php if ($class_names) { echo ' ' . $class_names;} ?>">
            <!-- Post content -->
        </a>
    <?php endwhile; ?>
</div>

Step 5

This is the last step, customizing the functionality of MixItUp. For example, you can easily edit the speed of the animation, the effects, filtering or sorting, and so on. To learn more about this, check out this documentation,  “Configuration Objects”.

In order to customize the functionality, you will need to create a custom javascript file and add the link under the in the footer.php.

In the custom javascript file, you will need to add the following code:

var containerEl = document.querySelector('.container');

The .container is connected to the portfolio section. Next, you will need to add the following code:


var mixer = mixitup(containerEl, {
animation: {
duration: 300
}
});

It’s up to you to customize the configurations objects inside  var mixer.
Now that you have completed the major steps, it is now up to you to edit the layout, the animations, and so on… If you have any questions, please check out the  Tutorials  at Kunka labs, search Google or ask questions at StackOverflow. If all else fall, I might be able to help you although I am also an intermediate WordPress developer.