Flynt is a powerful WordPress starter theme that embraces a component-based architecture, powered by Advanced Custom Fields Pro (ACF Pro) and Timber. In this tutorial, we’ll guide you through the process of setting up Flynt and customizing it to create your own unique theme. Let’s dive in!
Next, install the ACF Pro plugin, which is a requirement for Flynt due to its flexible content field. This field allows you to dynamically add components to your pages.
Download the Flynt theme, and move it to your themes directory.
Change the host variable in
vite.config.js to match your host URL:
const wordpressHost = 'your-project.test'
Now, open your console and navigate to the theme directory. Run the following commands, to install the dependencies:
# wp-content/themes/your-project composer install npm install npm run build
Activate the theme in the WordPress backend and you’re all set for a test!
Head over to the Pages section, edit the Front Page, and click the Add Component button to add your first component. Fill it with sample content and click Preview Changes to see the result.
For an efficient development workflow, it’s recommended to run the file watcher. This will automatically update your browser when changing a file.
Start the file watcher with the following command:
# wp-content/themes/your-project npm start
3.1 Customize the BaseStyle
The Base Style contains global elements and styles that ensure a consistent appearance across components.
To view the Base Style, navigate your browser to the following URL:
This will load the following twig template:
Make adjustments to the Base Style based on your custom design needs:
3.2 Modify Existing Components
Get familiar with the component concept, by exploring the
/Components/ folder. Pick a component, customize the markup in
index.twig and the styles in
_styles.scss according to your preferences. Watch the changes in your browser.
To understand how custom elements are utilized with components, examine the
script.js file of
load:on="visible" on the component element.
To add new fields to the backend, investigate the component’s
functions.php file. Use the Flynt VS Code Snippets to help with the ACF field syntax. And finally, discover the possibilities of processing data before it’s handed to the template, via Flynt filters by the example of
3.3 Create Custom Components
While Flynt provides prebuilt Components, you are encouraged to develop custom components for more variety, creativity and a unique experience of your theme.
Start from scratch or duplicate existing components that match your requirements. To include your component in the Add Component button list, add the ACF field layout to a field group:
To render a component statically in a template, use the following Twig function:
Before deploying your theme to a production environment, stop the file watcher and optimize your theme and assets for production use.
Generate a production bundle with the following command:
# wp-content/themes/your-project npm run build
Upload your theme to a server, or consider setting up a continuous deployment pipeline using GitHub Actions to streamline your production deployment process.
You’ve successfully installed and configured the Flynt starter theme. You’ve learned to customize components, create your own components and deploy to production.
Get ready to build outstanding WordPress themes with Flynt’s flexible and component-based approach!