Customizing with code

This page is for developers who change Signocore Slate with code. Put your code in a child theme, so theme updates do not overwrite it. See Set up a child theme. Every action and filter is listed with its arguments in the hooks reference.

Renamed hooks in 2.0

In Signocore Slate 2.0, every theme hook uses the signocore_slate_ prefix in PHP and the signocore_slate. namespace for JavaScript wp.hooks. The exceptions are a few hooks that belong to bundled libraries or to WordPress itself, such as the wptt_ filters of the font loader and the names of scheduled cleanup tasks. Hooks that had another name in 1.x, such as slate_header, slate/block_visibility_list or slate.typography_options, were renamed.

There are no aliases. The old names no longer fire, so code in a child theme or plugin that uses a 1.x name stops running until you change it to the new name. Most layout hooks, such as signocore_slate_after_header and signocore_slate_before_main_content, already used the new prefix in 1.x and did not change.

The most used renamed hooks:

1.x name	2.0 name	Type
slate_header	signocore_slate_header	Action
slate_header_html	signocore_slate_header_html	Action
slate_header_button	signocore_slate_header_button	Action
slate_header_cart	signocore_slate_header_cart	Action
slate_header_search	signocore_slate_header_search	Action
slate_header_social	signocore_slate_header_social	Action
slate_navigation_popup_toggle	signocore_slate_navigation_popup_toggle	Action
before_slate_logo_output	signocore_slate_before_logo_output	Action
slate_logo_url	signocore_slate_logo_url	Filter
slate_header_elements_template_path	signocore_slate_header_elements_template_path	Filter
slate_get_template	signocore_slate_get_template	Filter
slate_theme_options_defaults	signocore_slate_theme_options_defaults	Filter
slate_theme_customizer_sections	signocore_slate_theme_customizer_sections	Filter
slate_theme_google_fonts_array	signocore_slate_theme_google_fonts_array	Filter
slate_display_swap_google_fonts	signocore_slate_display_swap_google_fonts	Filter
slate_mobile_media_query	signocore_slate_mobile_media_query	Filter
slate_dark_mode_enable	signocore_slate_dark_mode_enable	Filter
slate_woocommerce_shop_page_content	signocore_slate_woocommerce_shop_page_content	Action
slate-before-side-cart	signocore_slate_before_side_cart	Action
slate/block_visibility_list	signocore_slate_block_visibility_list	Filter

Most names only gained the prefix: slate_logo_url became signocore_slate_logo_url, slate/import/customizer_reset became signocore_slate_import_customizer_reset, slate-before-side-cart became signocore_slate_before_side_cart and slate.typography_options became signocore_slate.typography_options. Where a PHP hook changed more than that, the hooks reference shows its old name. The JavaScript hooks are listed below. To find old names in your code, search it for slate_, slate-, slate/ and slate..

Template overrides

The theme builds its pages from template files in its template-parts folder. To change one, copy it to the same path in your child theme and edit the copy. WordPress loads the child theme's copy instead.

Folder	Holds
template-parts/header/	The header and each header element, such as logo.php, navigation.php, search.php and the mobile-*.php versions
template-parts/footer/	The footer, its rows and each footer element
template-parts/title/	The elements of the post and page title area, such as title.php, meta.php and breadcrumb.php
template-parts/archive-title/	The elements of the archive title area
template-parts/content/	Single entries, archive entries, related posts, the author box, pagination and the error pages

Copy only the files you change. A copied template does not receive changes from theme updates, so compare it with the original after a major update.

Load a different file for one element

Three filters let you point a header, footer or title element to another template part without copying the original. Each returns a path relative to the theme folder, without .php, which WordPress looks up in the child theme first.

Filter	Default	Arguments
signocore_slate_header_elements_template_path	template-parts/header/{element}	$template, $item (the element, such as logo or mobile-cart), $row (top, main or bottom), $column (such as left or right)
signocore_slate_footer_elements_template_path	template-parts/footer/{element}	$template, $item, $row (top, middle or bottom), $column (the column number)
signocore_slate_title_elements_template_path	template-parts/title/{element} or template-parts/archive-title/{element}	$template, $item (such as title or breadcrumb), $area (normal for a title in the content, above for a title above it)

This example loads template-parts/header/html-top-bar.php from the child theme for the HTML element, but only when it sits in the top row:

add_filter(
	'signocore_slate_header_elements_template_path',
	function ( $template, $item, $row, $column ) {
		if ( 'html' === $item && 'top' === $row ) {
			return 'template-parts/header/html-top-bar';
		}
		return $template;
	},
	10,
	4
);

Feature templates

The dark mode switches, the extra header elements and the custom shop page have their own templates. For these, the theme looks in your child theme for slate_pro/{file} and then for in the child theme's root folder, before it uses its own copy:

