Stack API
This is a technical summary of what is offered by our Stack API and how to create your own Stacks with Cornerstone and Pro.
@since 6.3.0
Quick Start
Learn by example with this sample stack that creates a sample control section. See the Element API Reference for more info on control types and conditions. The only difference here is that you will use a group-sub-module type as a top level as opposed to a control_nav group.
<?php
// This action runs when Theme Options is ready to
// accept new stacks
add_action("cs_theme_options_before_init", function() {
/**
* Main registry Function
* @see Stack Configuration Options
*/
return cs_stack_register(
//Configuration of stack
[
// Both required
'id' => 'mystack',
'label' => __("My Stack", "mystack"),
// Use controls, css, and stylesheets
// From another stack
'extends' => 'blank',
// CSS that should utilize the theme options
// And is dynamically processed
// Can also be a file path assuming the file exists
'css' => 'html { width: {{dc:p:myparameter fallback="100%"}}; }',
// Stylesheets to load on page
// If stack is active
'stylesheets' => [
'my-stack-stylesheet' => '/wp-content/uploads/mystack.css',
],
// Values to save in Database
// Referenced through {{dc:theme:KEY}}
'values' => [
// Our toggle from before is now on by default
'sample_theme_option_toggle' => true,
],
// Controls to use in Cornerstone
// Uses the Element Control API for structure
'controls' => function() {
return [
// Top Level control group
[
'type' => 'group-sub-module',
'label' => __( 'My Stack Controls', 'mystack' ),
'controls' => [
// A sample control
// Uses value `sample_theme_option_toggle`
// through the `key` property
[
'key' => 'sample_theme_option_toggle',
'type' => 'toggle',
'label' => __( 'Sample Theme Option', 'mystack' ),
],
],
],
];
},
]
);
});Stack Configuration Options
These are keys and values that are passed to cs_stack_register.
id | ✔ | string | id to store in database under x_stack |
label | ✔ | string | Localized title to display under the stack selector. |
controls | array|function | Using Cornerstones Element API to build out controls or a function that returns an array. | |
values | array | Associative array which saves value data used in controls. | |
stylesheets | array | Associative array with stylesheet id pointing to a URL. These are loaded in the head. | |
css | array|string | CSS to be post processed by theme option configuration. These are loaded inline. | |
init | callable | Function to run when the stack is active and Theme Options is ready. | |
extends | string | Extend from the controls, css, and stylesheets of another stack. | |
| Key | Required | Type | Description |
|---|
API Functions
When in relation to custom to non-custom. Non-custom means they are an X stacks (Integrity etc...) and you will always be creating a Custom Stack.
<?php
/**
* Register custom stack
*
* @param array $config
*
* @return void
*/
function cs_stack_register($config = [])
/**
* Register from array of stacks
* Helper function of cs_stack_register
*
* @param array $stacks
*/
function cs_stacks_register($stacks = [])
/**
* Get all registered stacks
*
* @return array
*/
function cs_stacks_get_all()
/**
* Get all registered stacks with built out controls
* used specifically by the App
*
* @return array
*/
function cs_stacks_with_controls()
/**
* Get registered custom stacks
*
* @return array
*/
function cs_stacks_get_custom()
/**
* Get available stack key options
*
* @return string[]
*/
function cs_stack_keys()
/**
* Get current stack
*
* @return array
*/
function cs_stack_current()
/**
* Is current stack custom stack or stack name is custom
*
* @return boolean
*/
function cs_stack_is_custom($stackName = null)
/**
* Get individual theme value
*
* @return mixed
*/
function cs_stack_get_value($name = '')
/**
* Return the stacks custom CSS
*
* @return string
*/
function cs_stack_custom_css()See something inaccurate? Let us know