Skip to main content

Distribution · WordPress

WordPress & Kadence Integration

Official Texas A&M Transportation Institute design system integration for WordPress. Provides turnkey Kadence child themes, v3.0 Gutenberg block patterns, WCAG 2.2 Level AAA styles, and drop-in shortcodes.
WCAG 2.2 AAA Kadence Parity

Turnkey Child Theme (kadence-child-tti)

Located at packages/wordpress/kadence-child-tti/. Injects official TTI Maroon, 0px button geometry, and WCAG AAA tokens.

Portal Preview
Global Palette

Maroon (#500000) and Gold (#CFA935) customizer presets.

0px Geometry

Sharp rectangular buttons with 44px touch targets.

Utility Bar

Automated kadence_before_header institutional links.

WCAG 2.2 AAA

Enqueues tux-bridge.css for 7:1 contrast.

Quick Deployment

Admin Upload

  1. Zip directory: zip -r kadence-child-tti.zip packages/wordpress/kadence-child-tti
  2. Navigate to Appearance → Themes → Add New → Upload.
  3. Upload kadence-child-tti.zip and activate.

WP-CLI Deploy

cp -r packages/wordpress/kadence-child-tti /var/www/wp-content/themes/

wp theme activate kadence-child-tti

Theme Source Code

functions.php
<?php
/**
 * Functions and definitions for TTI Kadence Child Theme.
 * @package Kadence_Child_TTI
 * @version 3.0.0
 */
if (!defined('ABSPATH')) exit;

define('TTI_KADENCE_CHILD_VERSION', '3.0.0');

// Enqueue stylesheets, canonical tokens, and WCAG AAA bridge
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('kadence-parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('kadence-child-tti-style', get_stylesheet_directory_uri() . '/style.css', ['kadence-parent-style'], TTI_KADENCE_CHILD_VERSION);
    wp_enqueue_style('tux-tokens', 'https://cdn.jsdelivr.net/gh/ttitamu/tti-ux@v3.0.0/kit/css/tux-tokens.css', [], TTI_KADENCE_CHILD_VERSION);
    wp_enqueue_style('tux-bridge', 'https://cdn.jsdelivr.net/gh/ttitamu/tti-ux@v3.0.0/kit/css/tux-bridge.css', ['tux-tokens'], TTI_KADENCE_CHILD_VERSION);
    wp_enqueue_script('tux-elements', 'https://cdn.jsdelivr.net/gh/ttitamu/tti-ux@v3.0.0/packages/elements/dist/tux-elements.js', [], TTI_KADENCE_CHILD_VERSION, ['strategy' => 'defer', 'in_footer' => true]);
}, 20);

// Configure Kadence Global Palette with official TTI brand values
add_filter('kadence_global_palette', function($palette) {
    return array_replace(is_array($palette) ? $palette : [], [
        0 => ['color' => '#500000', 'name' => __('TTI Maroon (Primary)', 'kadence-child-tti'), 'slug' => 'theme-palette1'],
        1 => ['color' => '#3C0000', 'name' => __('Deep Maroon', 'kadence-child-tti'), 'slug' => 'theme-palette2'],
        2 => ['color' => '#CFA935', 'name' => __('Institutional Gold', 'kadence-child-tti'), 'slug' => 'theme-palette3'],
        3 => ['color' => '#221F1F', 'name' => __('Reading Charcoal', 'kadence-child-tti'), 'slug' => 'theme-palette4'],
        4 => ['color' => '#374151', 'name' => __('Secondary Slate', 'kadence-child-tti'), 'slug' => 'theme-palette5'],
    ]);
}, 20);

// Render Tier 1 Institutional Utility Bar above Kadence header
add_action('kadence_before_header', function() {
    ?>
    <aside class="tti-utility-bar" aria-label="<?php esc_attr_e('Institutional Utility Links', 'kadence-child-tti'); ?>">
        <div class="tti-utility-bar__agency">
            <a href="https://tti.tamu.edu" target="_blank" rel="noopener noreferrer">
                <?php esc_html_e('Texas A&M Transportation Institute', 'kadence-child-tti'); ?> &nearr;
            </a>
        </div>
        <nav class="tti-utility-bar__nav" aria-label="<?php esc_attr_e('Utility Navigation', 'kadence-child-tti'); ?>">
            <a href="https://tti.tamu.edu/jobs/"><?php esc_html_e('Jobs', 'kadence-child-tti'); ?></a>
            <a href="https://tti.tamu.edu/pressroom/"><?php esc_html_e('Pressroom', 'kadence-child-tti'); ?></a>
            <a href="https://tti.tamu.edu/directory/"><?php esc_html_e('Directory', 'kadence-child-tti'); ?></a>
            <a href="https://tti.tamu.edu/contact/"><?php esc_html_e('Contact', 'kadence-child-tti'); ?></a>
        </nav>
    </aside>
    <?php
}, 5);