WordPress theme for ftek.se.
- PHP (^7.4.x)
- WordPress (^6.0.0)
This project is set up for development with the editor/IDE VS Code. It is strongly recommended that you use this editor.
If you encoder unexpected TypeScript errors in Visual Studio Code, make sure to use the workspace version of TypeScript.
The project includes a devcontainer configuration which contains all tools needed for development. To use this you need to install Docker (either CLI or Docker Desktop), and the remote development extension pack after which you can simply select "Clone Repository in Container Volume..." from the Remote Explorer tab.
After starting the devcontainer, WordPress will be accessable at http://localhost:8888 on your local machine. After installing composer and npm dependencies and building javascript files (see Getting Started) you may log in to WordPress and activate your theme. To log in, visit http://localhost:8888/wp-login.php and entering the default credentials:
- Username:
admin
- Password:
password
To view Apache2 log records run
sudo cat /proc/1/fd/1
Before continuing you must install npm and Composer dependencies:
npm install
composer install
During development, the following command will automatically rebuild code as source files are changed.
npm run start
You should check for (stylistic) errors in your code by running
npm run lint
Format the code base by running
npm run format
Create a production build by running
npm run build
Lint and format your code before commiting any changes.
To import PHP classes, we use the autoload file generated by Composer. After creating a new file containing a class you would like to import, regenerate the autoload file by running
composer dump-autoload
Run the command
npm run i18n
to scan the source code for translatable strings (which are stored in a POT file inside the languages
folder) and update existing translations (PO files also stored inside languages
) from the POT file. To edit an existing localization, edit the corresponding PO file. To create a new localization, copy the POT file to a new PO file inside languages
. Name the PO file {locale}.po
, for example en_US.po
. Lists of locale codes available in WordPress can be found online.
If you decide to use CSS/SASS modules (*.module.scss
) be careful to make sure that updating the theme doesn't break your styles. If you for example use a CSS module to style a block and later update the theme so that the module hashes changes old block styles will break. This is because Gutenberg saves the CSS class along with the fully rendered block to the WordPress database, so when the block is shown to the user it will expect CSS classes with the same names as when the block was saved to still exist.
CSS modules can safetly be used in cases where the CSS class names are always kept up to date, like the settings page.
GitHub Actions is configured to automatically create a new release when a new tag is pushed. Some useful commands are
git tag # Lists existing tags
git tag -a vx.x.x # Creates a new tag for the specified version number
git push --follow-tags # Pushes commits and tags to the remote