Advanced Customizations

These customizations do jobs that Theme Settings do not cover. Add them to the functions.php file of a child theme or use the Code Snippets plugin. To add a snippet with Code Snippets:

1. Install and activate the Code Snippets plugin.
2. Go to SnippetsAdd New.
3. Name the snippet, paste the code, then click Save and Activate.

Each snippet has a different function name. You can use several snippets together. A function name must be unique, or PHP stops with an error. For hooks and filters that are not on this page, see Theme Action Hooks.

Fonts

Change from Google to Bunny Fonts

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

Mobile and Scrolling

Disable the Sticky Header on Mobile

This customization turns off the sticky header on screens narrower than the Mobile Menu Collapse value.

function siteorigin_corp_child_disable_mobile_sticky( $classes ) {
	$classes[] = 'mobile-header-ns';
	return $classes;
}
add_filter( 'body_class', 'siteorigin_corp_child_disable_mobile_sticky' );

Disable Responsive Layout

This customization changes the viewport width on mobile devices to 1280 pixels, so phones show the desktop layout scaled down.

function siteorigin_corp_child_fixed_viewport_setup() {
	remove_action( 'wp_head', 'siteorigin_corp_viewport_tag' );
}
add_action( 'after_setup_theme', 'siteorigin_corp_child_fixed_viewport_setup' );

function siteorigin_corp_child_fixed_viewport_tag() {
	echo '<meta name="viewport" content="width=1280" />';
}
add_action( 'wp_head', 'siteorigin_corp_child_fixed_viewport_tag' );

Code Snippets import file: Disable Responsive Layout.

Disable Smooth Scroll

This customization turns off the smooth scroll of Corp.

function siteorigin_corp_child_disable_smooth_scroll( $classes ) {
	$classes[] = 'disable-smooth-scroll';
	return $classes;
}
add_filter( 'body_class', 'siteorigin_corp_child_disable_smooth_scroll' );

Change the Scroll Distance for the Sticky Header

The header becomes sticky after the visitor scrolls past a set distance. The default distance is 0. To use another distance, in pixels, use the siteorigin_corp_header_sticky_offset filter.

add_filter( 'siteorigin_corp_header_sticky_offset', function( $offset ) {
	return 100;
} );

Logos

The logo snippets replace the logo image. Set the logo in AppearanceCustomizeSite Identity first. See Logo. In each snippet, replace the image addresses (URLs), the alt text and the max-width value with your own. The examples use double size images and limit the width with CSS. Keep the CSS class names: custom-logo, alt-logo and alt-logo-scroll. The theme styles use them. The examples use https addresses. An http address on an https site shows a mixed content warning.

Alternative Home Page Logo

Show a different logo on the front page.

function siteorigin_corp_child_alternative_logo( $html ) {
	if ( is_front_page() ) {
		$html = preg_replace( '/<img(.*?)\/>/', '<img class="custom-logo" style="max-width: 75px;" src="https://example.com/wp-content/uploads/logo-home-2x.png" alt="Northfield Studio" />', $html );
	}
	return $html;
}
add_filter( 'get_custom_logo', 'siteorigin_corp_child_alternative_logo' );

Code Snippets import file: Alternative Home Page Logo.

Sticky Logo

Change the logo in the sticky header after the visitor scrolls. The first image is the regular logo. The second image shows in the sticky header.

function siteorigin_corp_child_sticky_logo( $html ) {
	$html = preg_replace( '/<img(.*?)\/>/', '<img src="https://example.com/wp-content/uploads/logo-2x.png" class="alt-logo" alt="Northfield Studio" itemprop="logo" style="max-width: 75px;" /><img src="https://example.com/wp-content/uploads/logo-sticky-2x.png" class="alt-logo-scroll" alt="Northfield Studio" itemprop="logo" style="max-width: 75px;" />', $html );
	return $html;
}
add_filter( 'get_custom_logo', 'siteorigin_corp_child_sticky_logo' );

Code Snippets import file: Sticky Logo.

Alternative Home Page Logo and Sticky Logo

Use a different logo on the front page and a sticky logo on every page.

function siteorigin_corp_child_alt_sticky_logo( $html ) {
	if ( is_front_page() ) {
		$regular = 'https://example.com/wp-content/uploads/logo-home-2x.png';
	} else {
		$regular = 'https://example.com/wp-content/uploads/logo-2x.png';
	}
	$sticky = 'https://example.com/wp-content/uploads/logo-sticky-2x.png';

	$html = preg_replace(
		'/<img(.*?)\/>/',
		'<img class="alt-logo" style="max-width: 75px;" src="' . esc_url( $regular ) . '" alt="Northfield Studio" /><img class="alt-logo-scroll" style="max-width: 75px;" src="' . esc_url( $sticky ) . '" alt="Northfield Studio" />',
		$html
	);
	return $html;
}
add_filter( 'get_custom_logo', 'siteorigin_corp_child_alt_sticky_logo' );

Code Snippets import file: Alternative Home Page and Sticky Logo.

