OOW PJAX

Transform your WordPress site into a fast, seamless PJAX (PushState + AJAX) experience without jQuery.

OOW PJAX, by OOWCODE and OOWPRESS, revolutionizes WordPress navigation with PJAX (PushState + AJAX), delivering lightning-fast page transitions without full page reloads. Built with pure JavaScript (no jQuery), this lightweight plugin ensures a modern, fluid user experience while remaining compatible with any WordPress theme. Perfect for portfolios, blogs with persistent media players, dynamic content sites, e-commerce stores, or single-page app experiences.


Key Features

  • Seamless AJAX Navigation: Loads content via AJAX, updating specific containers without full page reloads.
  • Persistent Elements: Keeps fixed elements (e.g., media players, sticky menus, chat widgets) intact during transitions.
  • Browser History Support: Syncs URLs with the History API for natural forward/back navigation.
  • Customizable Loader: Style the loading overlay with CSS to match your brand (e.g., spinner, progress bar).
  • Content Caching: Stores pages locally for instant repeat visits, with adjustable cache lifetime and user-aware logic.
  • Advanced Form Handling: Submits forms (e.g., comments, login, contact) via AJAX, with explicit nonce support and redirect handling (301, 302, 303, 307, 308).
  • Dynamic Nonce Refresh: Automatically refreshes security nonces via AJAX for enhanced security and reliability.
  • Lightweight & jQuery-Free: Built with vanilla JavaScript for minimal footprint and maximum performance.
  • Flexible Configuration: Define target containers, exclude links/zones (e.g., .no-pjax, #wpadminbar), and add custom JS before/after navigation.
  • Debug Mode: Logs detailed information in the browser console and server logs for easy troubleshooting.
  • Secure Implementation: Uses dynamic nonces, sanitization, and strict validation for all settings and AJAX requests.
  • Script Priority Control: Customize the loading order of oow-pjax.js in the footer for compatibility.
  • Dynamic Style Management: Injects and manages page-specific stylesheets and inline styles asynchronously during PJAX transitions.
  • Advanced Script Execution: Re-executes scripts in updated containers or footer, with control over inline scripts and validation.
  • CodeMirror Integration: Edit Custom JS with syntax highlighting and a Dracula theme.

Frequently Asked Questions

PJAX (PushState + AJAX) loads content dynamically via AJAX while updating the browser’s URL. OOW PJAX uses this to create fast, app-like navigation, ideal for sites with persistent media players or dynamic content.

Yes! OOW PJAX is perfect for audio or video players. Exclude player controls (e.g., .player-controls) in Exclude Selectors or zones (e.g., .player) in Exclude Selectors Zone to keep them persistent.

Yes. Specify your theme’s content container (e.g., #main, .content) in Target Containers. Check your theme’s source code for the correct selector.

Yes, enable Enable Form Handling to submit forms (e.g., comments, login, contact) via AJAX, with explicit comment nonce support and robust redirect handling (e.g., 301, 302).

Edit Loader CSS in the Settings tab to customize the loading overlay. Use Reset to Default to revert to the default spinner.

Use the Script Priority setting in the Settings tab to control the loading order of oow-pjax.js in the footer (e.g., set a high value like 9999 to load late).

Yes, enable Page-Specific Styles to inject stylesheets and inline styles during PJAX transitions for consistent rendering.

Yes, works with WP Rocket, W3 Total Cache, and others. Enable Cache and set Cache Lifetime to balance speed and freshness.

Installation

Upload the oow-pjax folder to /wp-content/plugins/, or install via the WordPress plugins screen.

Activate the plugin through the Plugins menu in WordPress.

Go to OOWCODE > OOW PJAX in the admin panel. Configure settings in the Settings tab (e.g., target containers, exclusions, loader styles, form handling). Enable PJAX and save changes to start using seamless navigation.

Changelog

  • Added: Dynamic nonce refreshing via AJAX (refreshNonce and refresh_nonce) for enhanced security and reliability.
  • Added: Asynchronous stylesheet management (extractStylesheets and applyStylesheetsAsync) for page-specific <link> and <style> tags.
  • Improved: Form submission redirect handling with automatic follow-up GET requests for 301, 302, 303, 307, and 308 responses.
  • Improved: Server-side script validation in load_content and handle_form_submit to prevent execution of invalid scripts.
  • Improved: Detailed server-side error logging (error_log) for AJAX requests and redirects to facilitate debugging.
  • Improved: Cache management to include stylesheets, ensuring consistent rendering during cached page loads.
  • Improved: Admin interface with critical styles (<link rel="preload">) for faster font loading.
  • Fixed: Potential issues with duplicate stylesheets by checking for existing <link> and <style> tags.
  • Added: Enhanced redirect handling for form submissions, supporting 301, 302, 303, 307, and 308 responses with automatic follow-up GET requests.
  • Added: Form refresh targets (oow_pjax_form_refresh_targets) to update additional containers (e.g., #comments) after form submissions.
  • Improved: Form submission logic with serialized form data and explicit nonce handling for better security and compatibility.
  • Improved: Redirect detection in handle_form_submit with detailed logging for debugging (HTTP status, headers, body).
  • Improved: Cache management with timestamp validation and user-aware logic (disabled for logged-in users).
  • Improved: JavaScript code organization with detailed JSDoc comments for better readability and maintainability.
  • Improved: Error logging in PHP and JavaScript for easier troubleshooting of AJAX requests and script execution.
  • Fixed: Potential issues with script re-execution by ensuring proper replacement of script nodes.
  • Fixed: Minor bugs in form submission handling for edge cases with missing nonces or invalid redirects.
  • Added: Allow Risky Inline Scripts option to enable execution of inline scripts with addEventListener or window.location (use with caution).
  • Added: CodeMirror integration for Custom JS Before and Custom JS After fields with syntax highlighting and Dracula theme.
  • Added: Maximum cache size limit (MAX_CACHE_SIZE = 50) to optimize memory usage.
  • Improved: Inline script validation with isValidScriptContent to prevent execution of non-JavaScript content.
  • Improved: JavaScript code structure with detailed comments and better organization.
  • Improved: Error handling for custom JavaScript execution with detailed console logging.
  • Improved: Admin interface with critical styles to prevent FOUC and enhanced CodeMirror usability.
  • Added: Script Priority setting to control oow-pjax.js loading order in the footer (default: 9999).
  • Added: Page-Specific Styles option to inject stylesheets and inline styles during PJAX transitions.
  • Added: Script Re-execution options for targets, footer, and inline scripts.
  • Added: Dynamic notices in the admin interface for improved feedback.
  • Improved: JavaScript initialization with document.readyState check for late script loading.
  • Improved: Inline script validation to prevent non-JavaScript content execution.
  • Improved: Cache management with user-aware logic and validity checks.
  • Improved: Form handling with support for server-side redirects via Location header.
  • Improved: Security with strict script validation, wp_unslash, and esc_url_raw in AJAX requests.
  • Improved: Admin theme toggle with AJAX saving and UI responsiveness.
  • Improved: Documentation with detailed setting descriptions and internal code comments.
  • Initial release with seamless PJAX navigation, persistent element support, customizable loader, content caching, AJAX form handling, and debug mode.