hoponhopofftickets/astra-child-hoponhopoff

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:

   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):

   add_filter( 'hoho_footer_about', fn() => 'Your footer paragraph.' );
   add_filter( 'hoho_support_url',  fn() => 'https://example.com/contact' );
   

Design pages (About, Contact, FAQ, Blog)

inc/pages.php gives these pages the "new front" designs automatically, by address — no page template to pick:

Design	Used on	Template
About	page about-us (or about)	templates/about.php
Contact	page contact-us (or contact)	templates/contact.php
FAQ	page faq (or faqs)	templates/faq.php
Blog list	the Posts page, or page blogs / blog	templates/blog.php
Blog post	every single post	templates/post.php

• About/FAQ/Contact text is fixed in the templates (edit the files to change it).
• The contact form emails Settings → Viator Collector → Contact email (falls back to the site admin email), with the visitor as Reply-To.
• Blog list search/sort/paging use ?q=, ?sort= and ?pg=; post "Review's" are WordPress comments.
• Styles: assets/pages.css is generated — rebuild after changing the design CSS: VC_SCOPE='.hoho-page.hoho-page' node viator-collector/build/scope-css.js "new front/css/style.css" astra-child-hoponhopoff/assets/pages.css. WordPress-specific fixes live in assets/pages-wp.css.

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:

.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:

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.