Feature	Files
Dark mode switch	header-dark-mode.php, mobile-dark-mode.php, footer-dark-mode.php
Extra header elements	account.php, button2.php, contact.php, divider.php, divider2.php, divider3.php, html2.php, navigation-3.php, navigation-4.php, search-bar.php, toggle-widget.php, widget1.php, and the mobile-*.php versions
Custom shop page	archive-product.php

The signocore_slate_get_template filter can return another file for any of them. It receives $template (the file found), $template_name (such as html2.php), $template_path (slate_pro/) and $default_path (the theme's own folder). If it returns the path of a file that does not exist, the element prints nothing.

Read theme settings in PHP

The theme's template functions are available through slate(), in the Signocore\Slate namespace. slate()->option( $key, $default = '' ) returns a Customizer setting: the saved value, otherwise the theme's default, otherwise $default.

use function Signocore\Slate\slate;

// 'no' unless a sticky header is set, otherwise 'main', 'top_main', 'top_main_bottom', 'top' or 'bottom'.
$sticky_header = slate()->option( 'header_sticky' );

// Settings with several values are arrays. sub_option() reads one key: 1290 by default.
$content_width = slate()->sub_option( 'content_width', 'size' );

// Colors of the global palette, palette1 to palette15, as hex values.
$accent = slate()->palette_option( 'palette1' );

Setting keys are the IDs of the Customizer settings. get_theme_mods() lists the ones your site has saved, and the signocore_slate_theme_options_defaults filter receives the defaults of all of them.

A child theme's functions.php loads before the parent theme, so slate() does not exist yet at the top of that file. Call it inside a hook callback, such as one on wp, or in a template.

Layout hooks

These actions run on every page built with the theme's templates, in this order:

Action	Runs
signocore_slate_before_wrapper	Right after wp_body_open(), before the site wrapper
signocore_slate_before_header	Inside the site wrapper, before the header
signocore_slate_header	Prints the header
signocore_slate_after_header	After the header, before the main area
signocore_slate_before_content	At the start of the main area
signocore_slate_hero_header	Prints the title area above the content, when the layout puts it there
signocore_slate_before_main_content	At the start of the content column
signocore_slate_single_before_entry_content	On single entries, before the post content
signocore_slate_single_after_entry_content	On single entries, after the post content and page links
signocore_slate_single_after_content	After the article, before the author box, post navigation, related posts and comments
signocore_slate_after_main_content	At the end of the content column, before the sidebar
signocore_slate_after_content	At the end of the main area
signocore_slate_before_footer	After the main area, before the footer
signocore_slate_footer	Prints the footer
signocore_slate_after_footer	After the footer, inside the site wrapper
signocore_slate_after_wrapper	After the site wrapper, before wp_footer()

Recipes

Add a notice after the header

add_action( 'signocore_slate_after_header', function () {
	if ( ! is_front_page() ) {
		return;
	}
	echo '<div class="site-notice">' . esc_html__( 'Free shipping on orders over $50.', 'my-child' ) . '</div>';
} );

Add content before or after the main content

signocore_slate_before_main_content and signocore_slate_after_main_content run on single entries, archives and error pages. Check the page type:

add_action( 'signocore_slate_before_main_content', function () {
	if ( is_category( 'reviews' ) ) {
		echo '<p class="review-disclosure">' . esc_html__( 'We may earn a commission from links in our reviews.', 'my-child' ) . '</p>';
	}
} );

Add a call to action below every blog post

add_action( 'signocore_slate_single_after_entry_content', function () {
	if ( ! is_singular( 'post' ) ) {
		return;
	}
	echo '<aside class="post-cta">';
	echo '<p>' . esc_html__( 'Get new posts by email.', 'my-child' ) . '</p>';
	echo '<a class="button" href="' . esc_url( home_url( '/newsletter/' ) ) . '">' . esc_html__( 'Subscribe', 'my-child' ) . '</a>';
	echo '</aside>';
} );

To place it after the article instead, below the tags and before the author box, use signocore_slate_single_after_content.

Change the layout of some pages

The signocore_slate_post_layout filter receives the layout the theme worked out from the Customizer and the page's own settings. Change the keys you need:

Key	Values
layout	normal, narrow or fullwidth
sidebar	enable or disable
side	left or right, the side of the sidebar
title	normal (in the content), above or hide
boxed	boxed or unboxed
feature	show or hide
vpadding	show, hide, top or bottom

This example gives every post in the Guides category a full-width layout with the title above the content:

add_filter( 'signocore_slate_post_layout', function ( array $layout ): array {
	if ( is_singular( 'post' ) && has_category( 'guides' ) ) {
		$layout['layout']  = 'fullwidth';
		$layout['sidebar'] = 'disable';
		$layout['title']   = 'above';
	}
	return $layout;
} );

The theme works out the layout once per request, so add the filter in your child theme's functions.php, not later in the page.

Change the breadcrumb separator and home label

These filters change the theme's own breadcrumb trail:

add_filter( 'signocore_slate_breadcrumb_delimiter', function () {
	return '›';
} );

add_filter( 'signocore_slate_local_breadcrumb_args', function ( array $args ): array {
	$args['home_title'] = __( 'Start', 'my-child' );
	return $args;
} );

When the Breadcrumb Engine shows Signocore SEO's breadcrumbs, change them in Signocore SEO instead. See Plugin integrations.

Hide the breadcrumbs on some pages

signocore_slate_breadcrumb_html filters the breadcrumbs in the title area, for the theme's own trail and for Signocore SEO's. Return an empty string to hide them:

add_filter( 'signocore_slate_breadcrumb_html', function ( $html ) {
	return is_front_page() ? '' : $html;
} );

The filter does not affect the [slate_breadcrumbs] shortcode or the RankMath, Yoast and SEOPress breadcrumbs.

Change the post navigation labels

add_filter( 'signocore_slate_post_navigation_args', function ( array $args ): array {
	$args['prev_text'] = '<div class="post-navigation-sub"><small>' . esc_html__( 'Older post', 'my-child' ) . '</small></div>%title';
	$args['next_text'] = '<div class="post-navigation-sub"><small>' . esc_html__( 'Newer post', 'my-child' ) . '</small></div>%title';
	return $args;
} );

The arguments go to WordPress's the_post_navigation(), where %title is the title of the linked post.

WP-CLI

The theme registers wp slate import wxr, wp slate import widgets, wp slate export customizer and wp slate reset customizer. See WP-CLI commands for their arguments.

JavaScript hooks in the block editor

The Slate blocks run their editor settings through wp.hooks. Load your script in the block editor with wp-hooks as a dependency:

add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_script(
		'my-child-editor',
		get_stylesheet_directory_uri() . '/js/editor.js',
		array( 'wp-hooks' ),
		'1.0.0',
		true
	);
} );

