To the future newbie Discourse developer like myself that finds this solution on Google and struggles to understand what’s going on here, I wrote this for you. I hope it’s helpful.
p.s. Any mistakes in phrasing or vocabulary are entirely my own. Again, I’m new around here.
Discourse allows you to customize Parent Themes by adding Child Themes, just like WordPress or any other theme-driven design environment. In Discourse, a Parent Theme is simply called “Theme” while a Child Theme is a “Theme Component”.
Custom hamburger menu links is a Theme Component. After the initial download, you can import it and deploy as a Theme or convert it to a Theme Component that modifies your default Theme.
In this tutorial, we will walk through downloading Custom hamburger menu links as a Theme, importing it into your site’s Theme directory, and converting it to a Theme Component that modifies your default Theme. We will then add a link to your user’s Profile page in the Hamburger menu.
Let’s get started.
- Copy the Custom hamburger menu links Repository link:
- Go to
https://example.com/admin/customize/themes (replacing “
example.com” with your Discourse install’s url).
- Click “Import”.
- Select “From the web”.
- Paste the Custom hamburger menu links into the blank field.
- Click “Import”.
Hamburger links component is now highlighted in Themes list on the left side of the screen. It’s tempting to begin following @Johani’s instructions to add custom links right away. However, at this stage, modifications made to the settings will not apply to your chosen Theme. Additionally, continuing with this as your site’s Theme means rebuilding all of your customizations from the beginning.
- Scroll down and click the red “Make component” button.
- You are now asked, “Are you sure you want to convert this Theme to component? It will be removed as a parent from all components.” Click “Yes”.
- Looking to the left, Hamburger links component has dropped from your Themes list to your Components list. Click your chosen default Theme from the Themes list.
Scrolling down, you now see a new heading labeled “Theme Components”. If this is your first component install, Hamburger links component will display in a dropdown menu.
- Click the checkbox next to “Theme includes other child themes”.
- Click the “+Add” button to the right of the dropdown menu where you see Hamburger links component.
- Click “Hamburger links component” in the Components list on the left side of your screen.
- Under “Theme Settings” delete “
General Link,https://twitter.com,g” in the second field.
- Replace it with “
- Click anywhere in the blank space on the page.
- Click the green check mark to save your changes.
- Refresh your screen.
- Click the Hamburger menu.
- Bask in the glory of your very own custom Hamburger menu link.
Congratulations! You just customized your Discourse Theme using a Theme Component for the first time! No small feat. Pour yourself a beer … or brew install a new package and pretend you did.
If you do not see the changes, be sure you have “Theme is enabled by default” selected on your chosen Theme’s Customize >> Themes page. Once you’re done drinking and see the changes, continue adding custom links per the instructions found here: Custom hamburger menu links
Hack on, my friend!