Fresh X Mind Wordpress Starter Theme

Fresh X Mind is a custom Wordpress starter theme with a modern and simple development workflow made for developers. Hot-reloading and bundling using Webpack, SCSS stylesheets, ES6+ Javascript and a modern PHP approach are some of Ditso's main features.

Looking for a more minimal implementation, blank canvas, with only the basic workflow and no code? Look here for the "younger brother" of this repository, with no Customizer API implementation and nothing much so you can start custom projects without the need to delete much code if not relevant to your project.

Contributions and feedback welcome!

Features

• Live Reloading during development
• SCSS Support
• ES5+ syntax support
• Webpack Asset bundling and optimizations
• Built In Helper functions for debugging and common used functions
• Clear and modular folder structure for easy to maintain Wordpress themes
• Updated regularly with Wordpress standards and best practices
• Code Linting
• Clear docs and extending ready
• Built in basic common used functions to save the hustle
• • Custom theme hooks and actions built-in
• Theme Options customization using the Customizer API

Dependencies

• PHP >= 5.4
• Node.js >= 8
• Yarn
• Wordpress >= 5.3

Optional Dependencies

• Advanced Custom Fields
• WooCommerce

Note: To keep project setup steps simple, ACF is not included inside the theme. Make sure to install ACF and/or WooCommerce if you plan on using them.

Installation

1. Generate your repository from Github's template generator OR clone it.
2. Clone your new repo to the wp-content/themes folder of your Wordpress installation.
3. Navigate to the theme's root folder in your terminal and run yarn to get the development dependencies.
   • yarn

You should now have all the necessary dependencies to run the build process.

Run Webpack dev server with live reload

Update HOST near the top of build-tasks/env.config.js to reflect your local development hostname. -Although it's not necessary, we recommend using Laravel's Valet for setting up your local environment easily.-

• HOST: 'https://project-name.test'

With that done, you should now be able to run the project:

• npm run start

Compile assets for production

• npm run build (To do here add CI, deployment, etc).

Theme Customization

The fxm prefix can be changed by running a search and replace on the theme's folder and replacing it for your desired prefix/theme-domain.

Folder/Theme Structure

Here's a quick overview and walkthrough of how the theme's organized and the folder structure. Look at functions.php and the /inc/ folder

Main Workflow

Theme's templates (i.e header.php) execute action hooks (do_action()). These are located here: Theme Hooks.

The hooked actions and their corresponding functions are registered as template-parts. Might rename this for clearer convention

These functions fetch data if needed, and render partials or template-parts using get_template_part(). See the Header Action Functions for a working example.

Why do it like this instead of just calling the get_template_part() directly from the template files?

• Super easy to override/extend the theme by hooking into the right action from a child theme/plugin
• Keeps templates super clean and easy to read, maintain and update to fit custom needs
• Makes this a starter theme, potentially easy to extend into a stand-alone, white-label, generic solution

This is the way.

Styles

• Abstracts: Variables, functions, mixins, helpers. A good way to see this is, it should not print out any CSS code if compiled on it's own.
• Base: Settings, tools and helpers. Contains global styles, normalizers and utility classes.
• Blocks: Styles specific to blocks like the header, footer, or any full width section.
• Components: Styles specific to components like buttons, tooltips, and other small stand-alone reusable pieces.
• Layout: For things specific to the website's layout and formatting, global styles. Things specific to the theme either in FE or admin.
• Pages: Styles specific to pages like the home page
• Helpers: Overrides to colors classes and spacings, etc.

Debugging

Make sure to add the following at the bottom of your wp-config.php file:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', true );
define( 'WP_DEBUG_LOG', true );

this enables the creation and population of a debug.log file in your wp-content directory (look at the helper functions in /inc/common/helper-functions.php if curious on further implementation)

Usage

To be added soon...

Roadmap

See the open issues for a list of proposed features (and known issues). Any feedback, ideas or feature requests are welcome too!

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Acknowledgements

The core initial theme files were based off from Underscores.

Thought for Developers

While there are many great starter theme options out there already, I always found myself with the same issues when creating new projects. Some are just too basic and simple, with no development workflow and bundling. Others were maybe too complex, or had too many dependencies I didn't need. Most have too many options and code that won't be needed and added complexity to new developers and/or required to learn a HUGE library (usually not extensively documented btw).