Travelify 3.1.1

A fix for a front-page regression in 3.1.0, reported from an iPhone.

What broke

On a site whose homepage slider had 42 images, 3.1.0 rendered every one of them at full height down the page, turned the pager into rows of grey rectangles, and left the mobile menu button doing nothing. The same site was fine on a desktop browser.

Why

The site serves a plugin-generated travelify_style.min.css with no version query string and Cache-Control: max-age=31536000. It was still the copy built from 3.0.9, so the browser was running 3.1.0's markup and JavaScript against the previous release's CSS.

3.1.0 had moved layout that the components need in order to function out of JavaScript and into the stylesheet — .travelify-slider .slides { position: absolute } is what makes the slider a slider, and #main-nav.is-open ul.root is what opens the menu. Neither rule exists in 3.0.9, so neither did anything.

The stale cache was the trigger, but the fragility was ours. The jQuery Cycle slider this replaced set position, width and offsets as inline styles, which is why the very same stale stylesheet never broke 3.0.9. The same mismatch happens to any child theme that carries its own copy of style.css.

The fix

slider.js now sets the slide positioning and the track's containing block inline, and gives the pager dots a minimal box. functions.js owns the menu's display rather than relying on a class having a rule behind it. Everything cosmetic — transitions, effects, colours — stays in CSS and remains overridable.

Verified by serving 3.0.9's style.css against current markup in both Chromium and WebKit (an iPhone device profile, the closest available stand-in for iOS Safari): slides stack, the pager stays small, and the menu opens and closes. That scenario now has permanent regression coverage.

If you are on 3.1.0 and seeing this, clearing your minify or page cache fixes it there too — you do not have to wait for this update.

Correction to the 3.1.0 notes

3.1.0 claimed the previous mobile menu was missing entirely. That was wrong, and the changelog has been corrected. TinyNav shipped bundled inside the minified functions.min.js and did build a working drop-down; the standalone tinynav.js in library/js was unused, which is what led to the mistaken reading. The 3.1.0 menu is a replacement for that drop-down — better structured and accessible, but not the first one.

---

travelify.zip below is the build for the WordPress.org theme directory.

Travelify 3.1.0

Two corrections, added after release.

1. Superseded by 3.1.1. On sites where an older copy of style.css is still being served — a child theme carrying its own, or a minify/cache/CDN layer holding a cached one — this release renders every slide at full height down the page and leaves the mobile menu button inert. Update to 3.1.1, or clear that cache.
2. The claim below that the mobile menu "was missing entirely" is wrong. TinyNav shipped bundled inside the minified functions.min.js and did build a working drop-down; the standalone tinynav.js was unused, which is what led to the mistake. The new menu replaces that drop-down rather than being the first one.

Travelify's first release in a while, and a substantial one: a security pass, a rebuilt mobile menu, and the end of jQuery in the theme's own JavaScript.

Requires WordPress 6.0+ and PHP 7.4+. Verified on WordPress 7.0 / PHP 8.5.

The mobile menu was replaced

Below 768px the old theme swapped the menu for a TinyNav drop-down: a bare <select> with no sub-menu structure and no accessible semantics.

There is now a real toggle button with aria-expanded, disclosure buttons for sub-menus (hover cannot open a dropdown on a touch screen), Escape to close, and a fallback that leaves the menu on screen when JavaScript does not run.

Security

• The per-post layout box saved whatever arrived in $_POST without unslashing, sanitising, or checking it against the layouts the theme offers. It now validates against that list and stores nothing else.
• The FeedBurner redirect passed a stored option straight to header(), so a value saved before that option was sanitised could inject response headers. It now re-validates with esc_url_raw() and redirects through wp_redirect().
• Colours are re-validated at output time, so a theme mod saved by an older version cannot break out of the <style> block, and the hex sanitiser no longer returns the raw input on failure.
• Output that was being printed raw is escaped: the header logo URL, the page title, post IDs in the admin column, the JSON slide list and the Customizer control labels.

No more jQuery in the theme's JavaScript

jQuery Cycle, TinyNav, cloneya, jQuery UI sortable and html5shiv are gone. The slider, back-to-top and the Customizer's slide repeater are plain DOM code loaded in the footer.

The slider honours prefers-reduced-motion, pauses while the tab is hidden, has a keyboard- and screen-reader-addressable pager, and skips posts with no featured image instead of cycling through a blank pane.

Modern WordPress

• The logo uses core's custom logo, so it gets srcset, cropping and live preview. A logo saved in the old theme option is migrated automatically.
• Block editor support: block styles, wide and full alignment, responsive embeds, custom line height, spacing and units, and an editor stylesheet that matches the front end instead of importing the whole layout.
• WooCommerce product gallery zoom, lightbox and slider.
• The Ubuntu webfont is bundled instead of being fetched from Google Fonts on every page load, which keeps visitor IP addresses off a third-party server.
• Assets are versioned from a single constant read from the style.css header.

Fixes

• The post title was being printed into the post meta bar next to the author and date: the_title_attribute() was called with the_title()'s argument list, so it echoed instead of returning.
• Featured images and post thumbnails now serve the cropped sizes the theme registers; it had been falling back to the full-size upload.
• The Customizer's control styling was rebuilt on a grid, so the slide rows no longer shift their layout depending on which buttons a row happens to show.
• Every link the theme renders is https and resolves without a redirect. The support forum, the wordpress.org review page and the Twitter link had all moved or stopped answering.
• Removed the leftover Google+ icon styling; the network shut down in 2019.
• Pinch zoom is no longer blocked, each view has exactly one h1 in the right place, and author, date and post-type archives finally get a heading.

Housekeeping

Removed the Grunt 0.4 toolchain (which also closes three Dependabot alerts) and the unused TGM Plugin Activation library. The screenshot went from a 1.1 MB PNG to a 347 KB JPG. All nineteen bundled translations were regenerated.

---

Verification: Theme Check 12,616 tests with 0 required and 0 warnings; phpcs --standard=PHPCompatibilityWP clean from 7.4 to 8.5; 504 browser checks across structure, accessibility, interaction, WooCommerce, the Customizer and contrast, run against a populated install with WooCommerce, Jetpack and the official WordPress theme unit test data, with an empty debug log throughout.

travelify.zip below is the build for the WordPress.org theme directory.