fysikteknologsektionen/ftek-theme-v3

WordPress theme for ftek.se

ftek-theme-v3

WordPress theme for ftek.se.

Dependencies

• PHP (^7.4.x)
• WordPress (^6.0.0)

Contributing

VS Code

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.

Devcontainer

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

Getting started

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.

Generate autoload files

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

Internationalization

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.

Note on CSS modules

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.

Releases

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

ftek-theme-v3's Issues

Make aside section on group and course pages more available to mobile users

The fysikteknologsektionen/ftek-plugin WordPress plugin provides group and course pages which are styled in this theme. On these pages and their children there is an aside area for related pages and such. One suggestion is to have this area be more available to mobile users who right now have to scroll all the way to the bottom of the page in order to see it. This could for example be done by making the area stick to the top of the screen (like how mtek does it) or by making it an expandable section with a button always visible on screen to view it.