3 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
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']);