Advanced Customizations

4 min read Updated

These PHP snippets change North in ways that Theme Settings do not cover, from the sticky header to the footer credit. 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 and paste the code.
  4. Click Save and Activate.

Some customizations below also have a Code Snippets import file. To use one, unzip it, go to SnippetsImport, upload the JSON file, then activate the snippet.

You can use several snippets together. Each named function must have a unique name, 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';
} );

Sticky Header

The sticky header settings are Sticky menu and Sticky menu scales logo in AppearanceCustomizeTheme SettingsNavigation. Both are on by default.

Disable the Sticky Header on Mobile

This customization turns off the sticky header on screens narrower than the Menu Breakpoint value in AppearanceCustomizeTheme SettingsResponsive. The default is 600.

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

Code Snippets import file: Disable Sticky Header on Mobile.

Make the Top Bar Sticky

By default only the header sticks to the top of the screen. This customization makes the top bar stick too. The top bar shows when you add Text Above in AppearanceCustomizeTheme SettingsHeader, when you add a widget to the Top Bar widget area, or when the WooCommerce store notice is on.

add_filter( 'siteorigin_north_sticky_topbar', '__return_true' );

Adjust the Sticky Header Logo Scale

When Sticky menu scales logo is on, the logo shrinks as the visitor scrolls. To change how much the logo shrinks, use the siteorigin_north_logo_sticky_scale filter. The default is 0.755. A lower value makes a smaller logo.

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

To use a different logo in the sticky header or on one page, see the Logo Booster Addon of SiteOrigin Premium.

Page Settings

Change the Page Settings Defaults

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

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

The keys you can change are layout, menu, page_title, featured_image (pages only), masthead_margin, footer_margin, hide_masthead and hide_footer_widgets. The layout values are default, no-sidebar, full-width, full-width-sidebar and stripped. The menu values are default and overlap. To see all defaults, look at the siteorigin_north_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' );
} );

The footer shows a Theme by SiteOrigin credit. To change or remove the credit, use the siteorigin_north_footer_credits filter. North 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_north_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 650.

add_filter( 'siteorigin_north_content_width', function( $content_width ) {
	return 800;
} );

Hide the Breadcrumbs

North shows breadcrumbs when a supported breadcrumb plugin is active, as Integrated Plugins explains. This customization hides them on the whole site and keeps the plugin active.

add_filter( 'siteorigin_settings_show_breadcrumbs', '__return_false' );

Widgets and Comments

Use the Block Widget Editor

North turns off the block widget editor of WordPress, so AppearanceWidgets shows the classic widgets screen. This customization turns the block widget editor back on.

add_filter( 'siteorigin_settings_disable_new_widget_area', '__return_false' );

Change the Comment Form Placeholders

North shows placeholder text in the name, email and website fields of the comment form. Change the text in this example as you need.

add_filter( 'siteorigin_north_comment_form_placeholders', function( $placeholders ) {
	$placeholders['author'] = 'Your name';
	$placeholders['email']  = 'Your email address';
	$placeholders['url']    = 'Your website';
	return $placeholders;
} );

WooCommerce

Remove the Single Product SKU and Categories

North shows the SKU and the product categories under the title on single product pages. This customization removes them.

function siteorigin_north_child_remove_wc_single_meta() {
	remove_action( 'woocommerce_single_product_summary', 'siteorigin_north_woocommerce_template_single_undertitle_meta', 7 );
}
add_action( 'after_setup_theme', 'siteorigin_north_child_remove_wc_single_meta' );

Code Snippets import file: Remove WooCommerce Single Product SKU and Categories.