What are Theme Customizations?
Although Refoundry is almost theme-free because of how many settings it puts into the editor, it’s still technically a theme. It’s just a really lightweight, low-code, no-fuss variation of what most people expect from a WordPress theme.
Theme Customizations allow you to extend and modify your website’s design, functionality, and behavior beyond the default options provided by the Refoundry Plugin. By adding custom CSS, JavaScript, and PHP code, you can tailor your site to meet specific needs and achieve advanced features and aesthetics.
How it Works
With the Refoundry Plugin, you also receive a Starter Theme designed to facilitate advanced customizations. This theme is optimized for a professional production environment, enabling developers to implement complex customizations using modern tools and workflows like SCSS, BEM, JavaScript modules, and Webpack.
Theme File Structure
_src Folder: The theme includes a _src folder that serves as the workspace for all custom code. This folder is where you organize your JavaScript and SCSS files for easy management and compilation.
JavaScript Components and Helpers: Inside the _src folder, JavaScript components and helper functions are structured via an index.js file. This setup allows you to modularize your JavaScript code, making it more maintainable and easier to debug. Webpack is used to bundle these JavaScript files, ensuring that the final output is optimized for performance.
SCSS Structure: The _src folder also houses SCSS files organized into components, functions, global styles, mixins, and _vars. Each of these elements can be structured via index files, providing a clear and modular approach to styling. The SCSS code is compiled using Webpack, outputting two main CSS files: one for the admin interface (admin.css) and one for the public-facing styles (style.css). This separation allows for better control over styling different parts of the site.
SCSS and BEM for Custom CSS
SCSS (Sass): The theme supports SCSS, a CSS preprocessor that enhances the styling process with features like variables, nested rules, and mixins. SCSS helps keep your stylesheets organized and maintainable, especially as your project grows.
BEM (Block Element Modifier): BEM is used for naming CSS classes in a consistent and readable way. This methodology helps you create reusable, modular components, making it easier to manage large codebases and ensure that styles are predictable and scalable. Refoundry’s class names through out block CSS structured to support BEM.
Custom JavaScript with Webpack
Modular JavaScript: The theme’s JavaScript files are organized into modules, which are then compiled and bundled using Webpack. This process optimizes your scripts for production, ensuring they are efficient and load quickly on your website.
Webpack Compilation: Webpack handles the bundling and minification of your JavaScript and SCSS files, creating a streamlined workflow for development. It watches for changes in your source files, automatically recompiling them whenever you make updates, which speeds up development and reduces the chances of errors.
Custom Development
functions.php: The theme includes a functions.php file, which works just like in any standard WordPress development workflow. This file is where you can add custom PHP functions to extend the backend capabilities of your website. Whether you need to create custom post types, add new taxonomies, or modify WordPress’ core functionality, functions.php provides the flexibility to do so.
theme.json: This file is a configuration file introduced by WordPress to manage theme settings in a structured way. The theme.json file in the Refoundry Starter Theme allows you to define global settings for typography, color schemes, spacing, and more. It’s a powerful tool for controlling the appearance of your site, ensuring consistency across different blocks and pages. By adjusting the theme.json file, you can fine-tune the visual aspects of your site without needing to hard-code styles into individual elements.
GIT Integration: Customizations are best managed within a production environment that includes proper GIT repositories. GIT provides version control, allowing multiple developers to collaborate effectively and track changes over time. This setup also enables you to test changes in a local environment before pushing them to a staging or live server, ensuring that your customizations are stable and optimized before going live.
Development Workflow: The workflow typically involves using Webpack to compile your assets, managing them through GIT, and deploying them to your production environment. This process ensures that your site is developed using best practices, with a focus on maintainability and scalability.
By utilizing the Starter Theme provided with the Refoundry Plugin, you can implement advanced customizations in a structured, efficient, and modern way. This setup not only enhances the functionality and appearance of your website but also ensures that your code is maintainable, scalable, and aligned with current web development best practices.
