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:
- Base styles
- Brand styles
- Grid system
- Unique content blocks.
- Clone the custom-sage theme, create a local WordPress website with docker and ensure WordPress is up to date.
- Install ACF Pro and ensure it's up to date.
- Configure tailwind.config.js to generate utility classes based on brand styles extracted from the designs in step 1.
- Create header & footer elements 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 IE 11, Firefox, Chrome, Safari & Android.
- Optimise website to achieve < 2 seconds load time on each page.
- Setup staging website for the client to experiment with their new theme & provide them with a handover document to give a run down of how the theme was made and how to use it, example.