// Allow inline code formatting in the text fields of Slate blocks.
wp.hooks.addFilter(
	'signocore_slate.whitelist_richtext_formats',
	'my-child/inline-code',
	( formats, blockName ) => [ ...formats, 'core/code' ]
);

Hook	Purpose
signocore_slate.whitelist_richtext_formats	The rich text formats allowed in text fields of Slate blocks. Receives the formats and, in most blocks, the block name
signocore_slate.typography_options	The font families in Slate typography controls, as groups of { label, options }
signocore_slate.icon_options, signocore_slate.icon_options_names	The icons and the icon names offered in icon pickers
signocore_slate.block_sidebar_control_name, signocore_slate.block_sidebar_control_icon	The title and icon of the Slate Blocks Controls sidebar
signocore_slate.block_blocks_sidebar, signocore_slate.block_controls_sidebar	Extra { Control } components in the sidebar's Block Visibility panel
signocore_slate.block_panels_sidebar	Extra { Panel } components added as panels to the sidebar
signocore_slate.blocks_icon	The Slate icon shown in the Design Library
signocore_slate.prebuilt_library_tabs, signocore_slate.prebuilt_templates_object	The tabs of the Design Library and the patterns it loads
signocore_slate.countdownTypes, signocore_slate.countdownActions	The countdown types and the end actions of the Countdown block
signocore_slate.galleryTypes, signocore_slate.galleryArrowsStyle, signocore_slate.galleryArrowsPosition, signocore_slate.galleryDotStyle	The layout types, arrow styles, arrow positions and dot styles of the Advanced Gallery block
signocore_slate.galleryArrowsBlockOptions	Extra arrow settings in the Advanced Gallery block
signocore_slate.actionOptions	The actions after submit in the Form block
signocore_slate.actionOptionsAdvancedForm, signocore_slate.analyticsOptionAdvancedForm	The actions after submit and the analytics settings of the Advanced Form block
signocore_slate.formTemplates, signocore_slate.formStyles	The templates and styles offered when you create an Advanced Form
signocore_slate.formGeneralControls, signocore_slate.formInputDisplay	Extra form settings, and the label shown in the editor for a form field with a dynamic value
signocore_slate.headerBackdropFilter, signocore_slate.styleControlsBackdropFilter	Backdrop filter settings in the Header block and the Section block
signocore_slate.megaMenuControlsNavigationLink, signocore_slate.megaMenuToolbarControlsNavigationLink, signocore_slate.styleControlsNavigationLink	Mega menu settings, toolbar buttons and style settings of the Navigation Link block
signocore_slate.tableBlockStickySettings	The sticky settings of the Table block
signocore_slate.linkDisplay	How a chosen link shows in Slate's link controls
signocore_slate.dynamicContent, signocore_slate.dynamicImage, signocore_slate.dynamicBackground, signocore_slate.getCustomFieldsShowAll	Dynamic content: the text, image and background shown in the editor, and whether custom field lists show every field
signocore_slate.BackgroundDynamicControl, signocore_slate.GalleryDynamicControl, signocore_slate.ImageDynamicControl, signocore_slate.InlineReplaceDynamicControl, signocore_slate.TextDynamicControl, signocore_slate.URLInputDynamicControl, signocore_slate.URLInputExternalDynamicControl, signocore_slate.FormInputDynamicControl, signocore_slate.FormConditionals	Component slots for wp.components.withFilters. They render nothing by default
signocore_slate.postSaved	Action. Runs after a post is saved in the editor, not for autosaves and drafts. Receives { post, permalink, suffix }
signocore_slate.triggerDynamicUpdate	Action. Runs when an Advanced Button asks dynamic content to update

