AI is everywhere. It helps you with generating ideas, fixing and improving texts, even writing texts from scratch. And the only thing you need to do – is ask them.
Can you build a nice looking design for a blog using tailwindccs?
Recently, in one Russian-spoken podcast, I heard they only can’t write a plugin for WordPress. However, in internal chats of the company that I work for, I heard that one colleague accomplished to write a plugin for scratch using ChatGPT.
I didn’t have an idea for a useful plugin, but I want to get a new theme for this blog. I asked AI to help with that.
can you build a nice looking design for a blog using tailwindccs?
ChatGPT answered with 7-bullet list of general pieces of advice on how to prepare a markup using TailwindCSS. That wasn’t what I expected.
One more try:
can you generate markup for my wordpress blog?
And I got another six suggestions, this time about HTML tags that might be useful.
But, again, I expected something specific…
I command!
I realized what was my mistake: I asked them if they can and got pretty general responses. I need to change wording to get anything new:
Generate the markup for the front page of my blog using TailwindCSS
ChatGPT responded with an actual HTML code that looked like a grid of posts with previews!
Awesome!
like it, make it look more like a professional site
ChatGPT added a few details to the initial markup. I suppose nobody says the design is anyhow professional, but I got it for free with a little time to spend.
This time I’m going to build a theme!
Cool, thank you. Write a WordPress theme from it, please.
But it looks I was too kind to them: I got a list of actions on how to convert that markup into a theme.
Okay, I committed the same mistake again. It’s time to fix it:
Let’s try again: convert the markup to a wordpress theme.
This time I got the same seven list items, but supplemented with real code excerpts.
Following the instructions, I took the pieces and put them into files.
The last step was to add a minified TailwindCSS file.
npx tailwindcss init tailwindcss-config.js
Tiny changes to look for content in PHP files inside the same folder and we’re ready to generate CSS.
npx tailwindcss -c ./tailwindcss-config.js -o tailwind.min.css -m
I tested the theme on this blog and realized that I also need a single post template.
This time, I asked Bing to help with that.
build html markup for my professional blog using tailwindcss
Unfortunately, Bing is not built for writing code. However, it wrote an article with an example of markup for the post. (Actually, my prompt is not good, and it doesn’t have any clue about the single post.)
I took that HTML and fed it to ChatGPT:
Okay, I have markup for a single post: {html-here}. Convert it into theme’s single post template.
No problem, I got a ready-to-use code with a few comments, describing what it has utilized here and how I can use this template.
Committed and pushed into the repo: https://github.com/merkushin/wp-ai-theme. Check it out 🙂