- This topic has 2 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
Hey Daron,
I am working on a site similar to http://governorsballmusicfestival.com/ where we are using ACF Widgets to create a masonry layout with various content blocks (powered by custom widgets). The issue I am running into with this new project is that we want the ability to be able to specify something like “1 Column”, “2 Columns”, or “3 Columns” for the width, but I would need this custom field value to output on the div the widget is wrapped in and not in the custom template AND this also has to be dynamic (i.e. I can’t target specific widget IDs in the functions file). Does this make sense and is this possible?
Thanks,
Josh
Hey Josh! Sorry I’m a little late on the reply.
While there isn’t a way to do this with something like a filter or action hook in ACFW, I think it could be achieved with JS fairly easily. Add that attribute on an inside element and use JS to traverse up the DOM to add the appropriate markup. If you use a loading screen or if the page is small, the load time should be negligible.
Hope this helps!
Hey Daron,
Meant to respond earlier but just haven’t had the chance. Prior to seeing your response I ended up working it out by doing it in the functions.php file globally for all widgets and seems to be working well for my purposes so far. For reference, the code i’m using is:
add_filter('dynamic_sidebar_params', 'before_widget_custom_classes'); function before_widget_custom_classes( $params ) { // get widget vars $widget_id = $params[0]['widget_id']; $hide_title = get_field('hide_title', 'widget_' . $widget_id); $border_color = get_field('border_color', 'widget_' . $widget_id); $custom_color = get_field('color', 'widget_' . $widget_id); $no_padding = get_field('remove_padding', 'widget_' . $widget_id); $col_width = get_field('column_width', 'widget_' . $widget_id); if ( $no_padding == 1 ) { $no_padding_class = 'no-padding'; } if ( $hide_title == 1 ) { $hide_title_class = 'no-title'; } if( $col_width || $border_color || $no_padding || $hide_title) { $params[0]['before_widget'] = preg_replace( '/class="widget/', "class=\"widget widget-{$col_width} border-{$border_color} {$no_padding_class} {$hide_title_class}", $params[0]['before_widget'], 1 ); } if( $border_color == 'custom' && $custom_color ) { $params[0]['after_widget'] .= '<style type="text/css">'; $params[0]['after_widget'] .= sprintf('#%s { border-color: %s; }', $widget_id, $custom_color); $params[0]['after_widget'] .= '</style>'; } // return return $params; }
- You must be logged in to reply to this topic.