In this QuickTip, I’ll explain how to have Connections enqueue a custom CSS file that contains your CSS tweaks in an update-safe way. Here’s how…
- The first thing you need to do is create a new text file and name it cn-custom.css. Use your favorite text editor to add your Custom CSS for Connections and save the file.
- Next, you must log in to your site using FTP and upload your newly cn-custom.css created file.
You have several options on where to upload the file. These options are, in order of priority:
- ../wp-content/themes/{child-theme}/connections-templates/
- ../wp-content/themes/{parent-theme}/connections-templates/
- ../wp-content/uploads/connections-templates/
First, I need to mention that the connections-templates folder will not be in any of these folders. It is not created automatically. So this means you must create the folder before uploading the file.
Connections will load the file based on priority. This means, first, it’ll look for the file in the connections-templates folder of the active child theme. If it is not found there, it’ll look for the files in the connections-templates folder in the activate parent theme. Finally, it looks for the file in the connections-templates folder in the wp-content/uploads folder.
Which folder should you upload it to? Well, that depends. If the custom CSS is a theme-specific tweak, I recommend adding it to either the child or parent theme. If it is a basic tweak, I recommend simply uploading it to the connections-templates folder in the wp-content/uploads folder.
Bonus Tip:
Connections also supports loading custom CSS files based on 16 different contexts. Going over exactly what I mean by this is well out of scope for this QuickTip, but I’ll give you a quick example…
Connections will search the above paths for the cn-custom-single.css file when viewing a single entry. If found, when viewing any single entry, this file will be loaded instead of the cn-custom.css file. Just think of the possibilities.