Advanced Customizations

Below you’ll find advanced customisations that aren’t included in theme settings. These customisations can either be added to a child theme functions.php file or by using the plugin Code Snippets. If you’d like to add a function using Code Snippets:

  1. Install and active the plugin, Code Snippets.
  2. Go to SnippetsImport.
  3. Import the function provided in the form of a JSON file. A JSON file is provided with each function below. Right click and Save As to download.

Disable Sticky Header On Mobile

The following customization will disable the sticky header below the point that the Mobile Menu Collapse field is set to.

if ( ! function_exists( 'siteorigin_corp_child_body_classes' ) ) :
function siteorigin_corp_child_body_classes( $classes ) {
$classes[] = 'mobile-header-ns';
return $classes;
}
endif;
add_filter( 'body_class', 'siteorigin_corp_child_body_classes' );

Code Snippets Import File
Disable Sticky Header on Mobile Snippet.

Disable Responsive Layout

Disable the responsive layout on mobile devices.

Code Snippets Import File
Disable Responsive Layout on Mobile Devices Snippet.

Display an alternative logo on the site home page.

if ( ! function_exists( 'siteorigin_corp_child_alternative_logo' ) ) :
function siteorigin_corp_child_alternative_logo( $html ) {
    if ( is_front_page() )
        $html = preg_replace('/<img(.*?)\/>/', '<img src="http://demo.siteorigin.com/corp/files/2018/04/corp-logo-white-2x.png" class="custom-logo" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" />', $html);

    return $html;
}
endif;
add_filter( 'get_custom_logo', 'siteorigin_corp_child_alternative_logo' );

Once you’ve imported the function into Code Snippets, the following values should be replaced.

Image URL: http://demo.siteorigin.com/corp/files/2018/04/corp-logo-white-2x.png
Image ALT tag: siteorigin corp logo
Image maximum width: max-width: 75px;. Here we’ve chosen to add a double sized logo and restrict it’s width with CSS, you can either do the same or just completely remove the style tag: style="max-width: 75px;"

Code Snippets Import File
Disable Responsive Layout on Mobile Devices Snippet.

The following customization will change the logo in the sticky header on scroll.

if ( ! function_exists( 'siteorigin_corp_child_sticky_logo' ) ) :
function siteorigin_corp_child_sticky_logo( $html ) {

	$html = preg_replace('/<img(.*?)\/>/', '<img src="http://demo.siteorigin.com/corp/files/2017/12/corp-logo-2x.png" class="alt-logo" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" /><img src="https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/logo-hover@2x.png" class="alt-logo-scroll" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" />', $html );


    return $html;
}
endif;
add_filter( 'get_custom_logo', 'siteorigin_corp_child_sticky_logo' );

Once you’ve imported the function into Code Snippets, the following values should be replaced.

Regular Logo Image URL: http://demo.siteorigin.com/corp/files/2017/12/corp-logo-2x.png
Sticky Logo Image URL: https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/logo-hover@2x.png
Image ALT tags: siteorigin corp logo
Image maximum widths: max-width: 75px;. Here we’ve chosen to add a double sized logo and restrict it’s width with CSS, you can either do the same or just completely remove the style tag: style="max-width: 75px;"

Be sure to leave the CSS class names in place as they’re being targetted from within the theme’s stylesheet.

Code Snippets Import File
Sticky Logo Snippet.

If you’d like to change the logo in the sticky header on scroll and set an alternative logo for the home page, you can use this customization.

if ( ! function_exists( 'siteorigin_corp_child_alt_sticky_logo' ) ) :
function siteorigin_corp_child_alt_sticky_logo( $html ) {
	if ( is_front_page() ) {
		$html = preg_replace('/<img(.*?)\/>/', '<img src="http://demo.siteorigin.com/corp/files/2018/04/corp-logo-white-2x.png" class="alt-logo" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" /><img src="https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/logo-hover@2x.png" class="alt-logo-scroll" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" />', $html );
	} else {
		$html = preg_replace('/<img(.*?)\/>/', '<img src="http://demo.siteorigin.com/corp/files/2017/12/corp-logo-2x.png" class="alt-logo" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" /><img src="https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/logo-hover@2x.png" class="alt-logo-scroll" alt="siteorigin corp logo" itemprop="logo" style="max-width: 75px;" />', $html );
	}
  
    return $html;
}
endif;
add_filter( 'get_custom_logo', 'siteorigin_corp_child_alt_sticky_logo' );

Once you’ve imported the function into Code Snippets, the following values should be replaced.

Home Page Regular Logo Image URL: http://demo.siteorigin.com/corp/files/2018/04/corp-logo-white-2x.png
Home Page Sticky Logo Image URL: https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/logo-hover@2x.png
Regular Logo Image URL: http://demo.siteorigin.com/corp/files/2017/12/corp-logo-2x.png
Sticky Logo Image URL: https://siteorigin.com/wp-content/themes/siteorigin-theme/images/logo/logo-hover@2x.png
Image ALT tags: siteorigin corp logo
Image maximum widths: max-width: 75px;. Here we’ve chosen to add a double sized logo and restrict it’s width with CSS, you can either do the same or just completely remove the style tag: style="max-width: 75px;"

Be sure to leave the CSS class names in place as they’re being targetted from within the theme’s stylesheet.

Code Snippets Import File
Alternative Home Page and Sticky Logo Snippet.