Adding custom CSS file to your WordPress site

Sometimes you may want to apply unique styling to your WordPress theme without editing the main stylesheet directly. On ruachost.com, you can add a custom CSS file to your theme for better control and maintainability.

Why Add a Custom CSS File?

• Keeps your custom styles separate from the theme’s default CSS.
• Prevents losing changes when updating the theme.
• Makes it easier to organize and manage custom design tweaks.

Steps to Add a Custom CSS File

1. Log in to WordPress with an administrator account.

2. In the dashboard, go to Appearance → Theme Editor.

3. Select your active theme and open the functions.php file.

4. Add the following code snippet:

   // Load custom CSS file
   function custom_style_sheet() {
       wp_enqueue_style(
           'custom-styling',
           get_stylesheet_directory_uri() . '/your_custom_css_file.css'
       );
   }
   add_action('wp_enqueue_scripts', 'custom_style_sheet');

   • Replace your_custom_css_file.css with the actual filename of your custom stylesheet.
   • Ensure the file is located in the same directory as your theme’s main style.css.

5. Save the file.

6. Upload your custom CSS file to the theme directory (wp-content/themes/your-theme/).

7. Refresh your site → The custom styles will now be applied.

Important Notes

• Always back up your theme before editing functions.php.
• Use a child theme to preserve changes during theme updates.
• If your CSS file is in a subfolder (e.g., /css/custom.css), update the path accordingly.
• Test your site thoroughly to ensure styles are applied correctly.