Subsnippets are here 🎉. These are JS and CSS snippets that are associated with parent snippets, and can be used to add additional styling and functionality to generations to produce HTML, like templates, shortcodes, dashboard widgets, and more!
First, generate your overall snippet. Again, this feature is (currently) intended to work with snippets that add HTML to the frontend of a site, so shortcodes are the best candidate.
We can see that the output will add html to the frontend of the site:
But, there's no styling associated with this snippet, as it's the WordPress PHP mode.
Let's use the new subsnippet mode to create this CSS, based on this unique PHP snippet.
Click the CWPAI ID for the generation that you'd like to add a subsnippet to.
You'll end up on the single snippet page, and see a "Generate CSS" and "Generate JS" button. Note, sometimes, one language won't show, and this depends on the content of the parent snippet.
To generate my CSS, I click the button. It can take up to 30 seconds to create the subsnippet. First, our AI will review your HTML/PHP markup and associated classes, then it'll create the JS/CSS for it. Once generated, it'll show in the associated subsnippets tab.
Clicking will display the code in a popup.
Without Subsnippets CSS
With Subsnippets CSS
Currently, generations are relatively generic, but in the future, we'll 1) add support for CSS frameworks like Tailwind, and 2) eventually incorporate this with a new "project" feature, where you can add css, colors, and more to generate hyperspecific code for individual projects.
Please note, we're rolling this feature out to everybody over the next couple of weeks, so if you don't see CSS or JS (or both) imminently, know it's coming.
A tip worth noting - if your generations aren't looking exactly how you want, you can tell CodeWP to generate code specific for a styling method:
Prompt:// shortcode for grid of 6 most recent posts, include title, image, author, and published date. don't use li, use divs and add classes for flex
Multi step prompts are coming, and this Subsnippet release began to lay the foundation necessary to implement this.
https://codewp.canny.io/feature-requests/p/multi-step-prompts
