Roots Discourse

CSS customisation post-deploy

theme

#1

Hi there,

I’m using bedrock to deploy new wordpress sites in an almost “fully automated” way, and so far I’m really happy with it, I love it! I’ve managed to do everything I wanted with 0 interation:
Spin up a new site with all the plugins and themes I need, then using wp cli con configure a few initial settings and site is pretty much ready to go. (By the way I’m running manually a sh script with all those wp cli batched commands, surely must be a post-deploy task or something I could be using? Haven’t found that either as I want that to run only on “the first time” it deploys, further deploys: ie. theme upgrades, etc. shouldn’t run that, that’s why I’m doing it manually for now, a one off so not a big deal).

Now, I’m struggling with something that, as much as it sounds simple and stupid, cannot find a straightforward way to do it:
I’m using a free theme which I like, I can customise a few things and it’s all good to go but I see only missing a bigger font size in the header title, that is, one CSS rule to make it a bit bigger.
I’m not interested in extending the theme as it’s perfect as it is, and I’d like to be able to easily upgrade to new versions through composer update etc. All I want really is to append something like : .header h1 { font-size: 40px } to the existing css provided by the theme.

I could do that from the admin: Customization -> Additional CSS, but that would be a manual action (that I’ve been unable to automate through wp cli.

Any ideas or suggestions to achieve what I’m trying to do?

Thank you!


#2

Ah, never mind, managed to do it!
In case someone is looking for something similar I got this by doing the following:

  • First of all go to Customization -> Additional CSS and add in there any extra css rules you need

  • Then, with wp cli check the post id: wp post get --post_type=custom_css ie. 7

  • Export it: wp export --post__in=7 /tmp/

  • That will generate an XML that you can then import with wp cli as well as part of the deployment with: wp import css.xml --authors=create

  • Then the magic bit, tell the theme to use that post as custom_css:

    wp theme mod set custom_css_post_id `wp post list --post_type=custom_css --format=ids`

Note, the above works only if you’ve just one custom_css post, if you’ve more it’ll probably not work and you might need to tweak it a bit to get the last id or something.

I hope it helps!