How It Works

OOW PJAX intercepts internal link clicks and form submissions, loading content via AJAX and updating the browser’s URL using the History API. Key steps include:

• Link Interception: Captures clicks on internal links, skipping external links, target="_blank", excluded selectors (e.g., .no-pjax), or zones (e.g., #wpadminbar).
• AJAX Loading: Fetches new page content and scripts without reloading the entire page.
• Content Update: Replaces specified containers (e.g., #main, .content) with new content.
• URL Synchronization: Updates the browser’s URL for natural forward/back navigation.
• Persistent Elements: Preserves fixed elements (e.g., media players, sticky headers) during transitions.
• Style Management: Asynchronously injects page-specific stylesheets and inline styles for consistent rendering.
• Script Management: Re-executes scripts in updated containers or footer with strict validation.
• Form Handling: Submits forms via AJAX, supporting comment nonces and server-side redirects (301, 302, 303, 307, 308).
• Caching: Stores pages locally for instant repeat visits (disabled for logged-in users).
• Loading Indicator: Displays a customizable overlay during transitions with adjustable minimum duration.
• Nonce Refreshing: Dynamically refreshes security nonces via AJAX for reliable requests.

Why Use OOW PJAX?

• Lightning-Fast Navigation: Reduces load times by avoiding full page reloads.
• Seamless User Experience: Delivers smooth, app-like transitions for better engagement.
• Persistent Elements: Keeps media players, menus, or widgets active during navigation.
• Lightweight & Modern: Uses vanilla JavaScript, no jQuery, for optimal performance.
• Developer-Friendly: Offers custom JS execution, script priority control, and debug tools.
• Secure Implementation: Employs dynamic nonces, sanitization, and script validation.
• Theme-Agnostic: Works with any WordPress theme via customizable containers.
• SEO-Friendly: Maintains proper URLs and history for search engine compatibility.
• Advanced Form Handling: Supports complex form submissions with redirect handling and nonce refreshing.
• Dynamic Styling: Ensures consistent rendering with asynchronous stylesheet management.

Configuration and Settings

Configure OOW PJAX in the Settings tab (OOWCODE > OOW PJAX > Settings). Below is a detailed breakdown of each setting:

Custom JS Configuration: In the Custom JS tab, add JavaScript to execute before or after PJAX navigation using CodeMirror with syntax highlighting and a Dracula theme. Example: Trigger analytics (gtag('event', 'pjax_load')) or reinitialize a slider ($('.slider').slick()).

Tips for Optimal Configuration

Identify Theme Containers

• Inspect source code (right-click > Inspect) to find the main content container (e.g., #main, .content).
• Test with one selector before adding multiple to avoid conflicts.

Test Exclusions

• Add .no-pjax to links bypassing PJAX (e.g., PDFs, popups).
• Exclude persistent elements like media player controls (e.g., #player-controls) or zones (e.g., .player).

Customize the Loader

• Modify Loader CSS to match your brand (e.g., use theme colors).
• Ensure visibility on all devices, including mobile.

Optimize Script Loading

• Set Script Priority to a high value (e.g., 9999) if other scripts conflict with PJAX.
• Use Custom JS to reinitialize scripts (e.g., sliders, analytics) after navigation.

Style Management

• Version 1.4 automatically manages page-specific stylesheets and inline styles asynchronously to prevent duplicates.
• Verify styles load correctly in the browser’s developer tools.

Form Handling

• Test all forms (e.g., Contact Form 7, login) with Enable Form Handling enabled.
• Use Target Refresh Containers to update areas like #comments after submissions.
• Dynamic nonce refreshing ensures reliable form submissions during long sessions.

Use Debug Mode

• Enable Debug Mode to log AJAX requests, script execution, and errors.
• Check the console (F12) or server error logs for detailed information.

Test Caching

• Enable Enable Cache and set Cache Lifetime for frequently visited pages.
• Ensure dynamic content (e.g., comments) updates correctly with caching plugins like WP Rocket.

Example Configuration

For a WordPress site using a theme like Astra with a persistent audio player:

• Enable PJAX: Enabled
• Target Containers: #main .content
• Exclude Selectors: .no-pjax #player-controls .wp-block-button
• Exclude Selectors Zone: .player .footer
• Exclude External Links: Enabled
• Exclude Links with target=”_blank”: Enabled
• Enable Cache: Enabled
• Cache Lifetime: 3600 (1 hour)
• Enable Debug Mode: Disabled (enable for troubleshooting)
• Enable Loader: Enabled
• Loader CSS: border: 5px solid #0073aa (theme color)
• Minimum Loader Duration: 300 ms
• Enable Form Handling: Enabled
• Target Refresh Containers: #comments .comment-form
• Script Priority: 9999
• Custom JS Before: console.log('PJAX navigation started');
• Custom JS After: gtag('event', 'pjax_load'); $('.slider').slick();

Troubleshooting

Content Not Loading

• Verify Target Containers selectors are correct (e.g., #main exists).
• Enable Debug Mode to check console and server logs for AJAX errors.

Loader Not Displaying

• Ensure Enable Loader is checked and Loader CSS isn’t overridden.
• Check for conflicting CSS in the browser’s developer tools.

Scripts Not Executing

• Verify Script Priority is high enough (e.g., 9999) to avoid conflicts.
• Use Custom JS After to reinitialize scripts (e.g., $('.slider').slick()).

Styles Not Applying

• Check browser tools to ensure stylesheets load without duplicates.
• Enable Debug Mode to log stylesheet application errors.

Forms Not Working

• Test without Enable Form Handling to isolate issues.
• Ensure form plugins (e.g., Contact Form 7) are compatible with AJAX submissions.
• Verify dynamic nonce refreshing is functioning (check console logs).

Plugin Conflicts

• Add conflicting plugin selectors to Exclude Selectors or Exclude Selectors Zone.
• Temporarily disable other plugins to identify conflicts.

Support

• Contact [email protected] or visit the Support tab.
• Check full documentation at oowcode.com/oow-pjax.