Hi, I’m Jerry, and I have been hanging out in the last few IRC chats, and recently brought up that I wanted to work a CSS module to compliment the child theme module that is nearing completion. In case you were not at those meetings, I wanted to recap here, so I can get as much feedback as possible
Who is the Intro to CSS module for?
Before WordPress users are ready to take those first steps into theme development (like creating a child theme) one of the first places their exploration begins is with a desire to tweak the “look and feel” of your site. So something like:
“I found a theme that is close to what I want, but I really wish I could change the size of my headings, or the background color of my widgets, but have no idea how.”
This module would be aimed at that person: a non-coder who have maxed out what they can do in wp-admin, and are ready to take those first step into the world of theme design by modifying their existing CSS.
This module would ideally cover the following:
- What is CSS? What does it do?
- Learning the lingo: Selectors, properties, and values
- Getting set to edit: How to edit theme CSS the right way
- How to your browser’s developer tools to find your theme’s CSS
- Three exercises covering simple CSS modifications (TBD)
- Intro to CSS self-quiz
Small Problem: How do you hack on CSS without a child theme?
When it comes to changing a theme’s CSS, there is one small but important caveat that we all know: Hacking on actual theme files is bad, bad, BAD! So, what is the best way to get students up and writing their first lines of CSS as quickly as possible? We could have them set up a quick child theme, but the problem with that is:
- It may be a little too early to introduce that concept
- It would take valuable time away from the lesson to set up (plus FTP access)
- We already have a module that covers this better and in more detail
So with that in mind, it probably makes sense to install a CSS editor plugin instead, which is quick, easy, and gets students straight to the good stuff. But…
Which CSS editor plugin?
Here are a few that I could think of, what do you think would be the best to use?
#1 Jetpack – On the plus side it comes with a great CSS editor, with easy access to revisions, but as a negative it requires a WordPress.com account, which not everyone may have or want.
#2 CSS Plus – This is in the repo, so easy to access and requires no sign-in; however, I have no experience with this one, so testing would be a good idea before incorporating it into the lesson plan.
#3 Codepen.io – This gets away from the idea of tweaking the theme directly, but would it be better to not even go into the wp-admin in the first place? This would place the focus on the CSS, and may be easier than setting up test sites, downloading plugins, etc. However, like Jetpack, it would require an account creation step for some, and, well, it’s not WordPress.
Really those seemed like the best choices, but what do you think? Is one better than the others? Am I missing any other options that are worth considering?
Want to help? You can!
Is a CSS module something you would be interested in helping with? To get us started we can leverage some of the CSS materials available at en.support.wordpress.com (adapted to fit a self-hosted environment) but if you have any ideas to make this even better, or would like to help develop this module, please speak up in the comments
You can also say hi at our next IRC chat Tuesday at 18:00 UTC in #wordpress-getinvolved on IRC freenode. 🙂