Before the theme development can start a folder structure needs to be setup with the required files. A Piwigo theme consists of multiple files and folders:

• theme configuration file
• language files for translations
• template files
• icons
• images used in the layout of the theme
• PHP source code files to get actions/tasks done

First step in Piwigo theme development is to setup the required folder structure and then copy the required files into these folders.

1. Setting up theme folder structure

Via the Piwigo admin pages I first installed the theme “Elegant” on which I want to base my new theme “Elegant Metadata”, as I want to use this theme as a base and need to copy some of it’s files.

I created the folder “elegant_metadata” in the themes folder on my Piwigo website. Within this folder I created the subfolders as shown at the left:

• • • • • • admin; will contain templates and source code for theme settings in the admin screen
          • icon; folder for icons to be used by the theme
          • language; translations for text displayed on the site by the theme
          • template; template files used by the theme to create the layout for the site

2. Copy icons to be used to the icon folder

The ‘Elegant Metadata’ theme development requires icons, which I added in PNG image format to the icon folder. The majority of the icons in this folder are related to displaying metadata embedded in the image. In this case EXIF information about the camera, lens and exposure information as shown in the following example.

Additionally I have a Nikon film/slide scanner to scan in old negatives and slides. For these I also use icons as shown in the next examples.

Icons can be found on the web for free or paid. I could not found free icons I wanted in the right quality, so I looked on the web for paid sites. I ended up at the site Noun Project, which has free and paid icons. I decided to go for the paid version based on a student license as my children are students. It costs $20 dollar/year (at least in 2019/2020) and is well worth the money.

3. Copy the required language files from the ‘Elegant’ theme

For my websites I only need 2 languages; Dutch and English. So I copied these language files from the ‘Elegant’ theme to my language folders. By doing this I assure I have a good starting point of translations, which I can extend later with my own translations for new text I want to add to my Piwigo site via the ‘Elegant Metadata’ theme.

The next step in the theme development is setting up the theme configuration file.

4. Copy the style file from the ‘Elegant’ theme

A style file contains

theme.css