Link to external site from the main Discourse logo

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:

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

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

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:

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

Add the following code to the editor’s HEAD section. Note that you need to replace <full_url_of_your_website_homepage> in the code with the full URL of your external site’s homepage:

<script type="text/discourse-plugin" version="1.3.0">
    api.changeWidgetSetting('home-logo', 'href', '<full_url_of_your_website_homepage>')
</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:

11 Likes

:+1:thank you so much for sharing!


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

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

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

1 Like

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?