How to add Custom CSS, JS, analytics in Block themes

Many users use different plugins to inject custom CSS or js, HTML in their sites. But you don’t need another plugins, most of these are available in core of WordPress. But it’s so hard to find this option, so we must make tutorial about this.

How to add custom CSS in Block FSE themes

In Site editor – Style Editor, click on 3 dots

In case if you want to add styles just on one page or template, you can add them on block level.

There are two ways. You can use block which is called Custom HTML, then, add styles there with style tags


Or you can drop your styles directly in Greenshift blocks. In Advanced – Responsive and custom CSS

Greenshift option has also placeholder feature. If you click on it, special {GREENSHIFT} placeholder will be added which will be converted by current block ID on frontend, so, you can limit your style to work only for current block

How to add JS in Block themes

Again, you can use customHTML block and place there your script like

<script>your script</script>

Also, you can drop the same code in Greenshift – Settings – General – Custom code before closed Body

How to add Analytics code in Head section in Block themes

You can do this with Greenshift – settings – Custom code in head section. Place there your analytics code as you copied it from Google