Skip to main content

CTA Button

A call-to-action button for a header bar or footer column — text + link, styled with your Theme Settings button presets. Available in both the Header and Footer builders.

Where the code lives​

Type keycta_button
Fields defined ininc/includes/header-footer-option-helpers.php
Rendered byunysonplus_render_cta_button() in inc/includes/header-builder.php

Fields (element_type[cta_button])​

FieldTypeDefaultWhat it does
cta_texttextGet StartedThe button label
cta_linktext#The href
cta_stylebutton-style-pickerprimaryA Button preset → btn-{preset}
cta_sizeselect—A button size → btn-{size}

How it works​

The renderer reads the label and link, then builds the class list from your button presets via unysonplus_cta_button_classes() — no inline styles, so the button inherits the exact skin from Theme Settings → Components → Buttons:

$classes = unysonplus_cta_button_classes( $settings ); // "btn btn-{preset} btn-{size}"
echo '<a href="' . esc_url( $link ) . '" class="' . esc_attr( $classes ) . '">' . esc_html( $text ) . '</a>';

So the element's own output is a single anchor:

<a href="{link}" class="btn btn-{preset} btn-{size}">{text}</a>

…which the column renderer wraps in the shared .header-element wrapper.

Example 1 — basic​

Settings: Text Get Started, Link /contact, Style Primary, Size Large.

array(
  'element_type' => array(
    'element'    => 'cta_button',
    'cta_button' => array(
      'cta_text'  => 'Get Started',
      'cta_link'  => '/contact',
      'cta_style' => 'primary',
      'cta_size'  => 'lg',
    ),
  ),
  'visibility'        => array(),
  'element_css_class' => '',
)

Generated HTML:

<div class="header-element header-element--cta_button">
  <a href="/contact" class="btn btn-primary btn-lg">Get Started</a>
</div>

Example 2 — with Hide On + CSS Class​

Same button, but Hide On: phones and CSS Class: nav-cta.

array(
  'element_type' => array(
    'element'    => 'cta_button',
    'cta_button' => array(
      'cta_text'  => 'Get Started',
      'cta_link'  => '/contact',
      'cta_style' => 'primary',
      'cta_size'  => 'lg',
    ),
  ),
  'visibility'        => array( 'hide-xs' ), // Hide on phones
  'element_css_class' => 'nav-cta',          // CSS Class
)

Generated HTML — the two controls land on the wrapper (hide-xs from Hide On, nav-cta from CSS Class); the inner anchor is unchanged:

<div class="header-element header-element--cta_button hide-xs nav-cta">
  <a href="/contact" class="btn btn-primary btn-lg">Get Started</a>
</div>

Now .nav-cta { … } in Custom CSS targets exactly this button, and it's hidden on phones.