Theme templates and file architecture
Staying organized is truly important for the maintenance of the project in the future. Good file architecture will help to achieve this!
Theme templates and file architecture for easy CSS or JavaScript maintenance
Use library or framework or write all code from scratch… Some developers claim that such libraries as Tailwind or Alpine.js are a must in every project in order to maintain it easily in the future. While I do agree with them for bigger website, but what about super simple web project with just a few page templates?
Reduce number of templates with dynamic content
Whenever I start a website theme from scratch, I try to identify patterns of pages or parts of the page and to re-use them as much as possible.
To keep it short a theme for your website will be made of partials (like header, navigation or footer elements) and page templates (everything that goes between those re-used parts). Some most common use cases are page banners, boxes, article section or list of related content. Can we re-use such parts? Not only we can, but we should re-use as much of the code as we can.
The main idea is to have a banner or part of the page where web admin or content coordinator could change the text and image or link, so the content would be fully dynamic.
Drag & drop principle – page builder
Have you ever used WordPress or Hubspot page builder? They make it easy to create landing pages truly fast and basically without programming or web development skills.
What is more, as I web developer I can develop and create custom drag & drop modules and then company specific landing page will be created even faster and will look completely as the part of the main theme.
If you would check some examples in my personal example page www.digitalrobke.com, you will see that I can create WordPress default page editor modules using REACT, CSS, HTML.
CSS and JavaScript file architecture
Theme templates and dynamic content helps to avoid repetition of the theme files, but what about CSS and JS code? Well, personally I use so called modular file structure, where the code is separated to single files and folders and bundled/minified for its final version. Some of the code can be called universal or treated as a base for the whole website, while other code is page or template specific. Please check my Github repositories for how I manage files in the development environment. One more thing for all my WordPress projects I typically use NPM @wordpress/scripts which allow to bundle up and minify build files quite nicely!
