How to install Mixitup plugin on your WordPress website ?

Here are the general steps you would need to take to install and use MixItUp on your WordPress website:

  1. Download the MixItUp library from the official website: mixitup.kunkalabs.com



  2. Extract the downloaded package and copy the mixitup.min.js file and the src folder.



  3. In your WordPress theme, create a new folder called js and paste the mixitup.min.js file in it.
    • First, log into your WordPress website using an FTP client, such as FileZilla, or through the file manager in your hosting control panel.
    • Navigate to the root folder of your WordPress installation, which should contain the wp-content, wp-admin, and wp-includes folders.
    • Locate the folder for your active theme. It should be in the wp-content/themes/ folder.
    • Create a new folder inside your active theme folder, and name it “js”.
    • Once the “js” folder is created, upload the “mixitup.min.js” file into it.
    • Verify that the file has been uploaded and is in the correct location by checking the “js” folder in your active theme folder using your FTP client or file manager.



  4. In your theme’s header.php file, add the following code to enqueue the MixItUp library:
    • Log into your WordPress website using an FTP client, such as FileZilla, or through the file manager in your hosting control panel.
    • Navigate to the root folder of your WordPress installation, which should contain the wp-content, wp-admin, and wp-includes folders.
    • Locate the folder for your active theme. It should be in the wp-content/themes/ folder.
    • Open the folder and locate the “header.php” file, it’s usually in the root of the theme folder.
    • Open the “header.php” file using a code editor, such as Notepad++ or Sublime Text.
    • Look for the “head” section of the file, it should be near the top of the file, it typically starts with <head> and ends with </head>.
    • Add the following code within the “head” section, right before the </head> tag.
<script src="<?php echoget_template_directory_uri(); ?>/js/mixitup.min.js"></script>



5. Now you need to create a container for your AI tools and give it a class name “mix-container”. This container will be used to filter and sort the AI tools.

<div class="mix-container"> <!-- Your AI tools here --> </div>





6. Create a control container that will hold the filter and sort buttons, you can use the class name “controls” for it.

<div class="controls"> <!-- Your filter and sort buttons here --> </div>





7. Add the class names to the AI tools. You can use the custom taxonomies you created to add the class names, for example, if you have a taxonomy named “tool_category” for your AI tools, you can add the class name as “category-{tool_category}”

<div class="mix <?php echo 'category-'.get_the_terms(get_the_ID(),'tool_category')[0]->name; ?>"> <!-- Your AI tool here -->



8. In your theme’s footer.php file, add the following code to initialize MixItUp and set up the filtering and sorting options:

<script> var mixer = mixitup('.mix-container'); </script>

This will initialize MixItUp on the container with the class “mix-container” and will apply the default filtering and sorting options.



  1. You can also add some options to customize the filtering and sorting behavior. For example, you can add a data-filter attribute to your filter buttons, and a data-sort attribute to your sort buttons, like this:
<button class="filter" data-filter=".category-seo">SEO</button> <button class="sort" data-sort="name:asc">Sort byName (A-Z)</button>





10. Once you have set up the filter and sort buttons, you need to add the following code to your footer.php to activate them.

<script> var mixer = mixitup('.mix-container', { selectors: { control: '.controls' } });</script>





This is a general guide for installing MixItUp and setting up filtering and sorting on a WordPress website, it may require some tweaking to fit your specific needs and your theme’s structure.

Please note that using MixItUp does require some technical knowledge and experience with HTML, CSS, and JavaScript, so it may be best to hire a developer or web designer to help you implement it on your website if you’re not comfortable with these technologies.

Additionally, make sure to test your website on different browsers and devices to ensure that MixItUp is working correctly and that there are no bugs or compatibility issues.

It’s also a good idea to keep the MixItUp library updated to ensure that it continues to work correctly and to take advantage of any new features and bug fixes that may be included in new releases.

Lastly, I want to remind you that this is a JavaScript library, so it won’t work if the user has JavaScript disabled on their browser, you can use a fallback solution or a different plugin if this is a concern.