Docs / WordPress / For developers

For developers

Add your own CSS and JavaScript to a transjt theme with custom.css and custom.js. Both stay in place when you export again.

Where your changes belong

Every transjt theme comes with two files reserved for your own code:

  • custom.css for styles
  • custom.js for scripts

They load after everything transjt generates, so your rules win in most cases.

Safe on re-export. When you export your project again, transjt keeps custom.css and custom.js as they are. Generated templates and blocks can be replaced, so put your adjustments there, not in the generated files.

Find the files

The theme folder carries your project's name from transjt. The files are here:

wp-content/themes/<your-project>/assets/css/custom.css
wp-content/themes/<your-project>/assets/js/custom.js

Option 1: edit in WordPress

  1. Go to Appearance > Theme File Editor.
  2. Select your transjt theme in the dropdown at the top right.
  3. Open assets/css/custom.css or assets/js/custom.js from the file list, add your code and click Update File.
Screenshot: Appearance > Theme File Editor with assets/css/custom.css open

No Theme File Editor? Your host or a security plugin has switched it off. Use option 2.

Option 2: edit via SFTP or your host's file manager

  1. Connect to your server with SFTP, or open your host's file manager.
  2. Go to wp-content/themes/<your-project>/assets/.
  3. Edit css/custom.css or js/custom.js and save.

Clear your caching plugin or CDN afterwards, so the change shows up.

Example: adjust a block

Inspect the element in your browser to find the class of the block you want to change, then target it in custom.css:

/* Example: more space above the footer */
.site-footer { margin-top: 4rem; }

The class name above is only an example. Use the class you find in your own theme.

Good practice

  • Keep all adjustments in custom.css and custom.js. Changes to generated files can be lost when you export again.
  • Scope your rules to a block class, so they don't affect other parts of the site.
  • Test on a staging site first if you have one.
Previous← Using your theme in WordPress