OWFR Password Page
Technical Reference
How the branded password-protection layer works on the Ottawa West Four Rivers Ontario Health Team website.
How the branded password-protection layer works on the Ottawa West Four Rivers Ontario Health Team website.
The OWFR Password Page plugin replaces the default WordPress password-protected page form with a visually branded OWFR layout. When a visitor arrives at any WordPress page that has been set to Password Protected, instead of the plain, unstyled default form they see a full-page card that matches the OWFR visual identity.
The plugin has no admin settings page, no shortcode, and no dashboard. It works automatically on every password-protected page across the site with no configuration required.
The plugin uses two parallel interception strategies to ensure the branded form is displayed regardless of which WordPress theme is active.
The OWFR website uses the Divi theme. Divi bypasses WordPress's
standard the_password_form filter by rendering password pages through
its own template system. To handle this, the plugin hooks into
template_include at priority 999 (very late) and checks whether the
current page is a singular post that requires a password. If so, it loads
owfr-password-template.php from the plugin folder instead of
Divi's template, rendering a complete standalone HTML page.
For themes that use the standard WordPress password form, the plugin also hooks
into the_password_form and replaces the default form output with the
same branded HTML. This ensures compatibility if the theme ever changes.
Both strategies call the same internal function, owfr_render_password_form(),
which generates the complete branded form HTML. This means the visual output is
identical regardless of which interception path was used.
WordPress automatically prepends "Protected: " to the title of
password-protected pages. The plugin hooks into the_title filter to
silently strip this prefix, keeping page titles clean.
The branded form renders a centered card on a full-page background. The card contains the following elements in order:
| Element | Description |
|---|---|
| OWFR logo | The OWFR colour bilingual logo, loaded from the WordPress media library at /wp-content/uploads/2026/02/OWFR-colour-bilingual-large.png. |
| Lock icon | An inline SVG padlock icon. No external icon font required. |
| Heading | "Protected Content" as an h2 element. |
| Description | A brief sentence instructing the user to enter the password. |
| Error message | Shown conditionally when a wrong password has been submitted. See Section 4. |
| Password input | A styled type="password" input with placeholder text. Includes autofocus, autocomplete="off", and spellcheck="false" attributes. |
| Show/hide toggle | A button inside the input field that toggles between visible and hidden password text. Uses two inline SVG eye icons (open and closed). Managed by owfr-password-page.js. |
| Submit button | An "Unlock" button with an inline SVG padlock icon. Posts the form to wp-login.php?action=postpass. |
| Hint text | A footer note below the form: "If you don't have the password, please contact your organization's administrator." |
WordPress handles password verification by setting a browser cookie named
wp-postpass_{COOKIEHASH} when a password is submitted. If the password
is wrong, the cookie is set with an invalid hash and the browser is redirected back
to the password page.
The plugin detects this state by checking for the presence of that cookie on page load. If the cookie exists (meaning a failed attempt has already been made), the plugin:
owfr-pp-error to the card wrapper, which triggers a visual error state in the CSS (typically a red border accent).The plugin enqueues its assets conditionally: they are only loaded when the current page is a singular post that requires a password. They are never loaded on other pages.
| File | Handle | Purpose |
|---|---|---|
owfr-password-page.css |
owfr-password-page |
All visual styling for the password card, input, button, toggle, and error state. Self-contained: no dependency on the theme's stylesheet. |
owfr-password-page.js |
owfr-password-page |
Powers the show/hide password toggle button. Loaded in the footer (in_footer: true). No dependencies on jQuery or any other library. |
owfr-password-template.php outputs a complete HTML document
and includes the styles inline or via a direct link. The wp_enqueue_scripts
hook may not fire in this path. The template handles its own asset loading.
Intercepts the theme template at priority 999. Replaces Divi's template with the plugin's own full-page template when a password is required.
Fallback for non-Divi themes. Replaces the standard WordPress password form with the branded HTML output.
Conditionally enqueues owfr-password-page.css and owfr-password-page.js only on pages where a password is required.
Strips the "Protected: " prefix from the page title when the page requires a password. Applied at priority 10.
owfr-password-page.php
Main plugin file. Registers all hooks, renders the form HTML, and conditionally enqueues assets.
owfr-password-template.php
Standalone full-page template used by the Divi template override path. Outputs a complete HTML document independent of the theme.
owfr-password-page.css
All CSS for the branded card layout, form elements, toggle button, and error state.
owfr-password-page.js
JavaScript for the password show/hide toggle. No external dependencies.
The plugin activates automatically for any WordPress page with the built-in Password Protected visibility setting. No shortcode or special configuration is required.
To password-protect a page in WordPress:
Once saved, any visitor who navigates to that page will see the OWFR branded password form automatically. The password is set per-page and can be different for each protected page on the site.
OWFR Password Page Plugin | Ottawa West Four Rivers Ontario Health Team | April 2026