How to Add Custom CSS to WordPress Themes Using cPanel File Manager

Why Add Custom CSS via cPanel?

Adding custom CSS lets you tailor your WordPress theme’s appearance without relying on plugins or the WordPress Customizer. Using cPanel’s File Manager gives you direct control over your theme files, ensuring your styles are applied exactly as you want.

Precautions Before Editing Theme Files

• Backup your website: Before making any changes, use cPanel’s Backup Wizard or File Manager to save a copy of your site.
• Use a child theme: To prevent losing your customizations during theme updates, apply CSS changes in a child theme.
• Be careful with code: Incorrect CSS syntax can affect site appearance; always double-check your code.

Step-by-Step Guide to Add Custom CSS via cPanel File Manager

1. Login to cPanel: Access your hosting account’s cPanel dashboard.
2. Open File Manager: Navigate to the File Manager under the Files section.
3. Locate Your Theme Folder: Go to public_html/wp-content/themes/ and open your active theme’s folder. For a child theme, open its folder instead.
4. Find the style.css File: This file contains your theme’s CSS rules.
5. Edit the style.css File: Right-click on style.css and select “Edit”.
6. Add Your Custom CSS: Scroll to the bottom of the file and carefully add your CSS code.
7. Save Changes: Click “Save Changes” to apply your edits.
8. Clear Cache: Clear your browser and any caching plugins to see the updates.

Example: Adding a Custom Background Color

/* Custom background color for the website */
body {
  background-color: #f0f0f0;
}

Add this CSS snippet at the bottom of your style.css file to change the site background color.

Alternative Methods to Add Custom CSS

• WordPress Customizer: Go to Appearance > Customize > Additional CSS.
• Using Plugins: Install plugins like “Simple Custom CSS” or “Custom CSS & JS”.

Editing via cPanel is ideal for advanced users who prefer direct file access.

Final Tips

• Always keep backups before editing files.
• Test your changes on different devices to ensure responsiveness.
• Use browser developer tools (F12) to experiment with CSS before applying it permanently.