Can't connect to Global Custom Parameter

Support
#1

Hello.

I am building out a custom ui in Global Parameters and have this section:

 "siosLayout": {
"type": "group",
"label": "Layout",
"params": {
  "sectionPadding": {
    "type": "dimension",
    "label": "Section",
    "description": "Vertical padding for sections on desktop. Default: 80px. Use in individual top/bottom padding fields.",
    "initial": "80px",
    "isVar": true
  },

I call it with:

{{dc:param:siosLayout.sectionPadding}}

But for some reason it does not connect and pull the data.

Advice is greatly appreciated.

Thanks!

#2

Hey @sprod,

To correctly retrieve the value of your global parameter, try referencing it with either of the following syntaxes:

  • Using global:
    {{dc:global:siosLayout.sectionPadding}}
  • Using shorthand g:
    {{dc:g:siosLayout.sectionPadding}}
#3

Hi @christian

Thank you for your quick response.

I just tried that as well well but nothing gets pulled through from my Global Parameters.

I even tested with a very simple unit slider but nothing goes through when I wire it up.

I should also mention that the syntax I’ve used is getting pulled from the dynamic data button. It is registering in the system from there, but when I put in the syntax to wire it up, it just doesn’t work.

ADDED UPDATE:

I removed all JSON code from Global Parameters (where it did not work) and I added it into the parameters of the element I am working on, and it worked fine there.

I isolated just this code:

{  "siosLayout": {
"type": "group",
"label": "Layout",
"params": {
  "sectionPadding": {
    "type": "dimension",
    "label": "Section Padding",
    "description": "Vertical padding for sections. Default: 64px",
    "initial": "64px",
    "isVar": true
  }
}   } }

I used this in the field for Top-Padding and it worked fine: {{dc:param:siosLayout.sectionPadding}}

I tried with all the variations: {{dc:p:siosLayout.sectionPadding}} - {{dc:g:siosLayout.sectionPadding}} - {{dc:global:siosLayout.sectionPadding}} and they all worked,but only on the element parameters. Nothing from the Global Parameters worked.

I 'd appreciate your input.

Thank you!

#4

Hey @sprod,

The issue occurs due to how Cornerstone compiles CSS variables for Global Parameters versus Element Parameters when "isVar": true is specified.

Why It Doesn’t Work from Global Parameters

  1. CSS Variable Output: With "isVar": true, the dynamic content token {{dc:global:siosLayout.sectionPadding}} resolves to a CSS variable reference (var(--p-global-sioslayout-sectionpadding)) rather than the raw value 64px.
  2. Missing Definition in :root: To make this variable functional, Cornerstone compiles global parameters in the :root selector via [Tss::generateGlobalParametersVariables()](file:///d:/laragon/www/pro/wp-content/themes/pro/cornerstone/includes/classes/Services/Tss.php#L98). However, this compilation exits early and fails to output any CSS variables if the saved global parameter data option (cs_global_parameter_data) is empty or its breakpoint base (_bp_base) is not initialized.
  3. Element Parameter Contrast: When placed in element parameters, the editor automatically initializes the element’s breakpoint metadata upon render, outputting the CSS variable (e.g., .e123 { --p-e123-sioslayout-sectionpadding: 64px; }) on the page.

How to Fix It

Option A: Disable isVar (Recommended)

If you don’t need this setting to act as a CSS custom property, change "isVar": true to "isVar": false (or remove "isVar" entirely) in your Global Parameters JSON schema:

"sectionPadding": {
  "type": "dimension",
  "label": "Section Padding",
  "description": "Vertical padding for sections. Default: 64px",
  "initial": "64px"
}

Option B: Initialize and Save the Value

If you must use "isVar": true:

  1. Define the parameters JSON in Global Parameters.
  2. Go to the Cornerstone builder interface.
  3. Open Theme Options > Global Parameters.
  4. Set/adjust the value in the UI controls and click Save in the builder.

2026-06-09_22h40_56
2026-06-09_22h40_56660×530 122 KB

If those don’t still work, please provide us with the following info in a Secure Note.

  • WordPress Login URL
  • Admin username and password

You can find the Secure Note button at the bottom of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks.

#5

Thank you @christian!

I sat all isVar to = false

That seemed to worked but I do have to save and refresh every time I make a change which is a little cumbersome.

I believe I tried Option B but it does not work either.

Appreciate it and looking forward to getting sorted.

#6

Hey @sprod,

Here is the breakdown of why this behavior is happening and how you can solve both issues to get real-time preview updates without saving/refreshing.

1. Why isVar: false requires a save and refresh

When isVar is set to false, Cornerstone compiles the raw value (e.g. 64px) directly into the generated CSS class stylesheet of the element. Since it is hardcoded, the builder cannot swap the value in real-time without re-compiling the stylesheet, which only happens when you save and refresh.

2. Why isVar: true (Option B) did not work

Cornerstone’s stylesheet compiler has a limitation when outputting global parameters as CSS variables. The compiler requires a breakpoint base (_bp_base) to be saved in the database under cs_global_parameter_data.

Because a standard parameter group doesn’t have responsive breakpoint data saved, _bp_base is absent. The compiler exits early, meaning the CSS variable definition (e.g. :root { --global-0: 64px; }) is never output to the page, leaving the variable unresolved.

The Solution: Create Your Own CSS Variable

You can get the best of both worlds (real-time preview updates in the builder, and fully functional values) by defining the CSS variable manually in your Global CSS.

  1. Keep "isVar": false in your Global Parameters JSON schema.
  2. Go to Theme Options > CSS (Global CSS) and register your own custom property using the raw dynamic content:
    :root {
  --sios-section-padding: {{dc:global:siosLayout.sectionPadding}};
}
  3. In your element’s Top-Padding field, instead of using dynamic content directly, reference your custom CSS variable:
    var(--sios-section-padding)

Why this will work:

  • Because isVar is false, the dynamic content resolves directly to the raw value (e.g., 64px) inside the Global CSS.
  • When you adjust the slider in the builder, the preview updates the Global CSS block instantly, updating the CSS variable value on :root and instantly updating all elements using var(--sios-section-padding) in real-time without requiring a save/refresh.