Alphabetical Filters

Anonymous

#248664

Hello. I was wondering if it’s possible to create an alphabetical sort that appears as a horizontal list of letters at top of my posts. I have already created an alphabetical sort using a dropdown and custom post types, but now I would like to have all the letters appear in a horizontal line. Can I do that using Custom CSS? Link below.

https://plplightingsocal.wpcomstaging.com/line-card/

Trevor

#248757

You would need a custom field with the one letter in it. Have a look at these two threads (the private posts are not relevant):

https://support.searchandfilter.com/forums/topic/a-to-z-filter/

https://support.searchandfilter.com/forums/topic/a-to-z-filter-2/

Anonymous

#248848

Hi Trevor,

Thank you for the quick response. I do an alphabetical sort already that is using custom taxonomies. Right now, I have it set up as a dropdown, and it works perfectly. However, I was asked to make it a horizontal list. I was hoping you might have a little advice on what the custom CSS might be to make it appear horizontally?

Thanks

Trevor

#248852

Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#248894

Sure, no problem. See below.

https://plplightingsocal.wpcomstaging.com/line-card/

Trevor

#248896

Would you prefer these as buttons and for the checkbox to disappear, so clicking on the letters to select them?

Anonymous

#248898

Yes, exactly. It would be great if I could hide the checkbox, and just have the letters appear horizontally.

Trevor

#248900

This CSS should get you started:

.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical input {
  display: none;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label {
  text-align: center;
  width: 2.2em;
  line-height: 1.4em;
  border: 2px solid #666;
  padding: 3px;
  text-indent: 0;
  border-radius: 5px;
}
.searchandfilter[data-sf-form-id="1052"] ul {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical > ul > li {
  display: inline-block;
  margin-right: 10px;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical {
  display: block;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label:hover {
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="1052"] .sf-input-checkbox:checked + .sf-label-checkbox {
  color: #fff;
  background: #666;
}

Anonymous

#248902

That worked great! Thank you! However, now when i click one of the letters, it goes back to a vertical list of letters with no formatting. Is it possible to keep this formatting after a filter is applied?

Anonymous

#248904

Sorry, disregard my last message. I think it hadn’t fully updated when i previewed the page. This works perfectly now! Thank you!

[Author]

Posts