Cornerstone Developer Guide

This article goes through hooks, filters, and actions specific for extending cornerstone

  1. Hooks and Filters
  2. Actions

Hooks and Filters

The fallback values in these docs are also the defaults in the actual app.

Changing default preferences

Uses the filter cs_app_preference_defaults

add_filter('cs_app_preference_defaults', function($defaults) { // Workspace defaults to left $defaults['workspace_side'] = 'left'; // $defaults['keybindings']['save'] = 'mod+s'; // $defaults['element_favorites'][] = 'text'; return $defaults; });

apply_filters('cs_detect_layout_type', string $layout_type);

Use this to filter to change to your custom layout depending on your conditions. Useful if you are creating your own layout type. WooCommerce layout types use this.

apply_filters('cs_css_post_process_color', $value);

Expands a color to it's HTML definition. IE global:color-id expands to #FF0 or whatever your global color is.

apply_filters( 'cs_output_layout', true );

Changing to false will force no layout to output.

apply_filters( 'cs_output_header', true );

Same as cs_output_layout except for Headers.

Same as cs_output_layout except for Footers.

add_filter( 'cs_app_data', function($data) {} );

Filter application data passed from WordPress to the UI.

apply_filters( 'cs_layout_output_after', "</$tag>" );

Add in custom content after tag.

apply_filters( 'cs_layout_output_before_single', ob_get_clean() );

For filtering layout output before a single.

apply_filters( 'cs_layout_output_after_single', ob_get_clean() );

For filtering layout output after a single.

apply_filters( 'cs_default_image_width', 48 )

Fallback image width

apply_filters( 'cs_default_image_height', 48 )

Fallback image height

apply_filters('cs_load_google_fonts', '__return_true' )

Force Google Fonts to never load through Cornerstone

apply_filters("cs_filter_app_url", string $slug)

Used by WPML integration as Cornerstone does not work when inside a language folder and WPML attempts to control the home_url function. IE /es/cornerstone

apply_filters( 'cs_dynamic_content_post_id', $post->ID )

Control the post ID that dynamic content is about to use

apply_filters('cs_app_slug', 'cornerstone')

Get the configured Cornerstone slug.

apply_filters( 'cs_document_load_settings', [/*Large internal array*/])

Change the default settings for a every document

apply_filters( 'cs_fallback_alt_text', __('Image', '__x___') )

Fallback alt image text

apply_filters( 'cs_lazy_load_images', true )

Change the default setting for lazy loading images

apply_filters( 'cs_enable_srcset', false )

Enable srcset for images

apply_filters("cs_use_standalone_theme_options", true)

When running without the X or Pro theme, these are the base styles applied to elements created from the standalone Theme Options.

apply_filters("cs_wordpress_dashboard_url", admin_url())

Change the location the "Exit" buttons in Cornerstone take you to.

apply_filters("cs_wordpress_dashboard_url_can_edit", true)

If false the "Exit" button for post_types will not append edit.php?post={POST_ID}

apply_filters('cs_social_share_url', $share_url, $type )

Change how the social share urls work

apply_filters( 'cs_theme_options_controls', $data )

Add controls to theme options. See the structure outputted to you, this varies a little from the normal control structures.


@Todo there is a little more involved then the this to setup. See the structure outputted to you in these sample filter adding.

add_filter( 'cs_assignment_contexts', [$this, 'assignment_contexts'] ); add_filter( 'cs_preview_contexts', [$this, 'preview_contexts'] ); add_filter( 'cs_condition_contexts', [$this, 'condition_contexts'] );

Dynamic Content

apply_filters( "cs_dynamic_content_{$type}", '', $field, $args )

The group call for a dynamic content type. IE {{dc:post:id}} would be cs_dynamic_content_post

apply_filters( "cs_dynamic_content_{$type}_{$field}", '', $field, $args )

The field call for a dynamic content type. IE {{dc:post:id}} would be cs_dynamic_content_post_id

See also Dynamic Content API


apply_filters('cs_allow_breakpoint_ranges_change', false)

Enable breakpoint changing. Currently false, but this will probably be enabled by default in the future

apply_filters('cs_allow_breakpoint_base_change', false)

Enable breakpoint base changing. Currently false, but this will probably be enabled by default in the future



Runs before grabbing late data via ajax.


Runs before any data is saved and after authentication has passed.


When a document has saved.


A Component has been saved


A Component has been deleted


Assign post id for a given layout. The 404 plugin uses this to overwrite the layout content.


Before a change in theme options is about to happen.


After a change in theme options has occurred.


Purge all caches in Cornerstone. The clear cache button uses this.










Any layout about to begin


The beginning of a single layout about to render.


The end of a single layout being rendered.


Any layout is about to end



App UI


Runs before Cornerstone if about to boot.


Runs before loading the media editor Cornerstone uses from WordPress.

Dynamic Content


When dynamic content is ready for fields to be registered.

See something inaccurate? Let us know