(Superseded) Link to external site from the main Discourse logo

Dev
1

:information_source: Discourse now offers an official theme component to support this use case:

Original Content

I’m not sure that having the main Discourse logo link to an external site is a great idea for most sites, but there are exceptions where it makes sense to take users to an external website when they click the main Discourse logo. If you want to do that, here’s how.

Create a new theme component

:warning: note, this section of the guide will be extracted into a dedicated topic soon.

Click the “Components” link from the sidebar of your Admin / Customize / Themes page. Then, from the bottom of the sidebar, click the “Install” button:

image
image1227×685 65.1 KB

On the modal window that opens, click the “Create New” link:

image
image840×1019 114 KB

Give your theme component a name and make sure that the “Component” type is selected. Then click the “Create” button:

image
image862×394 28.6 KB

You will then be taken to the theme component’s main page.

Add the code to the theme component

The code to override the main logo’s default URL needs to be added to the HEAD section of your theme component. To access the component’s editor, click the “Edit CSS/HTML” button:

image
image1201×804 72.6 KB

On the editor that opens, click the “Head” link:

image
image1196×513 33.5 KB

Depending on various conditions, add the following code snippets to the editor’s HEAD section to modify the URL that the home logo points to. Note that you need to replace https://example.com in the code with the full URL of your external site’s homepage:

  • to change the link to a static URL:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => "https://example.com")
</script>
  • to return a dynamic URL based on the current user:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      const currentUser = api.getCurrentUser();
      return `https://example.com/${currentUser.username}`;
    })
</script>
  • to return a URL based on a theme-component setting:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      return settings.example_logo_url_setting;
    })
</script>

Click the “Save” button to save your changes. Go back to the theme component’s main page after doing that, then click the “Add all themes” link to add the new component to all of your site’s themes:

image
image1192×530 53.6 KB

11 Likes
3

:+1:thank you so much for sharing！

5

image
image1816×312 30 KB

I added it in the header tag but it didn’t take effect

6

For me it works perfectly.
Did you do a “hard refresh” on your site with Ctrl + F5?

7

image
I used command+R and even turned on incognito mode, but it still didn’t work

1 Like
8

Thank you for sharing this how-to! I need to change the main header logo for a community and it works just perfectly using the code snippet.

However, I realized it will also change the link of the small logo that replaces the full logo when a topic title is shown on the header. E.g. the icon only here on meta:

image

This feels rather un-intuitive. Is it possible to add a further argument to the function so it doesn’t affect the small-logo?

9

Because of Upcoming Header Changes - Preparing Themes and Plugins, I think this needs to be changed to

<script type="text/discourse-plugin" version="1.34.0">
    api.registerValueTransformer("home-logo-href", () => "<full_url_of_your_website_homepage>");
</script>
2 Likes