Advanced Customizations

These code snippets change how SiteOrigin CSS works. Add them to your child theme’s functions.php file or to a code snippets plugin.

Use Your Own CSS File

By default, the plugin writes your CSS to wp-content/uploads/so-css/. The siteorigin_custom_css_file filter sets another file. Return an array with the file path (file) and its URL (url). If the file does not exist, the plugin creates it. The plugin must be able to write to it.

This example uses a file in the uploads folder:

add_filter( 'siteorigin_custom_css_file', function () {
	$upload_dir = wp_upload_dir();

	return array(
		'file' => $upload_dir['basedir'] . '/northfield-custom.css',
		'url'  => $upload_dir['baseurl'] . '/northfield-custom.css',
	);
} );

With this filter, the editor loads your CSS from the file, and each save writes to the file. Your site loads the file when CSS Output Location is Dedicated File, and prints its content in the page when it is Inline. The plugin also keeps a copy of your CSS in the database.

  • A new file is empty, so the editor is empty after you add the filter. Copy your CSS from the editor before you add the filter, then paste it back and click Save CSS.
  • Do not put the file in a theme folder. A theme update deletes it.
  • If you remove the filter later, go to AppearanceCustom CSS once. The plugin then writes the CSS from the database to its default file again.

Always Print the CSS in the Page

The siteorigin_css_enqueue_css filter decides whether the plugin links a CSS file (true) or prints the CSS in the page (false). The plugin sets it from the CSS Output Location setting. A filter with the default priority overrides the setting. This snippet always prints the CSS in the page:

add_filter( 'siteorigin_css_enqueue_css', '__return_false' );

Use '__return_true' instead to always link the file.

Add a Control to Visual Mode

The siteorigin_css_property_controllers filter changes the controls in Visual Mode. The controls are in three groups, one for each tab: text, decoration and layout. Each control has a title, a type and args with the CSS property.

This example adds a Cursor menu to the Layout tab:

add_filter( 'siteorigin_css_property_controllers', function ( $controllers ) {
	$controllers['layout']['controllers'][] = array(
		'title' => 'Cursor',
		'type'  => 'select',
		'args'  => array(
			'property' => 'cursor',
			'options'  => array(
				'default' => 'Default',
				'pointer' => 'Pointer',
			),
		),
	);

	return $controllers;
} );

The control types are color, measurement, number, select, image, sides and font_select. Any other type, such as the shadow and position types in the plugin’s own controls, shows a text field. To see how each type is set up, read inc/controller-config.php in the plugin.

Hide the SiteOrigin Premium Teasers

This snippet hides the Get The Full Experience box in the editor and the Addons link on the Plugins page:

add_filter( 'siteorigin_premium_upgrade_teaser', '__return_false' );

The filter is shared by SiteOrigin plugins, so it also hides their teasers.