Set a Custom URL for Your Header Logo

What this setting does#

By default, clicking the logo in your website header takes visitors to your homepage. Sometimes you’ll want it to go somewhere else. For example, an event website might send visitors back to your main church site or your denomination’s site.

The Logo link URL setting only changes where the logo goes when someone clicks it. It does not change your logo image or your site address.

Set a custom logo link in Doctrine#

If your site uses the Doctrine theme, you can change the logo link in Doctrine’s theme settings. You’ll need to be logged in as an administrator.

1. In your WordPress dashboard, go to Appearance > Header Settings.
2. In the header layout, click your existing Logo element. This opens Logo Settings.
3. In the Logo link URL field, enter the full address you want visitors to go to, including https://. For example: https://amezion.org/
4. Click Save Settings.

Each Logo element saves its own link. If your header has separate logo elements for desktop and mobile, repeat these steps for each one. If one logo element has both a light and a dark image, both images use the same link.

Go back to linking to your homepage#

If the Logo link URL field is blank, the logo links to your website’s homepage. To undo a custom link, clear the Logo link URL field and click Save Settings. If the field only shows your homepage address as placeholder text, no custom link is saved.

Check your changes#

Open your live website and click the header logo on both desktop and mobile to make sure it goes where you expect. If you don’t see your saved change, follow our guide to clearing your cache and try again.

If your site uses a custom header built in Beaver Themer, that header may have its own logo link settings. In that case, the steps above may not change it.

Using a legacy theme?#

If your site still runs on Kadence, Astra, or Avada, you may not see Doctrine’s theme settings. You can contact Digital Church support and we’ll be glad to help.

If your site uses Kadence, you can also try the JavaScript below. It only changes Kadence logo links that match a.brand.has-logo-image, so it may not work on every site. It is not a general fix for Astra or Avada. Astra and Avada sites, and Kadence sites with a custom header, may need a different selector. Our support team can help with that.

(function () {
  function updateLogoLinks() {
    document.querySelectorAll('a.brand.has-logo-image').forEach(function (logo) {
      logo.href = 'https://amezion.org/';
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', updateLogoLinks);
  } else {
    updateLogoLinks();
  }
})();

1. Copy the code and replace https://amezion.org/ with the address you want your logo to link to. Keep the quotation marks.
2. Paste it into the custom JavaScript area your site already has. Don’t put it in a CSS field. To change the logo link in the header on every page, add it in the sitewide JavaScript area. To change it on just one page, add it to that page’s JavaScript area.
3. If the field accepts JavaScript, paste the code exactly as shown. Only if you’re using an HTML field that requires it, wrap the code in <script> and </script> tags.
4. Save or publish your changes, then click the logo on desktop and mobile to test it.

To undo this, remove the code and save again.