{"id":13610569,"url":"https://github.com/flyntwp/flynt","last_synced_at":"2025-04-12T22:34:18.688Z","repository":{"id":37733072,"uuid":"175819693","full_name":"flyntwp/flynt","owner":"flyntwp","description":"Component based WordPress starter theme, powered by ACF Pro and Timber, optimized for performance and a11y.","archived":false,"fork":false,"pushed_at":"2025-02-11T22:22:09.000Z","size":36349,"stargazers_count":752,"open_issues_count":7,"forks_count":85,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-02-11T23:29:21.313Z","etag":null,"topics":["acf","components","timber","wordpress","wordpress-starter-theme","wordpress-theme"],"latest_commit_sha":null,"homepage":"https://flyntwp.com","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flyntwp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-15T12:52:16.000Z","updated_at":"2025-02-11T22:22:13.000Z","dependencies_parsed_at":"2023-10-16T13:29:06.888Z","dependency_job_id":"d0c6c089-edf8-486a-886b-4dbde263a262","html_url":"https://github.com/flyntwp/flynt","commit_stats":null,"previous_names":[],"tags_count":17,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyntwp%2Fflynt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyntwp%2Fflynt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyntwp%2Fflynt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyntwp%2Fflynt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flyntwp","download_url":"https://codeload.github.com/flyntwp/flynt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248642308,"owners_count":21138350,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acf","components","timber","wordpress","wordpress-starter-theme","wordpress-theme"],"created_at":"2024-08-01T19:01:45.985Z","updated_at":"2025-04-12T22:34:18.681Z","avatar_url":"https://github.com/flyntwp.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"![Flynt – WordPress Starter Theme for Developers](.github/assets/banner.svg 'Flynt – WordPress Starter Theme for Developers')\n\n# Fall in love with WordPress (again)\n\n[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)\n[![Build Status](https://travis-ci.org/flyntwp/flynt.svg?branch=master)](https://travis-ci.org/flyntwp/flynt)\n[![Code Quality](https://img.shields.io/scrutinizer/g/flyntwp/flynt.svg)](https://scrutinizer-ci.com/g/flyntwp/flynt/?branch=master)\n\n[Flynt](https://flyntwp.com/) is a lightning-fast WordPress Starter Theme for component-based development with [ACF Pro](#advanced-custom-fields).\n\n## Dependencies\n\n* [WordPress](https://wordpress.org/) \u003e= 6.1\n* [Node](https://nodejs.org/en/) = 20\n* [Composer](https://getcomposer.org/download/) \u003e= 2.4\n* [Advanced Custom Fields Pro](https://www.advancedcustomfields.com/pro/) \u003e= 6.0\n\n## Install\n\n1. Clone this repo to `\u003cyour-project\u003e/wp-content/themes`.\n2. Change the domain variable in `flynt/vite.config.js` to match your domain:\n`const wordpressHost = 'http://your-project.test'`\n3. Navigate to the theme folder and run the following command in your terminal:\n\n```\n# wp-content/themes/flynt\ncomposer install\nnpm install\nnpm run build\n```\n\n4. Open the WordPress backend and activate the Flynt theme.\n\n## Usage\n\nTo start developing run the following command:\n\n```\n# wp-content/themes/flynt\nnpm start\n```\n\nAll files in `assets` and `Components` will now be watched for changes and served. Happy coding!\n\n### Build\n\nAfter developing it is required to generate compiled files in the `./dist` folder.\n\nTo generate the compiled files, run the following command:\n\n```\n# wp-content/themes/flynt\nnpm run build\n```\n\nTo skip the linting process (optional) and to generate the compiled files, run the command:\n\n```\n# wp-content/themes/flynt\nnpm run build:production\n```\n\n**Optional:** To further reduce the project size by excluding development dependencies, run:\n```\n# wp-content/themes/flynt\ncomposer install --optimize-autoloader --no-dev\n```\n\n### Base Style\n\nFlynt comes with a ready to use Base Style built according to our best practices for building simple, maintainable components. Go to `domain/BaseStyle` to see it in action.\n\n### Assets\n\nThe `./assets` folder contains all global JavaScript, SCSS, images, and font files for the theme. Files inside this folder are watched for changes and compile to `./dist`.\n\nThe `main.scss` file is compiled to `./dist/assets/main.css` which is enqueued in the front-end.\n\nThe `admin.scss` file is compiled to `./dist/assets/admin.css` which is enqueued in the administrator back-end of WordPress, so styles added to this file will take effect only in the back-end.\n\n### Lib \u0026 Inc\n\nThe `./lib` folder includes helper functions and basic setup logic. *You will most likely not need to modify any files inside `./lib`.* All files in the `./lib` folder are autoloaded via PSR-4.\n\nThe `./inc` folder is a more organised version of WordPress' `functions.php` and contains all custom theme logic. All files in the `./inc` folder are automatically required.\n\nFor organisation, `./inc` has three subfolders. We recommend using these three folders to keep the theme well-structured:\n\n* `customPostTypes`\u003cbr\u003e Use this folder to register custom WordPress post types.\n* `customTaxonomies`\u003cbr\u003e Use this folder to register custom WordPress taxonomies.\n* `fieldGroups`\u003cbr\u003e Use this folder to register Advanced Custom Fields field groups. (See [Field Groups](#field-groups) for more information.)\n\nAfter the files from `./lib` and `./inc` are loaded, all [components](#components) from the `./Components` folder are loaded.\n\n### Page Templates\n\nFlynt uses [Timber](https://www.upstatement.com/timber/) to structure its page templates and [Twig](https://twig.symfony.com/) for rendering them. [Timber's documentation](https://timber.github.io/docs/) is extensive and up to date, so be sure to get familiar with it.\n\nAs part of the [Twig Extension](#twig-extensions) the theme uses a Twig function in to render components into templates:\n\n* `renderComponent(componentName, data)` renders a single component. [For example, in the `index.twig` template](https://github.com/flyntwp/flynt/tree/master/templates/index.twig).\n\nBesides the main document structure (in `./templates/_document.twig`), everything else is a component.\n\n### Components\n\nA component is a self-contained building-block. Each component contains its own layout, its ACF fields, PHP logic, scripts, and styles.\n\n```\n  ExampleComponent/\n  ├── _style.scss\n  ├── functions.php\n  ├── index.twig\n  ├── README.md\n  ├── screenshot.png\n  ├── script.js\n```\n\nThe `functions.php` file for every component in the `./Components` folder is executed during the WordPress action `after_setup_theme`. [This is run from the `./functions.php` file of the theme.](https://github.com/flyntwp/flynt/tree/master/functions.php)\n\nTo render components into a template, see [Page Templates](#page-templates).\n\n#### Web Components\n\nWeb components provide a standard component model for encapsulation and interoperability HTML elements. Most [components](#components) are based on an autonomous custom element called `flynt-component`.\n\nTo define the name of a specific component use the `name` attribute, which should match the component’s folder name, to be ensure that its JavaScript is loaded as specified (see [JavaScript modules](#javascript-modules) for more details).\n\nFor example:\n\n```twig\n\u003cflynt-component name=\"BlockWysiwyg\" …\u003e\u003c/flynt-component\u003e\n```\n\n#### JavaScript modules\n\nUsing a module based approach, allows to breaks JavaScript into separate files and keep them encapsuled inside [Components](#components) itself.\n\nDifferent loading strategies can be defined for each component independently when using the custom element `flynt-component`:\n\n* `load:on=\"idle\"`\u003cbr\u003e\nInitialises after full page load, when the browser enters idle state.\u003cbr\u003e\nUsage example: Elements that don’t need to be interactive immediately.\n* `load:on=\"visible\"`\u003cbr\u003e\nInitialises after the element get visible in the viewport.\u003cbr\u003e\nUsage example: Elements that go “below the fold” or should be loaded when the user sees them.\n* `load:on=\"load\"` (default)\u003cbr\u003e\nInitialises immediately when the page loads.\u003cbr\u003e\nUsage example: Elements that need to be interactive as soon as possible.\n* `load:on:media=\"(min-width: 1024px)\"`\u003cbr\u003e\nInitialises when the specified media query matches.\u003cbr\u003e\nUsage example: Elements which may only be visible on certain screen sizes.\n\nExample:\n\n```twig\n\u003cflynt-component name=\"BlockWysiwyg\" load:on=\"visible\"\u003e\u003c/flynt-component\u003e\n```\n\nIf it makes logical sense, loading strategies can be combined:\n\n```twig\n\u003cflynt-component name=\"NavigationMain\" load:on=\"idle\" load:on:media=\"(min-width: 1024px)\"\u003e\n```\n\nWith nested components the loading strategy is waiting for parents. If you have a component with `load:on=\"idle\"` nested inside a component with `load:on=\"visible\"`, the child component will only be loaded on visible of the parent component.\n\n### Advanced Custom Fields\n\nDefining Advanced Custom Fields (ACF) can be done in `functions.php` for each component. As a best practice, we recommend defining your fields inside a function named `getACFLayout()` which you can then call in a [field group](#field-groups).\n\nFor example:\n\n```php\nnamespace Flynt\\Components\\BlockWysiwyg;\n\nfunction getACFLayout()\n{\n    return [\n        'name' =\u003e 'blockWysiwyg',\n        'label' =\u003e __('Block: Wysiwyg', 'flynt'),\n        'sub_fields' =\u003e [\n            [\n                'label' =\u003e __('Content', 'flynt'),\n                'name' =\u003e 'contentHtml',\n                'type' =\u003e 'wysiwyg',\n                'delay' =\u003e 0,\n                'media_upload' =\u003e 0,\n                'required' =\u003e 1,\n            ],\n        ]\n    ];\n}\n```\n\n### Field Groups\n\nField groups are needed to show registered fields in the WordPress back-end. All field groups are created in the `./inc/fieldGroups` folder. Two field groups exist by default: [`pageComponents.php`](https://github.com/flyntwp/flynt/tree/master/inc/fieldGroups/pageComponents.php) and [`reusableComponents.php`](https://github.com/flyntwp/flynt/tree/master/inc/fieldGroups/reusableComponents.php).\n\nWe call the function `getACFLayout()` defined in the `functions.php` file of each component to load fields into a field group.\n\nFor example:\n\n```php\nuse ACFComposer\\ACFComposer;\nuse Flynt\\Components;\n\nadd_action('Flynt/afterRegisterComponents', function () {\n    ACFComposer::registerFieldGroup([\n        'name' =\u003e 'pageComponents',\n        'title' =\u003e 'Page Components',\n        'style' =\u003e 'seamless',\n        'fields' =\u003e [\n            [\n                'name' =\u003e 'pageComponents',\n                'label' =\u003e __('Page Components', 'flynt'),\n                'type' =\u003e 'flexible_content',\n                'button_label' =\u003e __('Add Component', 'flynt'),\n                'layouts' =\u003e [\n                    Components\\BlockWysiwyg\\getACFLayout(),\n                ]\n            ]\n        ],\n        'location' =\u003e [\n            [\n                [\n                    'param' =\u003e 'post_type',\n                    'operator' =\u003e '==',\n                    'value' =\u003e 'page'\n                ]\n            ]\n        ]\n    ]);\n});\n```\n\nHere we use the [ACF Field Group Composer](https://github.com/flyntwp/acf-field-group-composer) plugin, which provides the advantage that all fields automatically get a unique key.\n\n### ACF Option Pages\n\nFlynt includes several utility functions for creating Advanced Custom Fields options pages. Briefly, these are:\n\n* `Flynt\\Utils\\Options::addTranslatable`\u003cbr\u003e Adds fields into a new group inside the Translatable Options options page. When used with the WPML plugin, these fields will be returned in the current language.\n* `Flynt\\Utils\\Options::addGlobal`\u003cbr\u003e Adds fields into a new group inside the Global Options options page. When used with WPML, these fields will always be returned from the primary language. In this way these fields are *global* and cannot be translated.\n* `Flynt\\Utils\\Options::getTranslatable` \u003cbr\u003e Retrieve a translatable option.\n* `Flynt\\Utils\\Options::getGlobal` \u003cbr\u003e Retrieve a global option.\n\n### Timber Dynamic Resize\n\nTimber provides [a `resize` filter to resize images](https://timber.github.io/docs/reference/timber-imagehelper/#resize) on first page load. Resizing many images at the same time can result in a server timeout. That's why Flynt provides a `resizeDynamic` filter, that resizes images asynchronously upon first request of the image itself. Resized images are stored in `uploads/resized`. To regenerate all image sizes and file versions, delete the folder.\n\nTo enable Dynamic Resize, go to **Global Options -\u003e Timber Dynamic Resize**.\n\n### Twig Extensions\n\n#### `readingTime` (Type: Filter)\n\nReturns the reading time of a string in minutes.\n\n```twig\n{{ 'This is a string'|readingTime }}\n```\n\n*Example from [Components/GridPostsArchive/index.twig](./Components/GridPostsArchive/index.twig)*\n\n---\n\n#### `renderComponent($componentName, $data)` (Type: Function)\n\nRenders a component. [See Page Templates](#page-templates).\n\n```twig\n{% for component in post.meta('pageComponents') %}\n    {{ renderComponent(component) }}\n{% endfor %}\n```\n\n*Example from [templates/page.twig](./templates/page.twig)*\n\n#### `placeholderImage($width, $height, $color = null)` (Type: Function)\n\nUseful in combination with lazysizes for lazy loading. Returns a \"data:image/svg+xml;base64\" placeholder image.\n\n```twig\n{{ placeholderImage(768, 512, 'rgba(125, 125, 125, 0.1)') }}\n```\n\n*Example from [Components/BlockImage/index.twig](./Components/BlockImage/index.twig)*\n\n---\n\n#### `resizeDynamic($src, $w, $h = 0, $crop = 'default', $force = false)` (Type: Filter)\n\nResizes an image dynamically. [See Timber Dynamic Resize](#timber-dynamic-resize).\n\n```twig\n{{ post.thumbnail.src|resizeDynamic(1920, (1920 / 3 * 2)|round, 'center') }}\n```\n\n*Example from [Components/BlockImage/index.twig](./Components/BlockImage/index.twig)*\n\n---\n\n## Troubleshooting\n\n### Images\n\nIn some setups images may not show up, returning a 404 by the server.\n\nThe most common reason for this is that you are using nginx and your server is not set up in the [the recommended standard](https://wordpress.org/support/article/nginx/#general-wordpress-rules). You can see that this is the case, if an image url return a 404 from nginx, not from WordPress itself.\n\nIn this case, please add something like\n\n```nginx\nlocation ~ \"^(.*)/wp-content/uploads/(.*)$\" {\n  try_files $uri $uri/ /index.php$is_args$args;\n}\n```\n\nto your site config.\n\nOther issues might come from Flynt not being able to determine the relative url of your uploads folder. If you have a non-standard WordPress folder structure, or if you use a plugin that manipulates `home_url` (for example, [WPML](https://wpml.org/)) this can cause problems when using `resizeDynamic`.\n\nIn this care try to set the relative upload path manually and refresh the permalink settings in the back-end:\n\n```php\nadd_filter('Flynt/TimberDynamicResize/relativeUploadDir', function () {\n    return 'app/uploads'; // Example for Bedrock installs.\n});\n```\n\n### SSL certificate for dev server\n\nIf you want to use https in development, please define the following variables inside a `.env` file:\n\n```\nVITE_DEV_SERVER_HOST=https://your-project.test\nVITE_DEV_SERVER_KEY=\u003cpath-to-ssl-certificate-key\u003e/your-project.test_key.pem\nVITE_DEV_SERVER_CERT=\u003cpath-to-ssl-certificate-cert\u003e/your-project.test_cert.pem\n```\n\n## Further Resources\n- [Flynt Website 🏠](https://flyntwp.com/) - Learn more about Flynt and its features.\n- [Flynt BaseStyle 🎨](https://flyntwp.com/BaseStyle/) - The default BaseStyle.\n- [Flynt Components 🧩](https://flyntwp.com/components/) - Free \u0026 Premium Component demos.\n- [Flynt Design Kit 🧑‍🎨](https://flyntwp.com/introducing-our-flynt-2-0-design-kit-for-figma/) - The Figma template to design custom websites.\n- [VS Code Snippets ✂️](https://github.com/flyntwp/flynt-vscode-snippets) - Code snippets and ACF field templates for Flynt.\n- [flynt-add-ons 🛠️](https://github.com/awesome-flynt/flynt-add-ons) - Additional tools and extensions for Flynt.\n- [Beginner's Guide to Flynt Development 📖](https://flyntwp.com/the-beginners-guide-to-developing-a-custom-wordpress-theme-with-flynt/) - A quick start to getting hands-on with Flynt.\n- [Continuous Deployments for Flynt Using GitHub Actions 📖](https://css-tricks.com/continuous-deployments-for-wordpress-using-github-actions/) - How to automate Flynt deployments.\n- [Flynt Introduction \u0026 Tutorial 📹](https://www.youtube.com/watch?v=8as8rVNcJuU) - A comprehensive video tutorial by [@aaronmeder](https://github.com/aaronmeder).\n- [What's New in Flynt v2.0 📹](https://www.youtube.com/watch?v=lt6TwEyVXm8) - A closer look at Flynt's latest features and changes.\n- [Understanding WordPress Starter Themes 📹](https://www.youtube.com/watch?v=xvi1yNz0MI8) - The motivation and background story of Flynt.\n\n## Maintainers\n\nThis project is maintained by [Bleech](https://bleech.de/en/).\n\nThe main people in charge of this repo are:\n\n* [Steffen Bewersdorff](https://github.com/steffenbew)\n* [Dominik Tränklein](https://github.com/domtra)\n* [Timo Hubois](https://github.com/timohubois)\n* [Harun Bašić](https://github.com/harunbleech)\n\n## Contributing\n\nTo contribute, please use GitHub [issues](https://github.com/flyntwp/flynt/issues). Pull requests are accepted. Please also take a moment to read the [Contributing Guidelines](https://github.com/flyntwp/guidelines/blob/master/CONTRIBUTING.md) and [Code of Conduct](https://github.com/flyntwp/guidelines/blob/master/CODE_OF_CONDUCT.md).\n\nIf editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.\n\n## License\n\nMIT © [Bleech](https://bleech.de/en/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflyntwp%2Fflynt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflyntwp%2Fflynt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflyntwp%2Fflynt/lists"}