I’m building a new theme in 2024 and I need help starting

Most of the 150+ sites I’ve built over the years have been other people’s designs — either graphic designer output (Figma, FX, Photoshop, Illustrator, and even InDesign) or modernized recreations of existing site designs.

I gotta say that you’re not going to have much more luck using Figma than you would with Illustrator. You’re still going to have to do mostly hand coding, and you’re definitely going to have to do even more work to make sure everything’s responsive for the 30+ canonical screen sizes (not to mention the 100+ minor ones plus all the intermediate sizes you get from “playing the accordion” with browser windows.)

And more to the point, it’s especially not going to matter since you’re the one who’ll be generating the designs to begin with. So you’ll already have the colors, sizes, proportions, fonts, margins, borders, etc. in mind when you’re in creation mode.

*Plus* if you’re already a skilled site builder you’ll already have a mental map of what can and can’t be easily coded, so you’ll be as self-constrained with your Illustrator layout as you would with Figma.

While I agree with others that Figma is a good skill to have, particularly if you’re going to receiving design files from others, I think you’re probably raising obstacles for yourself.

I mean, not to sound dumb or anything but if it was me and I was planning to hand code a theme from scratch I’d probably break out an old-school HTML editor like Dreamweaver and learn that. There’s ample documentation for converting raw HTML + CSS to themes, and by-definition anything you create with Dreamweaver will be valid HTML. Then you can take use documentation and/or a course (e.g. Brad Schiff’s Udemy course) to convert an HTML design to a WordPress theme. https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/?couponCode=ST9MT22024

You could even wait a little longer for the new “FSE” block theme feature to get its act together and build your theme directly with that. But there’s a plugin for creating Block themes, even though last time I looked it still had some very rough edges. https://make.wordpress.org/test/2023/03/29/fse-program-exploration-build-a-block-theme/

2 Comments

aintTrollingYou says:
February 20, 2024 at 11:09 pm
> … this is the tool to go with especially as I want a responsive design.
I don’t design much myself, but I’ve build a ton of themes. I’ve worked with designs in Figma and it’s a handy tool but it won’t help your designs be responsive any better than Illustrator.
Figma is worth learning (and in my experience very straightforward) but if you flow better with Illustrator I’d stick with that. You can import Illustrator into Figma too, and have a best of both thing going.
> I’m also a little unsure regarding how best to build for multiple devices.
You’ve got the right idea. Designing for smaller screens is typically harder, so a “mobile first” design is common practice. Typically our designers only provide a desktop and mobile design and I have to figure out what it should look like on all the screen sizes in between as I write the CSS.
> Does anyone have any Figma templates they don’t mind sharing and if they have a very basic WordPress theme template they start off with that would be great.
I can’t help there, but I suggest you do a search for *components* for Figma. You’ll find a ton of those, and can use those as building blocks for your theme.
RealBasics says:
February 21, 2024 at 12:03 am
Most of the 150+ sites I’ve built over the years have been other people’s designs — either graphic designer output (Figma, FX, Photoshop, Illustrator, and even InDesign) or modernized recreations of existing site designs.
I gotta say that you’re not going to have much more luck using Figma than you would with Illustrator. You’re still going to have to do mostly hand coding, and you’re definitely going to have to do even more work to make sure everything’s responsive for the 30+ canonical screen sizes (not to mention the 100+ minor ones plus all the intermediate sizes you get from “playing the accordion” with browser windows.)
And more to the point, it’s especially not going to matter since you’re the one who’ll be generating the designs to begin with. So you’ll already have the colors, sizes, proportions, fonts, margins, borders, etc. in mind when you’re in creation mode.
*Plus* if you’re already a skilled site builder you’ll already have a mental map of what can and can’t be easily coded, so you’ll be as self-constrained with your Illustrator layout as you would with Figma.
While I agree with others that Figma is a good skill to have, particularly if you’re going to receiving design files from others, I think you’re probably raising obstacles for yourself.
I mean, not to sound dumb or anything but if it was me and I was planning to hand code a theme from scratch I’d probably break out an old-school HTML editor like Dreamweaver and learn that. There’s ample documentation for converting raw HTML + CSS to themes, and by-definition anything you create with Dreamweaver will be valid HTML. Then you can take use documentation and/or a course (e.g. Brad Schiff’s Udemy course) to convert an HTML design to a WordPress theme. https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/?couponCode=ST9MT22024
You could even wait a little longer for the new “FSE” block theme feature to get its act together and build your theme directly with that. But there’s a plugin for creating Block themes, even though last time I looked it still had some very rough edges. https://make.wordpress.org/test/2023/03/29/fse-program-exploration-build-a-block-theme/

Unable to Set Terms for Custom Post Types

Product images not showing at single product page