# Snippets

**URL:** https://community.wpbeaverbuilder.com/c/customization/snippets/15.md

[Latest](https://community.wpbeaverbuilder.com/latest.md) · [Categories](https://community.wpbeaverbuilder.com/categories.md) · [Tags](https://community.wpbeaverbuilder.com/tags.md)

---

## [About the Snippets category](https://community.wpbeaverbuilder.com/t/about-the-snippets-category/8450)

<div class="topic-metadata">

**Author:** [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Replies:** 0\
**Last updated:** [May 9, 2019, 11:22pm UTC](https://community.wpbeaverbuilder.com/t/about-the-snippets-category/8450 "2019-05-09T23:22:56Z")

</div>

Helpful snippets of code to quickly customize Beaver Builder products.

---

## [Time Condition for Beaver Themer Conditional Logic](https://community.wpbeaverbuilder.com/t/time-condition-for-beaver-themer-conditional-logic/19587)

<div class="topic-metadata">

**Author:** [@avanti](https://community.wpbeaverbuilder.com/u/avanti)\
**Replies:** 1\
**Last updated:** [May 13, 2025, 10:58pm UTC](https://community.wpbeaverbuilder.com/t/time-condition-for-beaver-themer-conditional-logic/19587 "2025-05-13T22:58:30Z")

</div>

1 . Create a shortcode to compare the current time to a specific time range, and return true or false. start and end time are set in shortcode parameters, making it re-usable. add\_shortcode('check\_time\_range', 'check\_t…

---

## [Toggle button for showing and hiding a row](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770)

<div class="topic-metadata">

**Author:** [@Mars](https://community.wpbeaverbuilder.com/u/Mars)\
**Replies:** 16\
**Last updated:** [January 2, 2025, 7:59pm UTC](https://community.wpbeaverbuilder.com/t/toggle-button-for-showing-and-hiding-a-row/9770 "2025-01-02T19:59:22Z")

</div>

I created a similar effect for Elementor, but had issues doing the same for BB. wpbeaverworld was kind enough to show me how to do the same thing on BB. Here are the code snippets for implementing this custom functionali…

---

## [Change which module group is the default selected](https://community.wpbeaverbuilder.com/t/change-which-module-group-is-the-default-selected/8738)

<div class="topic-metadata">

**Author:** [@codepuncher](https://community.wpbeaverbuilder.com/u/codepuncher)\
**Replies:** 4\
**Last updated:** [August 8, 2024, 8:26pm UTC](https://community.wpbeaverbuilder.com/t/change-which-module-group-is-the-default-selected/8738 "2024-08-08T20:26:43Z")

</div>

Hi all, Using the snippet below, you can change the default module group from “Standard Modules” to a choice of your own. Requirements: PHP 7 illuminate/support package (provides Laravel Collections) \<?php declare(…

---

## [\<!--more--\> in BB text module](https://community.wpbeaverbuilder.com/t/more-in-bb-text-module/18760)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [July 16, 2024, 5:32pm UTC](https://community.wpbeaverbuilder.com/t/more-in-bb-text-module/18760 "2024-07-16T17:32:18Z")

</div>

add\_filter( 'fl\_builder\_render\_module\_content', function( $content, $module ) { if ( $module instanceof FLRichTextModule && strstr( $content, '\<!--more' ) ) { $content = str\_replace( '\<div class="fl-rich-text"\>', '…

---

## [Scrollspy setup for BB theme or anyone using Bootstrap 4 with BB](https://community.wpbeaverbuilder.com/t/scrollspy-setup-for-bb-theme-or-anyone-using-bootstrap-4-with-bb/18477)

<div class="topic-metadata">

**Author:** [@KevDev](https://community.wpbeaverbuilder.com/u/KevDev)\
**Replies:** 0\
**Last updated:** [April 15, 2024, 8:18pm UTC](https://community.wpbeaverbuilder.com/t/scrollspy-setup-for-bb-theme-or-anyone-using-bootstrap-4-with-bb/18477 "2024-04-15T20:18:36Z")

</div>

---

## [Remove attachments from link autosuggest results](https://community.wpbeaverbuilder.com/t/remove-attachments-from-link-autosuggest-results/18467)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 1\
**Last updated:** [April 11, 2024, 9:28pm UTC](https://community.wpbeaverbuilder.com/t/remove-attachments-from-link-autosuggest-results/18467 "2024-04-11T21:28:31Z")

</div>

add\_filter( 'fl\_builder\_auto\_suggest\_lookup', function( $data, $action ) { if ( 'fl\_as\_links' === $action ) { global $wpdb; $data = array(); $like = FLBuilderAutoSuggest::get\_like(); $types = FLBuilderLoop::…

---

## [Compile layout and global css with SCSS](https://community.wpbeaverbuilder.com/t/compile-layout-and-global-css-with-scss/18401)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [March 20, 2024, 1:45pm UTC](https://community.wpbeaverbuilder.com/t/compile-layout-and-global-css-with-scss/18401 "2024-03-20T13:45:01Z")

</div>

add\_filter( 'fl\_builder\_render\_css', function( $css, $nodes, $global\_settings, $include\_global ) { require\_once FL\_BUILDER\_DIR . 'includes/vendor/sass/autoload.php'; $compiler = new ScssPhp\\ScssPhp\\Compiler(); try { …

---

## [Change menu for logged in users](https://community.wpbeaverbuilder.com/t/change-menu-for-logged-in-users/18364)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [March 11, 2024, 1:30pm UTC](https://community.wpbeaverbuilder.com/t/change-menu-for-logged-in-users/18364 "2024-03-11T13:30:49Z")

</div>

Create new menu called logged-in then use following filter add\_filter( 'wp\_nav\_menu\_args', function( $args ) { if ( 'header' === $args\['theme\_location'\] && is\_user\_logged\_in() ) { $args\['menu'\] = 'logged-in'; } ret…

---

## [Allow HTML etc in Themer custom\_field connection](https://community.wpbeaverbuilder.com/t/allow-html-etc-in-themer-custom-field-connection/18363)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [March 11, 2024, 10:49am UTC](https://community.wpbeaverbuilder.com/t/allow-html-etc-in-themer-custom-field-connection/18363 "2024-03-11T10:49:29Z")

</div>

In Themer 1.4.9.1 custom\_fields are now passed through wp\_kses to strip any malicious HTML/JS to bypass this just add the following to your child theme functions.php add\_filter( 'fl\_theme\_builder\_custom\_field\_kses', '\_\_…

---

## [Remove WP Core colours from Global Colours](https://community.wpbeaverbuilder.com/t/remove-wp-core-colours-from-global-colours/18275)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [February 13, 2024, 7:29pm UTC](https://community.wpbeaverbuilder.com/t/remove-wp-core-colours-from-global-colours/18275 "2024-02-13T19:29:34Z")

</div>

add\_filter( 'fl\_wp\_core\_global\_colors', '\_\_return\_empty\_array' ); add\_filter( 'fl\_builder\_global\_colors\_json', function( $json ) { unset( $json\['themeJSON'\]\['color'\]\['palette'\]\['default'\] ); return $json; });

---

## [Remove Global Styles Menu Item](https://community.wpbeaverbuilder.com/t/remove-global-styles-menu-item/18271)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 1\
**Last updated:** [February 13, 2024, 10:06pm UTC](https://community.wpbeaverbuilder.com/t/remove-global-styles-menu-item/18271 "2024-02-13T22:06:23Z")

</div>

/\*\* \* Remove Globa Styles Menu Item \* Unless user ID is 1 \* @since 2.0 2017 \*/ add\_filter( 'fl\_builder\_main\_menu', function( $menu ){ if ( 1 !== get\_current\_user\_id() ) { unset( $menu\['main'\]\['items'\]\[61\] ); } r…

---

## [Global Styles, disable editing names](https://community.wpbeaverbuilder.com/t/global-styles-disable-editing-names/18272)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [February 13, 2024, 3:07pm UTC](https://community.wpbeaverbuilder.com/t/global-styles-disable-editing-names/18272 "2024-02-13T15:07:14Z")

</div>

FLBuilder.addHook( 'showGlobalStyles', function(){ setTimeout(function(){ jQuery('.fl-global-color-field-input' ).attr( 'disabled', 'disabled' ); }, 250 ); });

---

## [Javascript and relative links in urls](https://community.wpbeaverbuilder.com/t/javascript-and-relative-links-in-urls/18270)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [February 13, 2024, 2:11pm UTC](https://community.wpbeaverbuilder.com/t/javascript-and-relative-links-in-urls/18270 "2024-02-13T14:11:23Z")

</div>

As of 2.8 and 2.7.4.3 we have to use esc\_url to sanitize links to stop your websites getting hacked. This can cause issues when you add sample-page as a link, or something like javascript:SomeFunction() Tto get around …

---

## [Custom Order Beaver Builder Admin Bar Dropdown](https://community.wpbeaverbuilder.com/t/custom-order-beaver-builder-admin-bar-dropdown/17711)

<div class="topic-metadata">

**Author:** [@zackpyle](https://community.wpbeaverbuilder.com/u/zackpyle)\
**Replies:** 0\
**Last updated:** [September 6, 2023, 2:12pm UTC](https://community.wpbeaverbuilder.com/t/custom-order-beaver-builder-admin-bar-dropdown/17711 "2023-09-06T14:12:08Z")

</div>

This will let you customize the order of the BB Admin Bar dropdown. I wanted a order that makes more sense to me as that’s how it’s laid out on the page. Of course Parts can go anywhere, so I stuck them after the main co…

---

## [Add a label for named color presets](https://community.wpbeaverbuilder.com/t/add-a-label-for-named-color-presets/17482)

<div class="topic-metadata">

**Author:** [@seezee](https://community.wpbeaverbuilder.com/u/seezee)\
**Replies:** 1\
**Last updated:** [July 3, 2023, 7:05pm UTC](https://community.wpbeaverbuilder.com/t/add-a-label-for-named-color-presets/17482 "2023-07-03T19:05:59Z")

</div>

Is there a filter I can use to change the display of the color presets so that if I create a custom palette, I can label the various colors? This would make it much easier for my team to know they are using the correct c…

---

## [Use Bunny fonts for GDPR](https://community.wpbeaverbuilder.com/t/use-bunny-fonts-for-gdpr/17421)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [June 20, 2023, 2:24pm UTC](https://community.wpbeaverbuilder.com/t/use-bunny-fonts-for-gdpr/17421 "2023-06-20T14:24:56Z")

</div>

add\_filter( 'fl\_builder\_google\_fonts\_domain', function( $domain ) { return 'https://fonts.bunny.net/'; });

---

## [Inline assets when builder is open](https://community.wpbeaverbuilder.com/t/inline-assets-when-builder-is-open/17329)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [May 25, 2023, 3:16pm UTC](https://community.wpbeaverbuilder.com/t/inline-assets-when-builder-is-open/17329 "2023-05-25T15:16:20Z")

</div>

add\_action( 'init', function() { if ( isset( $\_GET\['fl\_builder'\] ) ) { add\_filter( 'fl\_builder\_render\_assets\_inline', '\_\_return\_true', 12 ); } });

---

## [Make class option a select for modules](https://community.wpbeaverbuilder.com/t/make-class-option-a-select-for-modules/14203)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 4\
**Last updated:** [February 27, 2023, 6:32pm UTC](https://community.wpbeaverbuilder.com/t/make-class-option-a-select-for-modules/14203 "2023-02-27T18:32:17Z")

</div>

Here is some example code: add\_filter( 'fl\_builder\_register\_settings\_form', function( $form, $id ) { if ( 'module\_advanced' === $id ) { $form\['sections'\]\['css\_selectors'\]\['fields'\]\['class'\]\['type'\] = 'select'; $for…

---

## [Change text that appear below the post](https://community.wpbeaverbuilder.com/t/change-text-that-appear-below-the-post/16448)

<div class="topic-metadata">

**Author:** [@mkb](https://community.wpbeaverbuilder.com/u/mkb)\
**Replies:** 0\
**Last updated:** [September 23, 2022, 3:59pm UTC](https://community.wpbeaverbuilder.com/t/change-text-that-appear-below-the-post/16448 "2022-09-23T15:59:18Z")

</div>

Hi, Below each post, it says “Posted in cat1, cat2”. How do I change the text “Posted in”? Best Wishes,

---

## [Show past posts only on post slider module](https://community.wpbeaverbuilder.com/t/show-past-posts-only-on-post-slider-module/15953)

<div class="topic-metadata">

**Author:** [@khartnett](https://community.wpbeaverbuilder.com/u/khartnett)\
**Replies:** 0\
**Last updated:** [May 17, 2022, 8:51pm UTC](https://community.wpbeaverbuilder.com/t/show-past-posts-only-on-post-slider-module/15953 "2022-05-17T20:51:44Z")

</div>

I have a Beaver Themer Archive page that uses the Posts Slider module to rotate through posts and would like to come up with a workaround to show only past posts in the slider. I have a custom query to show the ‘Events’ …

---

## [Rewrite urls in CSS for CDN/Bucket](https://community.wpbeaverbuilder.com/t/rewrite-urls-in-css-for-cdn-bucket/8746)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 2\
**Last updated:** [January 14, 2022, 2:22pm UTC](https://community.wpbeaverbuilder.com/t/rewrite-urls-in-css-for-cdn-bucket/8746 "2022-01-14T14:22:09Z")

</div>

Add the following to functions.php For CSS add\_filter( 'fl\_builder\_render\_css', function( $css, $nodes, $global\_settings, $include\_global ) { $site\_url = 'https://example.com'; $cdn\_url = 'https://123456abcdef.cloud…

---

## [Sticky Header on Mobile](https://community.wpbeaverbuilder.com/t/sticky-header-on-mobile/8457)

<div class="topic-metadata">

**Author:** [@Will](https://community.wpbeaverbuilder.com/u/Will)\
**Replies:** 9\
**Last updated:** [May 31, 2020, 3:31pm UTC](https://community.wpbeaverbuilder.com/t/sticky-header-on-mobile/8457 "2020-05-31T15:31:00Z")

</div>

Replace fl-builder-content-300 with your specific Part ID, try searching dev tools for the first listing of “fl-builder-content-” View full snippet.

---

## [Disable animations for mobile devices](https://community.wpbeaverbuilder.com/t/disable-animations-for-mobile-devices/8712)

<div class="topic-metadata">

**Author:** [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Replies:** 1\
**Last updated:** [August 31, 2021, 9:36pm UTC](https://community.wpbeaverbuilder.com/t/disable-animations-for-mobile-devices/8712 "2021-08-31T21:36:43Z")

</div>

Add the CSS below to your custom CSS to disable animations on mobile devices. @media (max-width: 768px) { .fl-animation { -webkit-animation: none !important; animation: none !important; -webkit-tra…

---

## [Grab an ACF field value from any post, using the post's ID](https://community.wpbeaverbuilder.com/t/grab-an-acf-field-value-from-any-post-using-the-posts-id/14343)

<div class="topic-metadata">

**Author:** [@nomad411](https://community.wpbeaverbuilder.com/u/nomad411)\
**Replies:** 1\
**Last updated:** [August 26, 2021, 8:56am UTC](https://community.wpbeaverbuilder.com/t/grab-an-acf-field-value-from-any-post-using-the-posts-id/14343 "2021-08-26T08:56:31Z")

</div>

// Use \[featured id='#my post ID' my\_field='#the ACF field name I want'\] function gg\_get\_field($attr){ $args = shortcode\_atts( array( 'id' =\> '1', 'my\_field' =\> 'featured' ), $attr ); ret…

---

## [Masonry infinite scroll event](https://community.wpbeaverbuilder.com/t/masonry-infinite-scroll-event/14431)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [May 5, 2021, 6:17pm UTC](https://community.wpbeaverbuilder.com/t/masonry-infinite-scroll-event/14431 "2021-05-05T18:17:00Z")

</div>

This gets asked a lot, we use WP core masonry so we can use its built in events. This example fires AFTER you click load more and AFTER masonry has added new posts (function($){ $(document).ready(function(){ …

---

## [Auto add json+ld for photo module images](https://community.wpbeaverbuilder.com/t/auto-add-json-ld-for-photo-module-images/14310)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [April 13, 2021, 9:14pm UTC](https://community.wpbeaverbuilder.com/t/auto-add-json-ld-for-photo-module-images/14310 "2021-04-13T21:14:28Z")

</div>

add\_action( 'fl\_builder\_before\_render\_module', function( $module ) { if ( $module instanceof FLPhotoModule ) { if ( ! empty( $module-\>settings-\>photo\_src ) ) { $output = ''; $parts = array( '@context' …

---

## [Use featured image in post navigation](https://community.wpbeaverbuilder.com/t/use-featured-image-in-post-navigation/14307)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [April 13, 2021, 4:10pm UTC](https://community.wpbeaverbuilder.com/t/use-featured-image-in-post-navigation/14307 "2021-04-13T16:10:54Z")

</div>

add\_filter( 'fl\_theme\_builder\_post\_nav', function( $args ) { $next\_post = get\_next\_post(); $previous\_post = get\_previous\_post(); if ( isset( $next\_post-\>ID ) ) { $args\['next\_text'\] = '\<span class="post-title"\>%…

---

## [Number module fetch number from api](https://community.wpbeaverbuilder.com/t/number-module-fetch-number-from-api/14236)

<div class="topic-metadata">

**Author:** [@pross](https://community.wpbeaverbuilder.com/u/pross)\
**Replies:** 0\
**Last updated:** [March 31, 2021, 3:55pm UTC](https://community.wpbeaverbuilder.com/t/number-module-fetch-number-from-api/14236 "2021-03-31T15:55:17Z")

</div>

add\_filter( 'fl\_builder\_node\_settings', function( $settings, $node ) { if ( 'module' === $node-\>type && 'my-classname' === $node-\>settings-\>class ) { // fetch number here via some remote API $settings-\>number = 7337…

---

## [Page break on WooCommerce products?](https://community.wpbeaverbuilder.com/t/page-break-on-woocommerce-products/14139)

<div class="topic-metadata">

**Author:** [@Alex\_de](https://community.wpbeaverbuilder.com/u/Alex_de)\
**Replies:** 0\
**Last updated:** [March 16, 2021, 3:13pm UTC](https://community.wpbeaverbuilder.com/t/page-break-on-woocommerce-products/14139 "2021-03-16T15:13:01Z")

</div>

Hello there, How to break a page in to the pages with WooCommerce products? To many products are displayed on one page. Thanx

[Next page](https://community.wpbeaverbuilder.com/c/customization/snippets/15.md?page=1)