Customizing Courtside
Courtside integrates with the WordPress Customizer (Appearance → Customize) for colours, layout, header, and logo configuration. Customizer changes update live in the preview pane and apply across the site once published.
Logo and branding
In the Site Identity section:
Upload a logo image. The theme's
custom-headersupport is declared at 1000×150px (flexible).Set the site title and tagline.
The logo is rendered in the header's branding section.
Colours
The Colors section exposes:
Setting | Default |
Content text |
|
Content background |
|
Primary |
|
Link |
|
Text |
|
Background |
|
Heading |
|
The Primary colour drives buttons, accents, and highlighted UI. The Link colour applies to inline anchor tags. Heading and text colours apply across all body content.
If you change the primary or link colour, the change cascades through SportsPress league tables, calendars, and player profile pages because the SportsPress template overrides inherit the theme's colour variables.
Layout
The Layout section exposes:
Content width — slider between 1000px and 2000px (default 1000px). Adjusts the maximum content area width across the site, including SportsPress sections.
Header
Header configuration is split between Customizer settings and theme code:
The Customizer's Header section (where present) lets you choose header colour, search-icon visibility, and similar.
The header area sections — what appears in the header (menu, branding, banner, widgets) — are configured via the
header_area_sectionsfilter infunctions.php.
For Courtside, the default header sections are: (uses Rookie framework default sections).
Widgets and sidebars
Widget areas are registered in framework.php (or functions.php) and exposed under Appearance → Widgets. Each theme registers between 3 and 12 sidebars covering the primary content sidebar, footer columns, and SportsPress-specific sidebars (e.g. for team pages).
Customizing CSS without editing the theme
The cleanest way to add custom CSS is via Appearance → Customize → Additional CSS. This stores CSS in the database and survives theme updates. For larger CSS or PHP changes, use a child theme.
Child themes
To make code-level changes safely:
Create a child theme directory under
wp-content/themes/courtside-child/.Add a
style.csswithTemplate: courtsidein the header.Activate the child theme.
Custom templates and functions.php overrides go in the child theme. Parent theme files are loaded automatically as fallbacks.
