30th Jul '22
/
5 comments

Output HappyFiles Folders in Metabox Select-Field

This tutorial is part of a series where I’m gonna show you how to output custom HappyFiles Galleries and Sliders. Part one will cover a little Meta Box Integration, so you can also manage the galleries and sliders inside your Bricks’ single templates.

Bricks 1.5.0 will introduce the possibility to query against the post_type “attachment” which will bring the opportunity to query after HappyFiles folders. That’s the major reason for me to separate this tutorial in different steps as you would still need this step of the tutorial for outputting it dynamically to your single template.

Register the code first

First, you need to copy & paste the provided PHP Snippet to fetch all HappyFiles folders and output them in the correct format for MetaBox.

In case you don’t know where to place that snippet I recommend you to download & install the child theme from your Bricks account and paste the snippet in the functions.php file of it!

<?php
function get_happyfile_folders() {
    $outputChilds = true;
    $args = [
        "taxonomy" => "happyfiles_category",
        //"slug" => "downloads", // get Folder by slug
        "orderby" => "name",
        "order" => "ASC",
        "hide_empty" => false,
    ];

    $folders = get_terms( $args );

    $selectOptions = [];
    foreach ( $folders as $folder ) {
        if ( ! $outputChilds && $folder->parent != 0 ) {
            continue;
        }
        $selectOptions[$folder->term_id] = $folder->name;
    }
    return $selectOptions;
}
?>

From now on you have acces to the function get_happyfile_folders() which basically only looks for all HappyFiles folders and returns them in the needed format.

Parameters ($outputChild)

If you don’t want to have the option to select child folders then you should definitely switch $outputChilds to false.

Add your MetaBox Fields

Next, you have to add your Metabox fields. I normally use MetaBox for CPTs like Job Listings for all the stuff that can be standardized. I’ve developed the snippet above for a customer who sells Fences. So my CPT was about the different fence types and he could choose which HappyFiles gallery he wants to show on which post type and he is also able to easily keep the reference images up to date.

With that being said as a short demo use-case, you’ll need to register your MetaBox Fields. That snippet above works very well with the MetaBox ‘select’ field. But instead of passing your options you would need to provide the callback-function like so:

HF_MB-Integration

In clean words: callback: get_happyfile_folders

Validate the functionality

We haven’t created an output yet, but from now you should be able to choose a folder from your select-dropdown. You can test it out on your posts.

HF_MB-Integration(2)

How to get the corresponding Images/Files on Frontend (preview)

I’m gonna provide the steps on how to query after the Images/Files on Frontend. Feel free to use that code if you are, like me, impatient and can’t wait for the follow-up guides! 😉

function output_happyfiles() {
    // ENTER THE ID OF YOUR METABOX-FIELD HERE:
    $hf_id = rwmb_meta( 'ID-OF-YOUR-MB-FIELD-GOES-HERE' );
    $args = [
        "post_type" => "attachment",
       // "post_mime_type" => "image",
        "post_status" => "inherit",
        "posts_per_page" => -1,
        "tax_query" => [
            [
                "taxonomy" => "happyfiles_category",
                "field" => "ID",
                "terms" => $hf_id,
            ],
        ],
    ];

    $hf_query = new WP_Query( $args );
    
    // you could probably loop here through the resulsts and output the images!
    return $hf_query->posts;
}
Get access to all 609 Bricks code tutorials with BricksLabs Pro

5 comments

  • Travis Reason

    I'd love to be able to use this setup. How do we output the images in a gallery on the frontend? I can't find the rest of this series.

  • oli thompson

    Hi Sridhar, Hopefully this may be a clearer explanation...

    I am basically trying to copy this video tutorial by Nicholas Arce https://www.youtube.com/watch?v=7BDK16bxv3k&t=769s

    In this video he is trying to combine the an archive and category templates. Effectively I would just like to create just one archive page that shows category pages. These category pages are defined by the happyfiles folders in the media library (where the images are placed).

    > So the images are organised within a happyfiles media folders > In a custom post type the taxonomy field (category) is selected > The custom post type archive page queries to the following... ---> Category: Name / featured image

    My project looks like his although I haven't added any of the dynamic data queries.

  • oli thompson

    Hi Wolfgang,

    I was just following your great tutorial, which I want to adapt into my project. I was wondering if there is a way to go further to create some kind of taxonomy for media folders.

    My intended use case is to create an archive template for an artist website. On the website there is a commissions "archive" page (including paintings, drawings, sculptures and prints). Within each archive page item there is a separate gallery of images.

    If I am creating media folders for each "archive" page (including paintings, drawings, sculptures and prints) it seems that it could be simpler if I could set the taxonomy of the media folder and link that to my custom post type (so that I would not have to label and sort my media files and post type taxonomies separately.

    Would be really Interested to hear how to might approach this best, Many Thanks, Oli

Leave a Reply to Travis Reason (Cancel Reply)

 

Related Tutorials..

Pro
Meta Box Related Project’s Featured Image URL on Single Reviews

Meta Box Related Project’s Featured Image URL on Single Reviews

Updated on 26 Jun 2025 In a recent website I worked on, a requirement was to get the URL of the featured image of a…
Pro
Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

Bricks Dynamic Data Tag for Text-type Custom Field Value with Word Limit

How to register a new dynamic tag for setting excerpt word limits and outputting an ellipsis (...) at the end.
Categories:
Pro
Dynamic Post-specific Templates in Bricks using Meta Box/ACF Select Field

Dynamic Post-specific Templates in Bricks using Meta Box/ACF Select Field

Update on 23 Aug 2023: Added steps for ACF. Bricks builder v1.8.4 introduced an pretty useful filter called bricks/active_templates that flew under the radar. This…
Pro
Custom Meta Box Thumbnail Slider in WordPress

Custom Meta Box Thumbnail Slider in WordPress

This Pro tutorial provides the steps to set up an image and YouTube video thumbnail slider in WordPress using Splide and Meta Box. The site…
Categories:
Tags:
How to create custom colorthemes for your website with happyfiles

How to create custom colorthemes for your website with happyfiles

Happy Files is certainly known to many as the media management of the Wordpress media library, which is in dire need of improvement.
Developed by Thomas…
Pro
Filtering Query Loop Posts by a Non-empty Custom Field in Bricks

Filtering Query Loop Posts by a Non-empty Custom Field in Bricks

This Pro tutorial shows how we can prefilter the results of a query output by a Bricks query loop to only those for which the…
Categories:
Tags:
Pro
Meta Box Settings Fields in Bricks

Meta Box Settings Fields in Bricks

This Pro tutorial is the equivalent of our earlier ACF Options Fields in Bricks article but when using Meta Box. While retrieving the values of…
Categories:
Tags:
Pro
Filtering posts by a group field’s subfield value with Meta Box when using a custom table in Bricks

Filtering posts by a group field’s subfield value with Meta Box when using a custom table in Bricks

Filtering a query loop to output only those posts with the value of a Select subfield of a Group field set to Yes when using…
Categories:
Tags:
Pro
Meta Box Relationship Posts Filtered by a Taxonomy Term in Bricks

Meta Box Relationship Posts Filtered by a Taxonomy Term in Bricks

Updated on 17 Feb 2025 In the Inner Circle a user asks: Hello, I have a relationship made in metabox between two Post Types “Travel”…
Categories: