Unique 'body' id on each page

I’m sure this is a really straightforward question, but I’m surprised not to find any other threads about it. I’m basically wanting to change the header image on each section of the site, which I would usually do by using a unique <body> id on the pages and then controlling it with the css file. I’m sure that there must be a way to pass a value to the <body> id on each page, based on the page ID or name, without having to create a new template for each one. It’s probably a really straightforward php request, but I wouldn’t know where to start with it. Does anyone have any idea?

Use a TV.

Or you could use the document ID or the alias if you don’t want to have the extra field to edit when creating a resource.

One advantage to using a TV is that you could have the default be @INHERIT, that way if you wanted groups of pages to have the same image you would just need to edit the parent resource’s TV; its children would inherit the parent’s value.

+1 to sottwell’s response. This is exactly how we’ve implemented this fairly common CSS control.

The inherent idea is great! I’m working on a site now and that makes so much sense for the application. Glad I saw this post!

I love the template variable idea. Thanks for that.

If its necessary to have a unique id on each page though, the best way would still be to use the [*alias*], and use the template variable as a class. I also like to assign a class for each template, so my body tag for my site’s 3 column template would look like this:

This is brilliant - thanks so much to everyone for posting. Glad to see that it may be useful for others as well.

Sorry to be revisiting this topic. I implemented it using Susan’s basic suggestion of including

in my template and it worked great.

Then I realised that I was building child pages and that the @INHERIT option would work really well. But I can’t find anything that tells me how to implement it. The @INHERIT page on the documentation is blank, and the url which a lot of posts point to no longer exists.

I tried to go down the TV route, but can’t get it working. What I have done so far is create a TV called [*bodyID*] with an input type of ’text’ and the Default value set to


I then included the following code in my template where the <body> tag would usually be


This article made me think that this may be a good place to put it!: http://modxcms.com/about/blog/rthrash/building-a-new-modxcms.com.html.

I also tried including the @INHERIT in the TV, but that didn’t work either.

Can anyone point me in the right direction...?

Create a TV: [*bodyID*]
Default Value: @INHERIT main

Make sure you assign bodyID TV to all your templates. The default value means look up the tree for the first match, and if none found use "main"

In your template:


Every page should at least output:

Hi rthrash

Many thanks for responding. I’m not sure how this code refers to the

though. Somewhere I need to indicate that the <body> ID should refer to the alias, but I’m not sure where this should now be included. I’m guessing somewhere in the TV, but where should it sit in relation to the @INHERIT main.

You can’t use @INHERIT with the the built-in alias content field. You have to have a purpose-made TV to do what you’re wanting to do.