Clearer directions (pls) re: adding search icon to Headline theme

Themes
1

I’m trying to follow various directions [changelog | developer docs] to add a search magnifying glass icon next to my social media icons in the header area.

I know I need to put them in the gh-head-actions area of my default.hbs file - but that’s about as far as I’ve gotten.

The developer docs say I need to add the following code →

Screen Shot 2022-07-28 at 1.53.01 AM
Screen Shot 2022-07-28 at 1.53.01 AM1696×646 72.3 KB

But what I do not understand is this:
(1) Do i need to create + add a search.hbs file into the icons folder??
(2) If so - what code should go in there?

I am not aware of an existing “element” in the Headline theme where you could simply add this - so I feel like there are just more steps that are not clearly delineated.

It would be great to have a very explicit tutorial like this - How to add social media icons to your Ghost theme - to do what I’m trying to do.
-What is the exact code to add
-Where to go to get the specific icon with SVG code that will work in this case
-How to style the icon…

I got as far as adding the code to the right place - but I couldn’t make the magnifying class appear and I believe I would also run into styling issues… I’m hoping someone can walk me through this. Very. Slowly.

(Also seems odd to me that a theme for news publishers would not come with search loaded into it from the beginning… Maybe this will come in a later update?? I know this is a relatively new feature and I’m so glad it exists! But this noob needs more guidance to make it work.)

Directions that end at “Add the data-ghost-search data attribute to any element in the theme” are not going to get me there, sadly.

I did add “Search” to the nav bar for now - but prefer the magnifying glass/icon approach and I cannot figure it out. Thanks!

2

I think you’re on the right track and almost there :tada:

First, which theme are you using? I remember you mentioning Headline in another thread, which now has a search icon by default.

To your questions:

  • You don’t need to create search.hbs
  • Search can be activated on a link or a button like this:
    <a href="#/search">Search</a>
    <button data-search-ghost>Search</button>
  • To add an icon, there are many libraries to choose from. Here’s an example of an icon from Bootstrap’s icon library
<a class="search-button" href="#/search">
  <svg fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
  </svg>
</a>

<button class="search-button" data-search-ghost>
  <svg fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
  </svg>
</button>
  • There are lots of variables to styling, but you’d generally do something like this
.search-button {
  width: 20px;
  height: 20px;
  color: #000;
}

.search-button svg {
  width: 100%;
  height: 100%;
}

I think that should put you on the right track, but let me know if you have additional questions

3

This looks fantastic! I’ll definitely work on this. Truly appreciate all of this info.

I’m using Headline - there’s no search showing anywhere on the site by default … maybe I need to tweak something in the theme? (I didn’t remove anything like that either …)

4

Maybe there’s a newer version since you installed it…? Here’s the latest demo version with search: https://headline.ghost.io/

And, for reference, here’s the search button in the theme’s code

1 Like
5

I will look at that! I did see the search on the demo site but didn’t know how to find out more. :slight_smile:

This made me realize yet something else I don’t know - when I have customized aspects of the theme (as I have) - how do I also ensure Ghost-side aspects of the theme are updating when they are pushed (and stay aware of them)? :pray:

Thanks for all your help! I’m really loving the platform!

6

Glad you’re loving it — we’re loving your enthusiasm!

Once you install a Ghost theme (except for Casper), it won’t receive updates unless you reinstall the latest version. Generally, this isn’t too big of an issue, except in this case (exception proves the rule?!) with the launch of search, which is a major new feature.

1 Like
7

Thanks so much - I did re-download the theme and then added back in my customizations. I thought about just adding that line related to the search icon but I wasn’t entirely sure there had been no other improvements. Also wanted to document the tweaks I made better than I had the first time - in case I need to go back and do this stuff again at some point! :)

Anyway, I’m really glad you pointed me toward the updated theme. It seemed to have the same version number as the one I had downloaded the first time - 1.0.0 - so I just never would have known what I was missing had you not pointed me in the right direction. :)

Also good to know that it’s best to stick with Casper if you want to get the updates.

Many thanks for all of your help. The Ghost team is so awesome!

I wanted to mark one of your posts as the solution but then felt like there were multiple strong contenders so I’ll just leave it as it is.

1 Like