[Resolved] Creating Business Category Taxonomy, with a sub-category. Display on front

[Author]

Posts

[laurieB]

Tell us what you are trying to do?

I am replicating an existing website. I have created custom fields, forms and views and now realize the Business Category is not set-up in a way it will work, as I had hoped, so back to the drawing board.

A new member when creating their member profile will select a business category from a drop-down (form), then a sub-category of that main category. I currently have one select drop-down, but it doesn't do multi-select. These categories, once selected will also be dynamic as a Post Term Taxonomy on my Elementor Template for the front-end member profile page, as well as being searchable by category, resulting in a category archive page. So I need to get this right.

Sample shows the member profile page I'm working on that I had some other questions in a support ticket.

Is there any documentation that you are following?

Is there a similar example that we can see? Here is the form, with no formatting. hidden link

What is the link to your site? hidden link

[Christian Cox]

A new member when creating their member profile will select a business category from a drop-down (form), then a sub-category of that main category. I currently have one select drop-down, but it doesn't do multi-select.
Hi, I'm not sure I understand the problem. When I visit this page, I can see a multi-select field where I can select multiple Business Categories by holding down Control (or Command on a Mac): hidden link
I'm attaching a screenshot here showing multiple selections. Are you saying that this multi-select field isn't saving the selected Business Category term(s) as expected when the Form is submitted? Or are you saying it saves the terms correctly but then you can't display that information for the new profile on the frontend of the site? Or is there something else I didn't understand?

[laurieB]

HI Christian,

I don't think it's clear to the user since they all appear in one list. Maybe it's simple as making the category bold, or another color and the sub-category have a dash before or more space on the left so there is hierarchy? Can the dropdown be styled with CSS? or Is there a way to select the category, then in a second drop-down select the sub-category for the selected category?

[Christian Cox]

Can the dropdown be styled with CSS?
Yes, you can apply your own custom CSS in the Form editor screen. For example this turns the top-level categories bold:

select[name="business-category[]"] option[data-parent="-1"] {
  font-weight: bold;
}

or Is there a way to select the category, then in a second drop-down select the sub-category for the selected category?
There's not a simple way to do this built into Views. It would require a significant amount of custom code with the Forms API, generic fields and Forms Conditionals. The general idea is you create one generic select field that holds all the top-level categories, then you create an additional generic select field for each of those top-level categories. Each of those fields holds all the subcategories of a single top-level category. Then you use Forms conditional groups to show and hide the subcategory generic fields based on the selected main category. You can use Views to define the options for each generic field.

When you're placing these input fields on an "Edit Post" Form, it's more complicated because you must be able to set the correct selections when the Form loads. Next you need to use the Forms API to capture the value of the selected categories and subcategories using PHP, and save them along with the post. So the simple approach is to use CSS if possible to style the multiselect input field, the more complex approach is to set up a generic field system in the Form.

[laurieB]

My issue is resolved now. Thank you!

With you help I was able to target the correct area and update the CSS on the dropdown to have the business category bold and the sub category have padding on the left and not bold. There is now a distinct difference between the two.

Thank you for your help.

Laurie