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 Ehrig, the developer of Bricks Builder, the plugin can do much more. In our agency it is part of the standard stack, simply to keep order in custom post types but also to keep order in the pages.
Pages do not have taxonomies by default in WordPress. Something that can be annoying if the customer requirement is to create and manage the content completely in pages due to URL structures. Here is a short tutorial which shows that you can not only tidy up your pages but also style them dynamically.
The requirement
We build a fictitious Pokemon fan page (yes, I’m over 40 and still play Pokemon Go 😉 ). If you don’t know the game, in Pokemon players are divided into factions that are yellow, blue and red.
We would like to create player profiles that are kept in the color theme of their faction. Since faction changes are possible, the whole thing should be easily possible via the backend.
The implementation
First we need some custom code for the functions.php (my recommendation) or your script manager like WPCodebox.
Script 1 – find out if child folders exist
/* Take the main folder ID, determine the subfolders and write them into an array. Check the contents of the array for terms. Return true / false */
function hf_ftree($cid) {
global $post;
$cat = 'hf_cat_page';
$ancestor = get_term_children($cid, $cat);
$ancestor[] = intval($cid);
return has_term($ancestor, $cat);
}The script checks whether the corresponding category “hf_cat_page” has child elements. Translated, this means that it checks whether the Happyfiles folder in the Pages section has subfolders.
Script 2 – Check if page is in a happyfiles ordner and add css class
/**
* filter for parent page ids to connect the correct theme
*/
add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
if ( hf_ftree('43') ) {
$classes[] = 'theme-red';
} elseif
( hf_ftree('42') ) {
$classes[] = 'theme-blue';
} elseif
( hf_ftree('43') ) {
$classes[] = 'theme-yellow';
}
return $classes;
};The second script now checks whether a page has the selected Happyfiles ID and assigns the corresponding theme CSS class to the body.
You need to change the IDs of “hf_ftree” to yours. If you use other class names then in the example your need to change them to. An easy way to find out the ID of the category is to right-click on the folder, select Gallery Shortcode and take the ID from the shortcode.
Script 3 – The CSS
I use a ACSS Class naming in this example. How you want to name it is your choice. You can add more colors, img variables, darkmode and many more. Your imagination is the limit.
/* Custom Themeclasses */
/* red */
.theme-red {
--primary: #c13030;
--primary-light: #e5c2c2;
--primary-dark: #261717;
--primary-ultra-dark:#1a0f0f;
}
/* blue */
.theme-blue {
--primary: #7FB8E4;
--primary-light: #BCDEF6;
--primary-dark: #0D1216;
--primary-ultra-dark:#0e151a;
}
/* yellow */
.theme-yellow {
--primary: #d2a139;
--primary-light: #f1e3c3;
--primary-dark: #2d230c;
--primary-ultra-dark: #1a1407;
}How to use it?
Simply create a page. Build your layout as you wish and use your css variables. Put the page in the best fitting happy files folder.
The result
Here a short demo of what we created. I forget something when recording the video. Every profile page has a meta field for the team membership (red, blue, yellow). I forget to set the values so every value is red. 😉
Now you can start to add more designelements and add the pokemon collection of the player as relationship element with ACF. 🙂
But in the end: that’s it! Looking forward to see what you guys creating with this! If you like write some ideas in the comments also as feedback, critique or improvements!
Bonus:
Do you guys know that you can download a whole media happy files folder with three clicks? Very handy if you have installations with a lot of icons, pictures or other ressources and don’t want to copy single links or go th (s)FTP route.