Adjust the Sticky Header Logo Scale

Turn on Sticky Header and Sticky Header Scales Logo in AppearanceCustomizeTheme SettingsHeader. To change how much the logo shrinks, use the siteorigin_corp_logo_sticky_scale filter. The default is 0.755. Change the value to set the scale.

add_filter( 'siteorigin_corp_logo_sticky_scale', function( $scale ) {
	return 0.6;
} );

Display the Logo and the Site Title

By default a logo replaces the site title. This function shows both. It replaces the siteorigin_corp_display_logo function of the theme, and keeps the siteorigin_corp_logo_before and siteorigin_corp_logo_after hooks, so add-ons that use them still work. Use it as a Code Snippets snippet or in a child theme.

function siteorigin_corp_display_logo() {
	do_action( 'siteorigin_corp_logo_before' );

	if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
		the_custom_logo();
	}

	$tag = is_front_page() ? 'h1' : 'p';
	echo '<' . $tag . ' class="site-title"><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">' . esc_html( get_bloginfo( 'name' ) ) . '</a></' . $tag . '>';

	do_action( 'siteorigin_corp_logo_after' );
}

Then add this CSS to AppearanceCustomizeAdditional CSS, or to SiteOrigin CSS, to place the logo and the title on one line:

.site-header .site-branding .custom-logo-link {
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}
.site-header .site-branding .site-title {
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}

Code Snippets import file: Display Logo and Site Title.

Page Settings

Change the Page Settings Defaults

Use this function to change the defaults of the Page Settings box. This example sets Page Layout to No Sidebar for new pages and posts.

function siteorigin_corp_child_alter_page_setting_defaults( $defaults, $type, $id ) {
	$defaults['layout'] = 'no-sidebar';
	return $defaults;
}
add_filter( 'siteorigin_page_settings_defaults', 'siteorigin_corp_child_alter_page_setting_defaults', 15, 3 );

The keys you can change are layout, overlap, header, header_margin, page_title, footer, footer_margin and footer_widgets. To see the values, look at the siteorigin_corp_setup_page_setting_defaults function in inc/settings.php on GitHub.

Code Snippets import file: Page Settings Defaults.

Enable Page Settings for a Custom Post Type

Replace my_custom_post_type with the slug of your custom post type.

add_action( 'init', function() {
	add_post_type_support( 'my_custom_post_type', 'so-page-settings' );
} );

Code Snippets import file: Enable Page Settings for a Custom Post Type.

Footer

Change the Footer Credit

The bottom bar shows a Theme by SiteOrigin credit. To change or remove the credit, use the siteorigin_corp_footer_credits filter. Corp passes the credit through wp_kses_post, so only basic HTML is kept. Return an empty string to remove the credit. The SiteOrigin Premium No Attribution addon uses this filter too.

add_filter( 'siteorigin_corp_footer_credits', function( $credit ) {
	return '<span>Built by Northfield Studio</span>';
} );

Layout

Adjust the Content Width Value

Change the content width that WordPress uses for embeds and images. The default is 1140.

add_filter( 'siteorigin_corp_content_width', function( $content_width ) {
	return 1140;
} );

Code Snippets import file: Adjust the Content Width Value.

WooCommerce

Do Not Display the Mini Cart if the Cart Is Empty

This customization hides the mini cart on the Cart and Checkout pages and while the cart is empty.

add_filter( 'siteorigin_corp_display_mini_cart', function( $status ) {
	return ! is_cart() && ! is_checkout() && ! WC()->cart->is_empty();
} );

Code Snippets import file: Do Not Display the WooCommerce Mini Cart if the Cart Is Empty.

Archive: Disable Links to Single Product Pages

This customization removes the links from the products in the shop and archive pages. It replaces the siteorigin_corp_woocommerce_archive_product_image function of the theme. Use it in a child theme functions.php file, or as a Code Snippets snippet.

function siteorigin_corp_woocommerce_archive_product_image() { ?>
	<div class="loop-product-thumbnail">
		<?php
		woocommerce_template_loop_product_thumbnail();

		// A Quick View window must not show the buttons again.
		if (
			empty( $_REQUEST['action'] ) ||
			$_REQUEST['action'] != 'siteorigin_corp_product_quick_view'
		) {
			if (
				siteorigin_setting( 'woocommerce_quick_view' ) &&
				siteorigin_setting( 'woocommerce_quick_view_location' ) == 'hover'
			) {
				siteorigin_corp_woocommerce_quick_view_button();
			}

			if (
				siteorigin_setting( 'woocommerce_add_to_cart' ) &&
				siteorigin_setting( 'woocommerce_add_to_cart_location' ) == 'hover'
			) {
				woocommerce_template_loop_add_to_cart();
			}
		}
		?>
	</div>
<?php }

function siteorigin_corp_child_woocommerce_change_hooks() {
	remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 5 );
	remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 15 );
}
add_action( 'after_setup_theme', 'siteorigin_corp_child_woocommerce_change_hooks', 20 );