need to load kadence-blocks-accordion for a custom shortcode wrapper
-
Originally when the site was built, one of the three or four kadence theme’s site footer bars, had an accordion in it containing a couple different forms with different purposes. Thus, when a custom shortcode was created to incorporate various Trade pricing groups wrapped in some of the kadence-blocks accordion wrappings, things just worked.
Now, the client wants to remove that footer widget and have a single short contact form that appears in every page-top, but sans-accordion, so now the custom shortcode is left stranded because it wasn’t built to automatically pull in the kadence-blocks-accordion scripts/styles — originally it didn’t need to.
What would I add to the functions.php or to the shortcode to make sure that the kadence-blocks-accordion scripts and styles are properly enqueued at the correct time, either for the site or alternately solely by the use of the shortcode ?
-
Both Kadence and Kadence Blocks are active on the site (theme and plugin)
The shortcode is building the Kadence-accordion-like from partials so it can add dynamic content from ACF and classes of its own on the fly, and style it and have it behave according to the designer’s wishes.
// pardon the long lines function _c1_pricing_accordion_shortcode( $atts = array() ) { if (! class_exists('ACF') ) { return <<<HTML <div class="alert alert-warning">Unable to display content block 'pricing accordion': Advanced Custom Fields has been disabled. Please enable Advanced Custom Fields plugin for this functionality.</div> HTML; } $_c1_buffer = ''; extract( shortcode_atts( array( 'taxonomy' => '', 'taxonomy_slug' => '', 'wrapper_class' => 'accordion-services', 'post_list' => '', ), $atts )); if ( ! empty( $taxonomy ) ) { // do a taxonomy based query $q = new WP_Query( array( 'post_type' => 'trade_pricing', 'tax_query' => array( array( 'taxonomy' => $taxonomy, 'field' => 'slug', 'terms' => $taxonomy_slug, ) ), ) ); } elseif ( ! empty( $post_list ) ) { // do a posts cross-sectional query by list of post ids // return the list in the same order as provided to the shortcode parameter $my_posts = explode(' ', $post_list); $q = new WP_Query( array( 'posts_per_page' => -1, 'post_type' => 'trade_pricing', 'post_status' => 'publish', 'post_name__in' => $my_posts, 'orderby' => 'post_name__in', ) ); } else { wp_reset_postdata(); return; } // why was this in with kt-accordion-wrap ? <!-- kt-accordion-has-9-panes --> $_c1_buffer .= <<<HTML <div class="wp-block-kadence-accordion alignnone {$wrapper_class}"> <div class="kt-accordion-wrap kt-accordion-wrap kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right" style="max-width:none"> <div class="kt-accordion-inner-wrap kt-accordion-initialized" data-allow-multiple-open="false" data-start-open="0"> HTML; $random_id = random_int(100000, 999999); while ($q->have_posts() ) { $q->the_post(); $_title = get_the_title(); $_price_perhour = get_field('price_per_hour'); $_price_range = get_field('price_range'); $_description = get_field('price_description'); $_bullets = get_field('pricing_item_list'); $_c1_buffer .= <<<HTML <div class="wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1"> <div class="kt-accordion-header-wrap"> <button class="kt-blocks-accordion-header kt-acccordion-button-label-show" id="kt-accordion-header-{$random_id}" aria-controls="kt-accordion-panel-{$random_id}" data-kt-accordion-header-id="0" aria-expanded="false"> <span class="kt-blocks-accordion-title-wrap"><span class="kt-blocks-accordion-title"><strong>{$_title}</strong> — {$_price_perhour} /HR {$_price_range}</span></span> <span class="kt-blocks-accordion-icon-trigger"></span> </button> </div> <div class="kt-accordion-panel kt-accordion-panel-hidden" id="kt-accordion-panel-{$random_id}" aria-labelledby="kt-accordion-header-{$random_id}" data-panel-height="auto" style=""> <div class="kt-accordion-panel-inner"> <span class="lead">{$_description}</span> {$_bullets} </div> </div> </div> HTML; $random_id++; // bump our randid so we have separate aria control numbers for each pane } $_c1_buffer .= <<<HTML </div> </div> </div> HTML; wp_reset_postdata(); return $_c1_buffer; } add_shortcode('trade_pricing', '_c1_pricing_accordion_shortcode');as you can see, it does not load the necessary scripts/styles from kadence blocks on its own, when called (as it probably should have) due to the fact that the site already had an omnipresent accordion in the footer, so at the time this was put together, it wasn’t obvious that it needed to.
so the question remains, What *specifically* would I add to the shortcode to make sure that the kadence-blocks-accordion scripts and styles are properly enqueued at the correct time, by the use of the shortcode within the page if they have not already?
And to be clear, I do already know how to include a js or css file with wp_enqueue_style/wp_enqueue_script, as well as how to tell it it has dependencies – what I don’t know is -with specificity-, how Kadence developers would prefer that I call this specific blocks’ specific scripts and styles in the correct way such that it won’t conflict with other use of kadence-blocks-accordion on any given page of the site
- The topic ‘need to load kadence-blocks-accordion for a custom shortcode wrapper’ is closed to new replies.
