Advanced Customizations

5 min read Updated

Add a snippet to your child theme’s functions.php file, to a custom plugin, or to the Code Snippets plugin. In Code Snippets, set each snippet on this page to run everywhere, or on the front end only.

The snippets do not start with an opening PHP tag. If you add them to a file that has none, add <?php at the top of that file first.

Web Fonts

Many widgets have font settings. When you choose a Google Font, the widget loads that font from Google Fonts.

Stop the Widgets Bundle From Loading Google Fonts

This snippet stops the Widgets Bundle from loading Google Fonts. Your font settings stay in place, and the widget CSS still names the font. The font shows only if your site loads it in another way, for example as a self-hosted font. If it does not, the browser uses a fallback font.

add_filter( 'style_loader_src', function( $src, $handle ) {
	if ( strpos( $handle, 'sow-google-font-' ) === 0 ) {
		return false;
	}

	return $src;
}, 10, 2 );

Load Fonts From Bunny Fonts

Bunny Fonts uses the same URL format as Google Fonts. This snippet loads the widget fonts from Bunny Fonts in place of Google Fonts.

add_filter( 'siteorigin_web_font_url', function( $url ) {
	return 'https://fonts.bunny.net/css';
} );

Preload the Slider Navigation Font

The Image Slider, Hero Image and Layout Slider widgets use a small font file, slider.woff, for their navigation arrows. Speed tests can suggest that you preload it. This snippet adds a preload link to the head of your pages. It uses the wp_preload_resources filter from WordPress.

Only preload the font on pages that show a slider. If the page does not use the font, the browser downloads it for nothing and can show a warning. Change the is_front_page() check to match the pages where you use a slider.

add_filter( 'wp_preload_resources', function( $resources ) {
	// Change this check to match the pages that show a slider.
	if ( ! is_front_page() || ! defined( 'SOW_BUNDLE_BASE_FILE' ) ) {
		return $resources;
	}

	$resources[] = array(
		'href'        => plugins_url( 'css/slider/fonts/slider.woff', SOW_BUNDLE_BASE_FILE ),
		'as'          => 'font',
		'type'        => 'font/woff',
		'crossorigin' => 'anonymous',
	);

	return $resources;
} );

The preload URL must match the URL that the slider CSS uses. If a plugin moves or combines your CSS files, check the font URL in your browser’s developer tools.

Scroll Offset

The Accordion, Tabs, Blog and Contact Form widgets can scroll the page. You turn this on or off with the Scroll Top global setting. Read Widget Global Settings. If your site has a sticky header, the header can cover the top of the widget. A filter changes the offset, in pixels.

For the Accordion Widget, the default offset is 90. This snippet sets it to 120, to leave more space above the panel:

add_filter( 'siteorigin_widgets_accordion_scrollto_offset', function( $offset ) {
	return 120;
} );

Use the same pattern with these filters:

  • siteorigin_widgets_accordion_scrollto_offset: Accordion. Default: 90. The space above the panel.
  • siteorigin_widgets_tabs_scrollto_offset: Tabs. Default: 90. The space above the widget.
  • siteorigin_widgets_blog_scrollto_offset: Blog. Default: 90. The space above the widget.
  • siteorigin_widgets_contact_scrollto_offset: Contact Form. Default: 0. The widget adds this value to the form position, so use a negative number, for example -100, to leave space above the form.

For the Accordion and Tabs widgets, use a value above 0. If the value is 0, the widget uses its built-in fallback.

Widget CSS Files

The Widgets Bundle writes the CSS for each widget design to a file in wp-content/uploads/siteorigin-widgets/. If you use a plugin that logs file changes, it can report changes in this folder. This is normal.

The Widgets Bundle deletes all of these files when:

  • A plugin is activated.
  • You switch your theme.
  • WordPress installs or updates a plugin or theme.
  • The first admin page loads after the Widgets Bundle updates to a new version.

Once a week, when someone loads an admin page, the Widgets Bundle also deletes the files that are more than a week old.

A deleted file comes back the next time a page shows that widget. When you change a widget’s design, the Widgets Bundle writes a new file for it the next time a page shows the widget.

Useful Filters

These filters are a good place to start. In a filter name, {id_base} is the widget ID, for example sow-button, sow-hero or sow-google-map.

  • siteorigin_widgets_active_widgets: changes the list of enabled widgets.
  • siteorigin_widgets_admin_menu_capability: sets the user capability needed to manage widgets at PluginsSiteOrigin Widgets. Default: manage_options.
  • siteorigin_widgets_widget_folders: adds folders that hold your own widgets.
  • siteorigin_widgets_form_options_{id_base}: changes the fields in a widget form.
  • siteorigin_widgets_settings_form_{id_base}: changes the fields in a widget’s global settings.
  • siteorigin_widgets_instance_{id_base}: changes a widget’s saved values before the widget shows them.
  • siteorigin_widgets_template_variables_{id_base}: changes the variables that the widget template receives.
  • siteorigin_widgets_template_file_{id_base}: uses your own template file for a widget. The file must be a PHP file.
  • siteorigin_widgets_wrapper_classes_{id_base}: adds classes to the widget wrapper.
  • siteorigin_widgets_less_variables_{id_base}: changes the values that the widget uses to build its CSS.
  • siteorigin_web_font_url: changes the URL that the Widgets Bundle loads web fonts from.
  • siteorigin_widgets_post_carousel_breakpoints: changes the default breakpoints of the Post Carousel Widget.
  • siteorigin_widgets_block_exclude_widget: makes a widget block render again on each page view, in place of the markup that the Block Editor stored.

For more, read the developer documentation.