Below I've outlined the process I take when converting a custom design to a WordPress theme. With modern tools available like Roots Sage, TailwindCSS and Gutenberg, creating bespoke WordPress themes has not only become easier and quicker but also better for the user and Developer.
- Scan through the final designs extracting brand styles, a Grid system (optional) & unique content blocks.
- Create a local WordPress website with docker and clone my custom-sage starter theme into the themes folder.
- Install ACF Pro.
- Configure tailwind.config.js to generate utility classes based on brand styles extracted in step 1.
- Create the header & footer blocks and implement global ACF options.
- Iterate through and create a custom Gutenberg block for each unique content block extracted in step 1.
- Iterate through each custom Gutenberg block and make them responsive.
- Test all blocks, including the header and footer on all modern browsers including Firefox, Chrome and Safari.
- Optimise website to achieve < 2 seconds load time on each page.
- Setup a staging website for the client to experiment with their new theme & provide them with a brief handover document, listing all the custom Gutenberg blocks, example here.
I'm likely to update this post as time goes on, but I hope this post provides a good insight into how one WordPress developer builds WordPress themes based on completely custom designs.
My weekly newsletter
Summarizing all my weekly coding content including live code examples, blogs, YouTube tutorials and Instagram carousels.