For Developers

Tips & Best Practices

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

add_action('jkd_before_footer', function() {
    echo '<div class="custom-cta">Contact us today!</div>';
});

#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

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

/* 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.

Last updated 19 Aug 2026

Was this article helpful?

Resources

On this page