Customize Beaver Builder’s Social Media Icons

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' );Code language: PHP (php)

And done. Easy.