Add Astra child theme for Hop On Hop Off header & footer
- disables Astra header/footer via astra_header/astra_footer hooks and renders custom design markup (logo, nav dropdown, footer columns, socials, support) - chrome.css scoped to .hoho (generated from the design source); chrome.js for burger/submenu/sticky/back-to-top; bundled icon sprite (reuses plugin's) - parameterize scope-css.js scope via VC_SCOPE env Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01J4hNL1PSHxXbu94SCenpKj
This commit is contained in:
126
astra-child-hoponhopoff/functions.php
Normal file
126
astra-child-hoponhopoff/functions.php
Normal file
@@ -0,0 +1,126 @@
|
||||
<?php
|
||||
/**
|
||||
* Hop On Hop Off — Astra child theme.
|
||||
*
|
||||
* Replaces the Astra header/footer with the "Hop On Hop Off" design and loads
|
||||
* the scoped chrome stylesheet + SVG icon sprite site-wide.
|
||||
*/
|
||||
defined( 'ABSPATH' ) || exit;
|
||||
|
||||
/**
|
||||
* Styles & scripts.
|
||||
*/
|
||||
add_action( 'wp_enqueue_scripts', function () {
|
||||
// Parent (Astra) base styles.
|
||||
wp_enqueue_style( 'astra-parent', get_template_directory_uri() . '/style.css', array(), null );
|
||||
|
||||
// Design typeface (same as the plugin's pages).
|
||||
wp_enqueue_style( 'hoho-fonts', 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap', array(), null );
|
||||
|
||||
// Header/footer design, scoped to .hoho so it can't fight Astra.
|
||||
wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', array( 'astra-parent' ), '1.0.0' );
|
||||
|
||||
// Header interactions: burger, submenu, sticky, back-to-top.
|
||||
wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.0', true );
|
||||
|
||||
// On pages without a full-bleed hero to overlay, the header renders solid and
|
||||
// sticky (added by chrome.js as .is-solid) so it stays readable and doesn't
|
||||
// cover content. Hero pages keep the transparent overlay + is-stuck on scroll.
|
||||
wp_add_inline_style(
|
||||
'hoho-chrome',
|
||||
'.hoho .site-header.is-solid{position:sticky;inset-block-start:0;padding-block:var(--sp-2);'
|
||||
. 'background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}'
|
||||
);
|
||||
}, 20 );
|
||||
|
||||
/**
|
||||
* Theme supports + menu locations.
|
||||
*/
|
||||
add_action( 'after_setup_theme', function () {
|
||||
add_theme_support( 'custom-logo', array( 'flex-width' => true, 'flex-height' => true ) );
|
||||
register_nav_menus(
|
||||
array(
|
||||
'hoho_primary' => __( 'HoHo — Header Menu', 'hoponhopoff' ),
|
||||
'hoho_quick' => __( 'HoHo — Footer: Quick Access', 'hoponhopoff' ),
|
||||
'hoho_tours' => __( 'HoHo — Footer: Tours', 'hoponhopoff' ),
|
||||
'hoho_account' => __( 'HoHo — Footer: User Account', 'hoponhopoff' ),
|
||||
)
|
||||
);
|
||||
} );
|
||||
|
||||
/**
|
||||
* Print the SVG icon sprite once, high in the footer, so <use href="#i-…">
|
||||
* resolves everywhere (header, footer, and the plugin's pages).
|
||||
*/
|
||||
add_action( 'wp_footer', function () {
|
||||
// Reuse the plugin's guarded printer when available, so the sprite is never
|
||||
// output twice on plugin pages.
|
||||
if ( function_exists( 'vc_print_icon_sprite' ) ) {
|
||||
vc_print_icon_sprite();
|
||||
return;
|
||||
}
|
||||
$sprite = get_stylesheet_directory() . '/assets/sprite.svg';
|
||||
if ( is_readable( $sprite ) ) {
|
||||
echo file_get_contents( $sprite ); // phpcs:ignore
|
||||
}
|
||||
}, 1 );
|
||||
|
||||
/**
|
||||
* Swap Astra's header/footer markup for ours.
|
||||
*
|
||||
* Astra prints its header via astra_header_markup() on the `astra_header`
|
||||
* action, and its footer via astra_footer_markup() on `astra_footer`. We remove
|
||||
* those and render our own template parts. Deferred to `wp` so Astra's parent
|
||||
* functions.php (which registers the callbacks) has already loaded.
|
||||
*/
|
||||
add_action( 'wp', function () {
|
||||
if ( function_exists( 'astra_header_markup' ) ) {
|
||||
remove_action( 'astra_header', 'astra_header_markup' );
|
||||
}
|
||||
add_action( 'astra_header', 'hoho_render_header' );
|
||||
|
||||
if ( function_exists( 'astra_footer_markup' ) ) {
|
||||
remove_action( 'astra_footer', 'astra_footer_markup' );
|
||||
}
|
||||
add_action( 'astra_footer', 'hoho_render_footer' );
|
||||
} );
|
||||
|
||||
function hoho_render_header() {
|
||||
require get_stylesheet_directory() . '/inc/header.php';
|
||||
}
|
||||
function hoho_render_footer() {
|
||||
require get_stylesheet_directory() . '/inc/footer.php';
|
||||
}
|
||||
|
||||
require get_stylesheet_directory() . '/inc/nav-walker.php';
|
||||
|
||||
/**
|
||||
* The logo: a linked WordPress Custom Logo if one is set, otherwise the bundled
|
||||
* "Hop On Hop Off" SVG wordmark.
|
||||
*/
|
||||
function hoho_logo() {
|
||||
$home = esc_url( home_url( '/' ) );
|
||||
if ( has_custom_logo() ) {
|
||||
$id = get_theme_mod( 'custom_logo' );
|
||||
$img = wp_get_attachment_image( $id, 'full', false, array( 'class' => 'logo' ) );
|
||||
if ( $img ) {
|
||||
return '<a class="header__logo" href="' . $home . '" aria-label="' . esc_attr( get_bloginfo( 'name' ) ) . '">' . $img . '</a>';
|
||||
}
|
||||
}
|
||||
ob_start();
|
||||
?>
|
||||
<a class="header__logo" href="<?php echo $home; ?>" aria-label="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
|
||||
<?php require get_stylesheet_directory() . '/inc/logo.php'; ?>
|
||||
</a>
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
|
||||
/**
|
||||
* Small helper: inline-icon markup referencing the sprite.
|
||||
*/
|
||||
function hoho_icon( $name, $extra = '' ) {
|
||||
$name = preg_replace( '/[^a-z0-9\-]/', '', 'i-' . ltrim( (string) $name, 'i-' ) );
|
||||
$class = 'icon' . ( $extra ? ' ' . $extra : '' );
|
||||
return '<svg class="' . esc_attr( $class ) . '" aria-hidden="true"><use href="#' . esc_attr( $name ) . '"></use></svg>';
|
||||
}
|
||||
Reference in New Issue
Block a user