Dropdown list of categories in Editor

[WPIDev]

I’m hoping you can help us

We’re trying to find a way to add a category dropdown in the editor without changing the editor code to allow a user to select the categories for the Classic Recent Posts.

We’ve tried using the elements API, however there doesn’t seem to be a dropdown element we can use?

Also, we attempted to use the current element from the Classic Recent Posts - but it seems we can’t edit just one instance to make it load just categories

We currently have the below

We are trying to make this only show just a list of Categories instead of everything

[tristup]

Hi @hlbcode,

Thanks for reaching out.
You can try the dropdown by copying the setup from the Classic Recent Post element or any other elements. You can find more information and help from the following articles:

1. https://theme.co/docs/actions-filters-and-hooks
2. https://theme.co/docs/element-api-primer
3. https://theme.co/docs/element-api-reference

I would also suggest you go through the article here: https://theme.co/docs/element-api-reference#individual-controls to get an idea of the individual controls and the parameters.
Please remember that custom element development would require customization and which is beyond the scope of theme support. I would suggest you to avail of our newly launched service called One, where the customization questions are answered.

Thanks

[WPIDev]

Thank you for the reply,

We’ve gone through the Element API already and there doesn’t seem to be a dropdown element that allows multiple selections

Can you please point us to that element?

[tristup]

Hi @hlbcode,

You can check into the individual controls here: https://theme.co/docs/element-api-reference#individual-controls, especially the Control Reference with a list of controls you can use. You can get an idea from here in this article on how the option control can be used: https://theme.co/docs/element-api-primer#controls
You can download and try to install the sample extension that is in the document: http://community-themeco.s3.amazonaws.com/resources/my-extension.zip

Please remember that custom element development would require customization and which is beyond the scope of theme support. I would suggest you to avail of our newly launched service called One, where the customization questions are answered.

Thanks

[WPIDev]

Thank you for the reply,

We have tried all the controls there and can’t find one that allows us to achieve a control like the below

We have tried to use our on JS, however the editor seems to not let us use JS in the UI section - can you please maybe let us know where to add JS that the editor will allow to run in the UI without having to overwrite the editor and not affect future updates?

[marc_a]

Hi @hlbcode,

To add the JS code, please go to X/Pro > Theme Options > JS.

Hope that helps.

Thank you.

[WPIDev]

We tried this, however this does not affect the editor UI, just the page

We are trying to add a control to the editor - not the page.

[tristup]

Hi @hlbcode,

In order to use the JavaScript code, you need to write it in the specific element file and withing the <script> tag. If you are using the separate js file, you need to enqueue the file into your file.
Please find the example code to enqueue the js file:

    wp_enqueue_script( '<handler>', '<path of js file>', array(), '', true );

You can learn more about how to use the wp_enqueue_script file from here in this article: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Thanks

[WPIDev]

Thank you for the reply,

We have also tried this, however the editor removes all wp_enqueue_script on page load when targeting UI elements in the editor - so this only allow us to edit elements on the page generated by the editor, not in the editor itself. We need to add a category dropdown in the editor, not on the page generated by the editor. Adding JS works fine on the page, but gets removed when trying to load to add an element in the editor UI.

Please see below screenshots of what is happening:
In your main theme all actions are removed when loading the editor. So, any js we include using wp_enqueue_script action is getting removed because of the code in the theme.

Code Screenshot

As mentioned above, we are looking for a way to do this without making changes to the editor or theme directly so we can get the updates when you release them - if this is not possible, we will have to overwrite your code in the main theme and editor to add a multiple select dropdown control which we do not want to do.

We can see you have a new control in V4 which is in beta that allows multiple select, so if we need to wait for the new version to be released - not a problem, however it’s strange that an editor made for wordpress does not have a way of allowing someone to select more than one category for the posts they want to display as that is core functionality, also (maybe) stranger that there is no control for a multiple select dropdown in the Elements API.

Currently it’s not possible to select more than one category from a dropdown to display only some posts using the posts grid element in the editor - so we need to add a control for this, which we are happy to develop if you can please tell us how we can get our JS to not get removed by the editor in the main theme.

[tristup]

Hi @hlbcode,

I have already mentioned that the custom element development is a part of customization and which is beyond the scope of our theme support. I would strongly suggest you to avail of our newly launched service called One, where the customization questions are answered.

Thanks