amir
8feab03f00
- 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
85 lines
3.7 KiB
Markdown
85 lines
3.7 KiB
Markdown
# Hop On Hop Off — Astra Child Theme (header & footer)
|
|
|
|
This child theme replaces **Astra's** default header and footer with the
|
|
"Hop On Hop Off" design (the same look as `new front/index.html`), while leaving
|
|
the rest of Astra untouched. It pairs with the **Viator Collector** plugin, which
|
|
styles the page content (listing / single / homepage sections).
|
|
|
|
## What it does
|
|
|
|
- Disables Astra's header/footer markup and renders custom ones via the
|
|
`astra_header` / `astra_footer` hooks.
|
|
- Loads the design CSS **scoped to `.hoho`** (`assets/chrome.css`) so it can't
|
|
collide with Astra or other plugins.
|
|
- Prints the SVG icon sprite site-wide (reusing the plugin's copy when active).
|
|
- Header nav is a real WordPress menu (with a Tours dropdown); footer columns,
|
|
logo, socials and copyright are dynamic.
|
|
|
|
## Install (step by step)
|
|
|
|
1. **Astra must be installed.** Appearance → Themes → make sure the *Astra*
|
|
parent theme is present (it can stay inactive; the child needs it as a base).
|
|
2. **Copy this folder** `astra-child-hoponhopoff/` into
|
|
`wp-content/themes/` on your site.
|
|
3. **Activate** it: Appearance → Themes → *Hop On Hop Off (Astra Child)* → Activate.
|
|
4. **Create the menus:** Appearance → Menus. Create and assign menus to these
|
|
locations (Manage Locations tab):
|
|
- **HoHo — Header Menu** → your top nav. To get the *Tours* dropdown, add a
|
|
top-level item named "Tours" and drag destination/tour links **underneath**
|
|
it (indented) as sub-items.
|
|
- **HoHo — Footer: Quick Access**
|
|
- **HoHo — Footer: Tours**
|
|
- **HoHo — Footer: User Account**
|
|
(Footer columns with no assigned menu simply render their heading only.)
|
|
5. **Logo (optional):** Appearance → Customize → Site Identity → Select Logo.
|
|
If none is set, the bundled "Hop On Hop Off" SVG wordmark is used.
|
|
6. **Social links (optional):** they default to `#`. Set real URLs with a snippet
|
|
in this theme's `functions.php`:
|
|
```php
|
|
add_filter( 'hoho_socials', function ( $s ) {
|
|
$s['instagram'] = 'https://instagram.com/yourpage';
|
|
$s['facebook'] = 'https://facebook.com/yourpage';
|
|
$s['whatsapp'] = 'https://wa.me/…';
|
|
$s['telegram'] = 'https://t.me/…';
|
|
return $s;
|
|
} );
|
|
```
|
|
7. **Footer blurb & support link (optional):**
|
|
```php
|
|
add_filter( 'hoho_footer_about', fn() => 'Your footer paragraph.' );
|
|
add_filter( 'hoho_support_url', fn() => 'https://example.com/contact' );
|
|
```
|
|
|
|
## Header behavior
|
|
|
|
The header is **transparent and overlays a full-bleed hero** (homepage, and the
|
|
plugin's listing/single pages), then turns solid on scroll — exactly like the
|
|
mockup. On pages that have **no hero**, `chrome.js` adds `.is-solid`, so the
|
|
header renders as a solid, sticky bar that stays readable and doesn't cover
|
|
content.
|
|
|
|
If on your site the transparent overlay ever sits wrong on a hero page (theme
|
|
wrappers differ between setups), force the solid style everywhere by changing the
|
|
top of `assets/chrome.js` so it always adds `is-solid`, or add this CSS:
|
|
|
|
```css
|
|
.hoho .site-header { position: sticky; inset-block-start: 0;
|
|
background: rgba(0,0,0,.85); backdrop-filter: blur(12px); }
|
|
```
|
|
|
|
## Regenerating the CSS
|
|
|
|
`assets/chrome.css` is generated from the design source with the plugin's scoper:
|
|
|
|
```bash
|
|
VC_SCOPE=.hoho node ../viator-collector/build/scope-css.js "../new front/css/style.css" assets/chrome.css
|
|
```
|
|
|
|
## Notes
|
|
|
|
- Requires the **Astra** parent theme. Tested against Astra's
|
|
`astra_header_markup` / `astra_footer_markup` hooks; if a future Astra version
|
|
renames those, update the `remove_action()` calls in `functions.php`.
|
|
- Icons come from `assets/sprite.svg` (`<use href="#i-…">`). When the Viator
|
|
Collector plugin is active, its identical sprite is reused to avoid duplication.
|