The contribution payment verification page has lost the site theme styling

Question

In general, what would cause a contribution verification page to lose the current theme styling? This is the page that appears after our initial membership contribution page when the user presses Submit after selecting PayPal or Pay by Check. The verification page has completely lost the header, footer, everything related to the current wordpress theme. The page still functions, but looks really strange compared to the first page.

Edit: In fact the confirm.tpl template based page is being rendered without head or body tags, it's just an html fragment. This is obviously why there is no theme on the page. As a test I switched to another theme and the page renders correctly -- so it has something to do with the theme.

I was able to get some generous support from the theme vendor. So far there is no fix for this. Confirm.tpl doesn't load the page header, and the vendor needs to know where this usually occurs. Quote:

Ok do you have any support with this plugin [CiviCRM]? Because the template you spoke of doesn't add the header. I assume they are using some kind of wrapper but looking at the files in the plugin they are doing this in a non-traditional way. What I would need to know is how they are forcing in the template and on what hook? For example if they are using a template redirect to force their template in - where is the template that calls in the normal wordpress functions like getting the header.

Answer 1

This relates to the custom WordPress theme you're using, whose default/CiviCRM template doesn't work as expected by CiviCRM.

As Christian Wach says in his answer to Why does CiviCRM render a validation failure without the Wordpress theme?, this can be resolved by adding some custom code to a plugin on your site, or by modifying your custom theme to closer match the output of WordPress default themes (which are currently the reference themes that CiviCRM is tested with).

This issue can be duplicated with the free version of the Virtue theme you state you're using - here's the confirm page using the TwentySixteen theme and Virtue side by side.

If you want to pursue using that theme, you'll need to look into addressing this - talking to the theme authors & requesting CiviCRM support would be my recommendation.

EDIT: Adding code from a comment below by @Darren; this would be added to your theme's functions.php

add_filter('civicrm_basepage_template', 'use_my_own_template_for_civi');

function use_my_own_template_for_civi($template) { 
  if ($template=='page.php') { 
    return 'templates/front-page.php';
  } 
  return $template; 
}

I'm not sure the templates/ prefix should be in there - perhaps a Wordpress user can confirm what works :)

Answer 2

Do you see &snippet=1 in your contribute page URL?

That parameter can be used to deactivate the theme on a CiviCRM page.

Eg -

• CiviCRM demo donate page as per normal & then without theme
• CiviCRM profile page as normal & same without theme

If that parameter is present in the link to your contribution page, remove it and see if this restores the proper theme.

Does your contribute page still work without the theme?

Answer 3

This might happen if you had a contribute page served over SSL, which referenced theme resources (CSS, images) which were served from a non-SSL URL.

Is your site served over both SSL (https) and non-SSL (http)? If so you need to account for this when dealing with URLs throughout CiviCRM.

(It's far easier, and more secure for all, to just use SSL all the time.)

---

To debug this, I would load the initial page with the browser's Dev Tools open, watching the Network tab to see which resources were included. Then when you proceed to the next page, compare the activity on the Network tab there.

If the same resources are references in the page but the browser rejected then, that might be SSL mismatch or similar.

If the resources aren't requested on the second load, compare the HTML of each page and see how they differ - this suggests something happening at the CMS/CRM to alter output.

I've seen ad blockers reject theme resources too; swapping your browser to anonymous mode or swapping to another browser can help show if the issue is browser/extension specific.

Answer 4

I believe I've seen this behaviour exhibited on CiviCRM/Drupal when the CIVICRM_UF setting in civicrm.settings.php was misconfigured (Drupal6 on a site running Drupal 7, or vice versa perhaps).

This won't apply in your case since you appear to be running WordPress. However, it might be interesting to explore related avenues to the host CMS - eg CMS output functionality, and variations in versions. So:

• Are there plugins (eg caching, filters) which affect output on your WordPress sites and which might affect this?
• Can this be reliably resolved by switching the site theme? (You mention you have a custom theme purchased from a theme vendor - if so, which?)
• What particular version of WordPress are you running? Is it known to be compatible with the particular CiviCRM version you have?
• see if you can come up with similar questions to ask yourself ...