Skip to main content

The Beginner’s Guide to Developing a Custom WordPress Theme With Flynt

First time Flynt user? This tutorial will walk you through a typical Flynt process. From setting up the theme, to the development workflow and creating custom components.

Steffen Posted by Steffen in Tutorials 3 min read

Getting Started with Flynt

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!

1. Installation

To begin, install WordPress on your local development environment. Ensure that your development setup supports running Node.js and Composer.

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.

Download Latest Version

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!

2. Testing

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.

Flynt editing interface

3. Development

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: your-project.test/BaseStyle/

This will load the following twig template:your-project/​templates/basestyle.twig

Make adjustments to the Base Style based on your custom design needs:/​assets/styles/_base.scss

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 SliderImages . The JavaScript will only be loaded and executed when the component becomes visible in the viewport. This is defined in the template: index.twig with 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 GridPostsLatest.

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: /inc/fieldGroups/pageComponents.php

To render a component statically in a template, use the following Twig function:
renderComponent('BlockMyComponent')

4. Deployment

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.

Congratulations!

You’ve successfully installed and configured the Flynt starter theme. You’ve learned to customize components, create your own components and deploy to production.

Keep enhancing your knowledge by exploring Timber, creating custom post types, and discovering other Flynt customizations.

Get ready to build outstanding WordPress themes with Flynt’s flexible and component-based approach!

Related Posts