How do themes work?

I’m trying to make some slight changes to a theme, but the code is a bit over my head.

The first place I tried to make changes was in /themes/minimalist/common/header.php. It being an HTML doc, I don’t understand why I can’t just add a simple line of html within the header tag and have it show up in the header on the website.

It seems like php functions are defined somewhere else and the header.php file is calling that content to create the theme.

To make changes to a theme, do I have to do it with php? And if so, where in the various application folders should I define my function?

1 Like

I am also interested in modifying themes. Is there a good beginner tutorial?
Is it the same for Omeka Classic and Omeka S?

Hi everyone,

We have theme modification instructions in the developer documentation here:
https://omeka.readthedocs.io/en/latest/Tutorials/index.html#public-themes
https://omeka.org/s/docs/developer/themes/

I haven’t personally looked at the developer manuals, but I’d love to hear your thoughts on it if you work through the instructions.

I have done some small display changes in the past, so I’ll try to help as best I can with your specific questions as you share them. So, first:

Adding a line of HTML to the header.php file in your theme might not work if the theme isn’t overriding the header.php file in the /application/views/scripts/common folder. You might try adding your line to both files and see if that works. I think if you’re just adding a tag or something, you don’t need to enclose it in a PHP evaluation, unless you want to (most PHP is beyond me).

In this case, I have a Classic site running the Minimalist theme, and the theme file is overriding the common file properly for me (that is, I can see the simple meta description tag I added to the theme header.php, and not the slightly different line I added to the common header.php). I put the line just under the “charset” line and made sure it wasn’t enclosed in any PHP. If you want to share some of your code, I can try to diagnose further what’s happening.

1 Like

Admittedly, the documentation is way over my head and I haven’t been able to find anything on the web for people with beginner level PHP knowledge, like myself. I was finally able to get a little HTML to show up in the header. But to really be able to modify a theme, I’d like to know more about where all these functions are defined, since they seem to be generating most of the theme content. To do things like resize the logo image or replace a navigation label with an image, I think I will likely need to edit functions, right?

Some of the things you’ve listed here are possible with CSS rather than using PHP or HTML. You can do this easily enough with the CSS Editor, which has the bonus of preserving those custom settings even if you update the base theme files. (Whereas your HTML head addition will get wiped if you update the theme.)

We have some guides to CSS basics on the CSS Editor plugin/module pages in the user manuals:
https://omeka.org/classic/docs/Plugins/CSS_Editor/
https://omeka.org/s/docs/user-manual/modules/csseditor/

But we could do more to help users get comfortable customizing Omeka specifically. If you can list out some of the things you want to change, I’d be happy to point you to the right place.

To point to the logo, you would use
#site-title a img {
}

And put your desired changes inside the brackets:
#site-title a img {
height:36px;
}

If you wanted, say, to have your site logo line up exactly with the search box in the header, you could also add:
#site-title {
margin:30px 0;
}

Replacing your nav links with images is going to take a little bit more time, but maybe this can get you started for now.

Thanks for this. The CSS Editor hasn’t been working for me. I posted a separate thread about this, but we haven’t been able to solve the issue. No matter, because I was able to get into the theme CSS file and make adjustments manually.

What would help me is knowing which file all these functions are defined in, so I could potentially create new ones or edit others. Currently I have my flag icons placed within the header using HTML, but it feels clunky. I would have liked them to be closer to the search box, but the way the search box was built with PHP was really confusing for me. I couldn’t get it to work. Someday I might like to change this, though.

I really don’t think that you want to mess around in there, but that stuff is in /application/views/scripts/, I believe.

I have a lot of learning to do before I attempt something like that. But in building an overall plan for the site and the look/functionality I’d like it to have, I’d like to know what’s possible with a little more knowledge and what I can’t do with Omeka.

There are several files and folders at the end of the path you gave, and none look like an obvious collection of function definitions. I’ll keep working through them and try to figure it out.

For now I’ve made enough short term fixes to move forward, though. Thanks for the help!

Well, all the global functions are here: Omeka/globals.php at master · omeka/Omeka · GitHub

1 Like

Thanks @AllanaMayer for the hint about CSS editing. I’ve followed @RossCaputi to the new thread about CSS Editor not working :grinning: