## For Developers Product: Monogram - Personal Portfolio WordPress Theme URL: https://hub.jkdevstudio.com/docs/monogram/tips-best-practices/for-developers Updated: 2026-08-19 This section covers hooks, filters, CSS architecture, and JavaScript globals available for extending Monogram in a child theme or custom plugin. ## Action Hooks

Hook	Location	Parameters	Description
`jkd_before_footer`	footer.php	-	Fires before the footer wrapper. Use to inject content above the footer.
`jkd_before_page_content`	page.php	`$post_id`	Fires before page content output.
`jkd_after_page_content`	page.php	`$post_id`	Fires after page content output.
`jkd_after_portfolio`	portfolio/loop.php	-	Fires after the portfolio archive grid.

### Example: Add content before footer ```php add_action('jkd_before_footer', function() { echo '

'; }); ``` ## Filter Hooks

Filter	Default	Parameters	Description
`jkd_page_content_classes`	`[]`	`$classes, $post_id`	CSS classes on page content wrapper
`jkd_page_header_classes`	`[]`	`$classes`	CSS classes on page header
`jkd_page_header_title`	Auto-detected	`$title`	Page header title text
`jkd_page_header_subtitle`	`''`	`$subtitle`	Page header subtitle
`jkd_footer_classes`	`[]`	`$classes`	Footer wrapper CSS classes
`jkd_footer_tagline`	Setting value	`$tagline`	Footer tagline text
`jkd_footer_copyright`	Setting value	`$copyright, $style`	Copyright text
`jkd_footer_social_items`	Setting value	`$items, $style`	Social links array
`jkd_footer_contact_data`	Setting value	`$data`	Footer contact information
`jkd_nav_logo_url`	Setting value	`$url, $context`	Navigation logo URL
`jkd_nav_cta_args`	Setting value	`$args`	Nav CTA button arguments
`jkd_nav_social_items`	Setting value	`$items`	Nav social links
`jkd_walker_max_items`	`7`	`$count`	Max top-level menu items before overflow
`jkd_localize_ajax`	AJAX data	`$data`	Localized AJAX data passed to JS
`jkd_localize_settings`	Settings data	`$data`	Localized settings passed to JS

### Example: Change max menu items ```php add_filter('jkd_walker_max_items', function() { return 9; }); ``` ## JavaScript Globals

Global	Description
`window.jkdGetSetting(key, fallback)`	Read Customizer setting. Supports URL param override for testing.
`window.isMobile()`	Returns true on mobile devices (768px breakpoint + UA check). Cached, resets on resize.
`window.jkdPlaySound(name)`	Trigger a sound effect programmatically. Names: hover, click, toggle, submit, open, close, success, error
`window.jkdLazyLoad.refresh(root)`	Re-trigger lazy loading on newly injected DOM content
`window.jkd_settings.kirki`	All Customizer settings object
`window.jkd_ajax.ajaxurl`	WordPress AJAX endpoint URL

## CSS Custom Properties ```css /* Border radius */ --jkd-br-sm: 5px; --jkd-br-md: 8px; --jkd-br-lg: 15px; --jkd-br-xl: 50px; /* Opacity */ --jkd-op-xl: 0.15; --jkd-op-lg: 0.42; --jkd-op-md: 0.62; --jkd-op-sm: 0.82; /* Transitions */ --jkd-tr-dr: 0.255s; --jkd-tr-tp: cubic-bezier(0.4, 0, 0.2, 1); /* Color scheme (set dynamically) */ --jkd-accent, --jkd-bg, --jkd-bg-secondary, --jkd-text, --jkd-heading, --jkd-border ``` ## Child Theme Install `monogram-child.zip` from the theme package. Override any template by copying it from the parent theme into the child theme, maintaining the directory structure. Example: to override the portfolio single template, copy `template-parts/portfolio/single.php` to your child theme at the same path.

Never edit parent theme files directly. All customizations should go in your child theme or a custom plugin to survive theme updates.