Developing Omeka theme - help getting started!

Hi everyone!

I have been tasked with creating a custom theme for an Omeka site, and being very very new to Omeka and not being familiar with PHP at all, I am hitting a wall. I’ve read the developer documentation online, but I think I am missing a very big piece of the puzzle because they don’t quite answer my questions. Please bear with me even if my questions seem misguided!

I am a student in computer science and have some experience in web development with HTML/CSS with javascript, but this is just nothing like what I’m used to.
From what I understand, the snippets of PHP code in the .php files are generating the HTML based on functions called. However, I am having a very hard time figuring out where the different components that come together to create the HTML are coming from.

Any help is appreciated, thank you very much!

I recommend that you use existing themes to guide you at the beginning, so that you can learn how they work internally. After that, try to make changes to an existing theme to make it more similar to what you need. That would be a good start.

You’ll need to understand basic theme structure. Let’s start with the Seasons theme which I think is included in the download.

[bakelaar@taep-web1-prod-asb themes]$ pwd
/var/www/html/digital/themes
[bakelaar@taep-web1-prod-asb themes]$ ll seasons/
total 156
drwxr-xr-x+ 2 apache root  4096 Feb 15 00:41 common
-rw-r--r--+ 1 apache root  4529 Feb 15 00:41 config.ini
drwxr-xr-x+ 2 apache root  4096 Feb 15 00:41 css
drwxr-xr-x+ 3 apache root  4096 Feb 15 00:41 exhibit-builder
-rw-r--r--+ 1 apache root   633 Feb 15 00:41 gulpfile.js
-rw-r--r--+ 1 apache root  1742 May  1 12:45 index.php
drwxr-xr-x+ 2 apache root  4096 Jun 14 09:37 items
drwxr-xr-x+ 4 apache root  4096 Jun 13 21:23 javascripts
-rw-r--r--+ 1 apache root   843 Feb 15 00:41 package.json
drwxr-xr-x+ 3 apache root  4096 Feb 15 00:41 simple-pages
-rw-r--r--+ 1 apache root   460 Feb 15 00:41 theme.ini
-rw-r--r--+ 1 apache root 82005 Feb 15 00:41 theme.jpg
[bakelaar@taep-web1-prod-asb themes]$ ll seasons/common/
total 8
-rw-r--r--+ 1 apache root 2162 Jun 13 21:35 footer.php
-rw-r--r--+ 1 apache root 3665 Jun 14 10:41 header.php
[bakelaar@taep-web1-prod-asb themes]$ ll seasons/css/
total 76
-rw-r--r--+ 1 apache root  7204 Feb 15 00:41 normalize.css
-rw-r--r--+ 1 apache root   816 Feb 15 00:41 print.css
-rw-r--r--+ 1 apache root 62351 Jun 14 11:24 style.css
[bakelaar@taep-web1-prod-asb themes]$ ll seasons/items/
total 24
-rw-r--r--+ 1 root   root 3229 Jun 14 09:37 browse.old.php
-rw-r--r--+ 1 apache root 2526 Jun 14 09:39 browse.php
-rw-r--r--+ 1 apache root 3377 May 30 22:54 person.php
-rw-r--r--+ 1 root   root 7699 May  1 21:56 search-form.php
-rw-r--r--+ 1 apache root 3445 Jun 13 21:57 show.php
[bakelaar@taep-web1-prod-asb themes]$ 

Each time you load an Omeka page, as you described it, multiple components “come together” to create the HTML.

#1 common/header.php
#2 items/x.php, such as browse.php if you are loading the /browse page
#3 common/footer.php

That’s essentially it!

You can edit HTML inside the header.php file.
You can edit CSS inside css/style.css (or other).
You can edit HTML (and Omeka PHP functions) inside the “page” that is being loaded

Primary built-in pages that are “themed”:
NOT the homepage (it is generally stored in theme configuration/settings)
Browsing all the documents (browse.php)
Viewing a single document (show.php)
Search results are usually handled via browse.php, but you can produce a separate search results page
Advanced search form (search-form.php)

That should get you started!

1 Like

I just want to make one tiny correction: the homepage is “themed,” your theme has total control over the content of the homepage. Generally there’s some standard stuff we put there in our themes, including the theme options for some light text/content creation, but it’s a themed view like any other: the file is index.php .

2 Likes