Amir Bagheri
f58ed49d07
- Route pages by address to theme templates (about-us, contact-us, faq, blogs, posts) - Scoped design CSS (pages.css) + Astra/WordPress fixes (pages-wp.css), page JS - Contact form emails the new Settings -> Viator Collector -> Contact email (fallback: admin email), Reply-To the visitor, honeypot spam trap - Blog list shows real posts with search, sort and paging; posts use the article design with comments as reviews and related articles - Design images converted to WebP (~15MB PNG -> ~1MB) - Theme 1.0.10, plugin 1.9.1 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
107 lines
4.8 KiB
Markdown
107 lines
4.8 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' );
|
|
```
|
|
|
|
## 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:
|
|
|
|
```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.
|