0

I've been put in charge of making some modifications to a wordpress site, and one of the changes I need to make was to reduce the size of the banner on a particular page. I can see from the CSS that the height is defined by the style name "banner-top-main", and I can override this by customizing the theme and adding custom Additional CSS - but then it affects every single page in the site which isn't what is wanted. Does that really mean I'd have to somehow duplicate the whole theme and have just this one page use a different theme? Even then I'm not 100% sure how that would be done - by duplicating the template and selecting a different template? I've never really used wordpress to do this level of customization before and it's screaming out for a simple "edit page source" button where I can just go in and make the CSS and other changes I need for this single page, but I'm not seeing anything. I have googled extensively and not really found anything to help me, and I can't seem to get in contact with the original page designers (this is a volunteer job) so I'm resorting to asking newbie questions on stack-exchange sorry, hope I haven't just missed something embarrassingly obvious.

Thanks Dylan

P.S. I know I can do it by making use of the fact that each page has a separate class name for the body, e.g. page-id-580 in this case, but that seems a very flaky hack that's sure to cause issues when cloning/deploying the site changes between staging and live etc.

Improve this question
3
  • So how do you want to identify the page? Page IDs should be stable, but it depends how exactly you're staging / deploying I suppose. Your choices are probably 1) use the ID, e.g. with the CSS as you mention, or a per-page template for the page with the ID 2) use the slug to make a per-page template using the slug 3) add a meta property to the page and test it in the template to decide whether or not you want to use the smaller banner or not.
    – Rup
    Commented Mar 2, 2021 at 10:56
  • (And possibly 4 set up a named page template and choose that for the page in the editor, but I can't remember how that works)
    – Rup
    Commented Mar 2, 2021 at 10:57
  • I was assuming there would be a way to customize just this one page, and specify e.g. a different css classname for its banner or add additional css just for this page. It's fine if it can't be done in the UI, I'm quite used to editing source directly, but does that mean obtaining console/shell access to the underlying server instance? Not sure if the hosting service permits that.
    – Dylan Nicholson
    Commented Mar 2, 2021 at 18:40

2 Answers 2

Reset to default
1

There's no method in WordPress' UI for adding CSS for a single page only, if that's what you're asking for. There might be plugins available that offer it, though, but discussing that would be off topic here (I'd suggest a local community group or similar if you're asking for plugin recommendations).

The simplest "proper" way to do this would be using the body class to target the specific page, as you mentioned. It's not a flaky hack. If you're truly cloning the site between environments then the IDs would be the same so there shouldn't be any issue.

The more robust solution, which I would expect if you have a development workflow that involves multiple environments, would be to have a proper child theme and you would make whatever template changes needed to add a new class to that element on that page and then add the appropriate CSS to the theme.

Improve this answer
2
  • Child theme sounds good, as there might be a few pages needing this tweak - is there somewhere I can read up about how to set this up?
    – Dylan Nicholson
    Commented Mar 2, 2021 at 18:52
  • BTW I've done some reading, and the instructions I've found imply I have access to the underlying file system to create folders etc. At this stage I don't have that, so is creating a child theme not possible?
    – Dylan Nicholson
    Commented Mar 2, 2021 at 22:13
0

So it seems the way this should be done is to actually create a new template within the same theme. For now I just cloned the main template and modified the class name of the banner, then set some additional css to set the height, though I'm fairly sure there's a better way to do it. Note that doing this required using the file manager plug-in, I couldn't see how to create a new template otherwise. It does seem a bit odd that the theme is apparently global to the site (only one can be activated at any time), but I guess it's all just convention...

Improve this answer
1
  • Only thing I still can't figure out is why modifying the style.css for the theme to specify the new banner height doesn't work - only if I do it through the "Additional CSS" settings.
    – Dylan Nicholson
    Commented Mar 3, 2021 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.