Add Dropdown Menus in ghost Theme

image from https://ghost.org

As promised, here is the tutorial to add dropdown menus in our ghost.io website! (Sorry I was busy job hunting last semester 💼 It was until I got Covid then I realize I haven’t finished this article 😅) We will be testing in our local docker environment (👉 can refer to this post.)

1. Download a theme template
2. Customize its header
3. Add CSS styling
4. Publish our new theme

Our Goal

I have articles under different tags:

I want to display all article tags in the header. Each category will show a dropdown list of posts tagged with this label.

Our final result ✨

1. Download a template

It’s always easier to start with a template 🙃 Ghost has many templates here. In this demo, we will use Liebling.

Install Liebling → Download and install manually

1️⃣ We will get a zip file named liebling-master.zip

2️⃣ Run ghost in docker (In docker desktop, press start ▶)

3️⃣ In http://localhost:3001/ghost, our ghost control backend, upload the zip file.

Setting → Design → Change theme → Upload theme → upload our zip file here!

Nice! Let’s check if the new theme is imported. Under the repo ghost/dest/themes, there should be a folder called liebling-master. Also, our localhost:3001 should look somewhat like this 👇

2. Customize its header