5 Min.cornerstone

Globals API

This is a technical summary of what is offered by our Globals API.

Getting and Setting values
Global Colors
Global Fonts
Custom Global
Global Tabs API
See Also

Theme Options goes hand and hand with stacks. However there are a few feature that are specific to Theme Options, such as Global Colors, Global Fonts, and extensions for all Stacks.

Getting and Setting values

`cs_stack_get_value`

Passing in the name of the stack value key will return the value.

$twigEnabled = cs_stack_get_value('cs_twig_enabled');

`cs_stack_set_value`

Set the key value via the $name and $value arguments.

cs_stack_set_value('cs_twig_enabled', true);

`cs_stack_register_options`

// Register options
cs_stack_register_options([
  'custom_stack_value' => true,
]);

Global Colors

Getting Global Colors

You can grab all your Glboal Colors from the cs_color_get_all function.

$storedColors = cs_color_get_all();

Global Colors are stored in the GlobalColors singleton. You can access them through the method getStoredColorItems.

$storedColors = cs_color_get_stored();

Applying Colors

Global colors are stored as global-color:YOUR_ID internally. To take that string and convert it into a color you can use the cs_color_apply function. This works the same for gradients, however gradients are stored as an object.

$hexColor = cs_color_apply('global-color:YOUR_ID');

Global Fonts

Global Fonts are stored in the GlobalFonts singleton. You can access them through the method get_font_items.

$fontItems = cs_fonts_get_all();

Getting Global Font Config

$globalFontConfig = cs_fonts_get_config();

Changing the Fallback Fonts

The default fallback font is Helvetica and can be changed by the filter cs_font_fallback.

Example which just sets it as Helvetica as well.

add_filter('cs_font_fallback', function() {
  return [
    'name'    => 'helvetica',
    'source'  => 'system',
    'family'  => 'Helvetica',
    'stack'   => 'Helvetica, Arial, sans-serif',
    'weights' => ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
    'weightNormal' => '400',
    'weightBold'   => '700'
  ];
});

Add and Filtering the Font List

The filter the font list utilize the cs_font_data filter. Each font is keyed by their ID. In this example we remove helvetica from the list. Sorry Helvetica.

add_filter('cs_font_data', function($fonts) {
    unset($fonts['helvetica']);

    return $fonts;
});

We add a new

Processing a Global Font

Global fonts are stored using global-ff:YOUR_ID. To receive the font family stack value from this special value, you can use the function cs_fonts_process.

$fontFamily = cs_fonts_process('global-ff:YOUR_ID');

Custom Global

Import

The action cs_theme_options_import_globals can be used to export any needed data for a custom global.

add_action('cs_theme_options_import_globals', [ $this, 'themeOptionsImport']);

Export

The filter cs_theme_options_export_globals can be used to export any needed data for a custom global.

add_filter('cs_theme_options_export_globals', [ $this, 'themeOptionsExport']);

Global Tabs API

The Global Tabs API lets you add new tabs to the Cornerstone Globals panel. Each tab you register gets its own entry in the tab navigation alongside the built-in Colors, Fonts, and Variables tabs. The tab's controls are backed by theme options data, so values persist automatically through the standard stack system.

`cs_global_tab_register`

Registers a new tab in the Globals panel.

cs_global_tab_register( string $id, array $options = [] )

Parameter	Type	Description
`$id`	`string`	Unique identifier for the tab. Used as the `rootControl` value in the builder and must be unique across all registered tabs.
`$options['label']`	`string`	Display label shown in the tab navigation.
`$options['permission']`	`string`	Permission key checked before the tab is shown. A matching entry is added to the permission defaults automatically so the tab is visible to all roles by default.
`$options['controls']`	`array`	Control definitions rendered inside the tab. Follows the same structure as element controls.

Basic example — a simple text option tab:

cs_global_tab_register( 'my-settings', [
  'label'      => __( 'My Settings', 'my-plugin' ),
  'permission' => 'global.my-settings',
  'controls'   => [
    [
      'type'     => 'group',
      'controls' => [
        [
          'key'     => 'my_option_value',
          'type'    => 'text',
          'label'   => __( 'Option Value', 'my-plugin' ),
          'options' => [
            'placeholder' => __( 'Enter a value', 'my-plugin' ),
          ],
        ],
      ],
    ],
  ],
] );

// Register the stack key so the value persists
cs_stack_register_options( [ 'my_option_value' => '' ] );

Values are read back with cs_stack_get_value:

$value = cs_stack_get_value( 'my_option_value' );

List control example — a repeatable key/value store:

cs_global_tab_register( 'social-links', [
  'label'      => __( 'Social Links', 'my-plugin' ),
  'permission' => 'global.social-links',
  'controls'   => [
    [
      'type'     => 'group',
      'controls' => [
        [
          'key'     => 'my_social_links',
          'type'    => 'list',
          'label'   => __( 'Links', 'my-plugin' ),
          'options' => [
            'initial'    => [ 'label' => '', 'url' => '' ],
            'item_label' => '{{label}}',
          ],
          'controls' => [
            [
              'key'   => 'label',
              'type'  => 'text',
              'label' => __( 'Label', 'my-plugin' ),
            ],
            [
              'key'   => 'url',
              'type'  => 'text',
              'label' => __( 'URL', 'my-plugin' ),
            ],
          ],
        ],
      ],
    ],
  ],
] );

cs_stack_register_options( [ 'my_social_links' => [] ] );

`cs_global_tabs_get`

Returns all currently registered tabs as a plain array.

$tabs = cs_global_tabs_get();

Each entry is an associative array with id, label, permission, and controls keys.

`cs_app_global_tabs` filter

Runs after all tabs have been collected and before the list is passed to the frontend. Use it to reorder tabs, remove a tab, or inject a tab definition without going through cs_global_tab_register.

add_filter( 'cs_app_global_tabs', function( $tabs ) {
  // Move a specific tab to the front of the list
  usort( $tabs, function( $a, $b ) {
    return ( $a['id'] === 'my-settings' ) ? -1 : 1;
  } );

  return $tabs;
} );

Remove a tab entirely:

add_filter( 'cs_app_global_tabs', function( $tabs ) {
  return array_values( array_filter( $tabs, function( $tab ) {
    return $tab['id'] !== 'manage-variables';
  } ) );
} );

Disabling the built-in Variables tab

add_filter( 'cs_global_variables_enabled', '__return_false' );

This prevents the GlobalVariables integration from loading entirely — no tab is registered and no CSS is emitted.