Working in an agency my approach to this was always a classic theme with plain HTML, CSS, JS, and PHP. Additionally, plugins like ACF, CF7 come in handy. But with time came problems that now bug me constantly. Here’s a list of them:
* How should I go about making reusable components in my code? Having a git repo of HTML/CSS/JS files for each button, calendar, or other component and then copy-pasting them into a new project seems unintuitive and not the right way when we have solutions for components in React or Astro that are really well made.
* As pages get bigger and more interactive, the JS file (yep, only one) becomes tens of functions of spaghetti code for each part of the website, making several AJAX requests to functions.php to get some information from WP and build up the markup and back to JS to renew it on the page. Again, it doesn’t seem right.
* Having a theme folder with loads of files like page-this.php, page-that.php, or category-thisorthat.php seems messy and again not right. It lacks some kind of structure.
* Knowing about a possible solution of headless WP seems like some way out of using WP through its rest API and having a separate, maybe Astro/React front-end.
* Knowing that Gutenberg blocks/block themes are a thing, thinking is it the right way? The client gets the ability to do some editing (which we would discourage probably as the pages are designed by designers). But with some restrictions in place, it might work okay(?).
* Reading about some timber+twig solutions (don’t know much about this) gives a little hope that this can be a way also.
Maybe I lack some knowledge about the ecosystem, or how WP works that I find it unsettling, or maybe it is my own WP/existential crisis when everything doesn’t seem the right way
What is your way of doing it? Share your processes of structuring your code, what kind of stacks you use, how you couple things up, and solve the aforementioned problems.
[ad_2]
I use a paid page builder that covers all normal elements (like slideshows, sliders, video, whatever) as well as having a full dynamic design system. Can also insert custom CSS into every element.
It has a system to save and reuse pages, and use dynamic components to pull in data from ACF and other parts of the backend and website.
I am not going to share which page builder; because it doesn’t matter (it’s a lesser known, but still well supported one); the only thing that matters is that I’ve mastered it and have my own work flow. I have created incredibly complex designs from Figma for websites with 500k/visitors a month, to basic landing pages for new businesses.
Unless you are working on massive enterprise sites, I have no reason to believe you need to do almost anything that you’ve laid out in your OP. Most page builders will work and aren’t going anywhere anytime soon.
I don’t think there is any “right” way persay. But here is how I do things now.
I develop with LocalWP on my machine. I have my base starter theme that I built there is a default project with all of my previously built basic ACF flexible blocks already set up, as well as a bunch of all of the other “core” stuff for the theme. As I work on more projects, if I ever build a custom block that I think is very useful/could be useful for all of my clients, I just add it to this base starter theme.
When I get a new project, I simply clone my starter theme in LocalWP for the new site and start there. All of my common flexible blocks, settings, option page, as well as Kitchen Sink, Form Testing pages, etc are all there and ready to go. On most projects I typically only need to build a handful of new custom Flexible components since my core ones handle most use-cases. I just have to of course restyle/config the core blocks accordingly to match the new designs.
I also use SASS, and have everything broken out into individual tiny SCSS files. Header/Footer/Variables/Typography/etc… I start with the Variables and get all of my colors/variables updated, then move to Typography and get all of the typography settings done. It’s a very quick process these days.
I haven’t used a Custom Page Template in ages now. Everything just uses the default built in pages (for the most part, exception being single-custom_post_type.php files when needed. All pages are just built using ACF Flexible Content Fields with my blocks, and I also use ACF Extended for dynamic backend renders/previews of all of the blocks to give a Gutenberg-esque interface.
Forms I use Gravity Forms. I have a page with one huge form to test every single form field type. I also wrote all of my own styles for it. So once typography/color changes and all of that are done, I can very quickly test that all form fields look/render correctly and match the designs and adjust specific pieces accordingly.