JavaScript events on the site

The theme's front-end scripts dispatch these DOM events. Listen on the target in the table: an event dispatched on document.body does not reach a listener on window.

Event	Target	Fires when	detail
slate-drawer-opened	window	A drawer finished opening: the mobile menu, search, popout cart, off-canvas filter, account login or header widget area	None
slate-drawer-closed	window	A drawer finished closing	None
slateJSInitReload	document	Infinite scroll added the next page of posts or products	None
slate-form-start-submit	document.body	A Form block starts sending	None
slate-form-success	document.body	A Form block was sent	The form's ID, as a string
slate-adv-form-start-submit	document.body	An Advanced Form block starts sending	None
slate-advanced-form-success	document.body	An Advanced Form block was sent	{ uniqueId, submissionResults }
slate-tabs-open	window	A Tabs block opened a tab	None
slate-lazy-loaded	window	An element whose background image or video poster the performance optimizer deferred came into view and got its image. The optimizer is off until an administrator turns on Globally Enable The Performance Optimizer in the Slate Blocks Controls sidebar, or a developer returns true from the signocore_slate_blocks_optimizer_enabled filter	{ element }

slate-drawer-opened and slate-drawer-closed come from the full navigation script. When the sticky header and mobile sticky header are set to No and Enable Scroll To ID and Enable Scroll To Top are off, the theme loads a lighter script that opens drawers without these events.

window.addEventListener( 'slate-drawer-opened', () => {
	document.documentElement.classList.add( 'drawer-is-open' );
} );

window.addEventListener( 'slate-drawer-closed', () => {
	document.documentElement.classList.remove( 'drawer-is-open' );
} );

document.body.addEventListener( 'slate-form-success', ( event ) => {
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push( { event: 'slate_form_sent', formId: event.detail } );
} );

Start blocks in content you add with JavaScript

After you insert HTML with Slate blocks into a page, for example from an AJAX request, dispatch these events so the theme starts the new blocks. slate-query-loaded and slate-lazy-rescan are never dispatched by the theme itself:

Event	Listened for on	Starts
slateJSInitReload	document	Sliders, tooltips, the Search block, Show More and the lightbox
slate-query-loaded	document, and window for accordions	Sliders, Tabs, video popups, progress bars, accordions, the Search block, Show More and the lightbox
slate-lazy-rescan	document	Elements with data-slate-lazy-src or data-slate-lazy-bg, which load their image source or background when they come into view

document.dispatchEvent( new Event( 'slateJSInitReload' ) );
document.dispatchEvent( new Event( 'slate-query-loaded' ) );
window.dispatchEvent( new Event( 'slate-query-loaded' ) );

Constants for wp-config.php

Constant	Default	What it does
SIGNOCORE_SLATE_UPDATE_URL	https://update.signocore.com/api/wp-update/themes/signocore-slate	The address the theme asks for updates. Point it to a mirror, or to a test server on a staging site
SLATE_LIBRARY_CDN_BASE	https://cdn.signocore.com/themes/slate	The base address for the Design Library's preview images and pattern media, for example a local mirror. The signocore_slate_library_cdn_base filter runs after it

// In wp-config.php, above "That's all, stop editing!".
define( 'SLATE_LIBRARY_CDN_BASE', 'https://media.example.com/slate' );

Shortcodes

Shortcode	Attributes	Prints
[slate_breadcrumbs]	None	The breadcrumbs of the Breadcrumb Engine chosen under Appearance → Customize → General → Breadcrumbs. With the automatic engine it prints Signocore SEO's breadcrumbs while that plugin is active, and falls back to the theme's own trail where Signocore SEO has none. The signocore_slate_breadcrumb_html filter does not apply
[slate_dark_mode]	show_title: false leaves out the text labels and shows only the icons. Default true	The dark mode switch, styled with Switch Type and Switch Style from Appearance → Customize → General → Color Switch (Dark Mode). It prints only while dark mode is on and Show Fixed Switch? is on. See Dark mode