Customize Beaver Builder’s Social Media Icons

Beaver Builder logo

Here at Sterner Stuff, we find that many of our clients benefit from using a flexible and performant theme that can fit a variety of needs. It helps us deliver projects faster, and for many small businesses, it’s a great fit for their needs. We turn to Beaver Builder to fill this role.

While most of Beaver Builder’s features are configurable via the WordPress admin, we occasionally get to dive into the code to make some adjustments (always using a child theme, of course).

We recently were handed a project where the designer wanted social media icons in a certain order based on their importance. Out of the box, Beaver Builder will show and hide icons based on whether you’ve configured them with a URL for your social media profile, but it doesn’t have an interface for reordering them.

Fortunately, it’s pretty simple to do via code. Here we go:

function social_icons( $icons ) { // The icons we want to prioritize. // Dump the filter's argument to see all your options $first_icons = [ 'facebook', 'instagram', 'twitter', ]; // Merge our array with the original minus ours return array_merge( $first_icons, array_diff($icons, $first_icons) ); } add_filter( 'fl_social_icons', 'arrange_social_icons' );

And done. Easy.

Are You a Do-It-Yourself WordPress-er?

If you aren't ready to invest in Sterner Stuff, I've got something for you! Check out my new (and free) WordPress for Small Business Owners email course!

Leave a reply

Your email address will not be published. Required fields are marked *