Additional CSS / JS

Adding custom CSS and JavaScript gives you finer control over how your site looks and behaves. Shock includes dedicated fields for both, so you can drop in snippets without editing theme files — and without losing your changes when the theme updates.

Add custom CSS

1. Open the CSS field.

   From your WordPress panel, go to Shock » Theme Settings » Additional CSS.

2. Paste your styles.

   Enter your CSS in the field. For example, to round the corners of every button:

   .btn {
     border-radius: 12px;
   }

3. Save your changes.

   Click Publish to apply.

Add custom JavaScript

1. Open the JS field.

   From your WordPress panel, go to Shock » Theme Settings » Additional JS.

2. Paste your script.

   Enter your JavaScript in the field. For example:

   document.addEventListener('DOMContentLoaded', () => {
     console.log('Shock: custom script loaded');
   });

3. Save your changes.

   Click Publish to apply.

For advanced users

These fields are meant for advanced customization. Only add code you understand or that theme or plugin support has given you — a stray syntax error, especially in JavaScript, can break front-end functionality. Test on a staging site first when you can.

Tip

Keep your custom CSS and JS here rather than editing the theme’s files directly. Because these fields are part of your settings, your snippets survive theme updates untouched.