Once we get a handle on the basics of using CSS in combination with themes, we begin to consider how to get really fancy. I like using all kinds of visual formatting: blockquotes, sidebars, just like a print magazine! Can I do this? Well, that depends. Still, before we get started on those kinds of challenges, we might want to review how to set up the tabs and windows for creating CSS and testing it, easily and more securely.
How to Get Started: Get Comfortable with Multiple Windows
I’ve been teaching myself CSS for literally decades. The best way I’ve found to do this is to have the CSS editing window up in one tab, and a sample screen up in another to test your effect. If we have an already published page with text already enclosed by the selector we want to target, then it’s way easier.
(Selectors may also also be called the HTML element or tag such as the h1 or h2 header tags)
Using a Published Page for CSS Experiments
When we customize the theme with additional CSS, the home page of the blog is shown on the right. On the right panel, then, we can navigate to a published page that has the appropriate selector we want to style, change the code, and immediately see what the impact on the code will be BEFORE we hit the “Publish” button on the CSS code.
This way, if you don’t like what you see, then you can navigate away from the page WITHOUT hitting the “Publish” button, and none of your changes impact your blog.
Changes don’t become real until you hit “publish.” (Don’t we wish life were like that? Or at least hair color changes.)
Quick Visual Refresher
The Themes Customizer is about halfway down the page in the WP Admin Window where we access the editor. Hit “Customize” to pull up the customization menu.
We find the Additional CSS at the bottom of the customize menu.
And then we get the CSS style sheet we can edit to the left, and the homepage of the blog on the right. I can navigate to any page in my blog that I want to use as a reference because I’ve set up a good menu system.
Creating an Unpublished Test Page for Experiments
If we’re playing with an entirely new selector, class or set of selectors, we may not want to use an already published page. For some kinds of experiments, like the development of a new class, we can use draft blog posts. I created a whole bunch of draft posts when I was experimenting with formatting different kinds of post formats in order to see the existing code for those formats and attempt to tweak them.
To do that, I had to actually create and PUBLISH the CSS code, then PREVIEW the test pages to see if I was having an impact. I was concerned that my attempts to work on theme code to format posts other than the standard format would also (accidentally) impact the “Standard” Post Format style.
I also didn’ t like the idea that readers might drop by, see failed formatting, and leave!
I started coding when all we had were instructions from the W3 school, so I’ve had literally decades of editing in one window (on, say, Notepad), calling up the text in a browser–changing code, reloading the page, and on and on. Here’s my recommendations for dealing with tweaking CSS code in WordPress using a not yet published blog post.
The Set Up for working with unpublished posts
Step 1: We have to set up the test page in the blog editor. Create a blog post with some sample text to which we will apply new code. If you use the Jetpack editor, (the blue editor) you can more easily preview the resulting code. With some code, you may want to use the WP Admin (or black editor). Here’s where I explain the differences.
Step 2: We have to call up the Customize Theme Page in another window. Open up the Additional CSS window–where we’ll deal with the code. Since the blog post is not yet published, the blog in the right window may not help us much–but do use this to check for unintended consequences.
Pro-tip: I usually put code I’m trying out in a Google doc window, and also cut, save and save a copy of the all the existing CSS code before my experiments (often in a separate document). This way if I screw up entirely, I can easily go back. I believe there is a way to step backwards using WordPress to an earlier version of this code, but I like to be extra careful.
Step 3: When we add the test code to the Additional CSS style sheet, we have to PUBLISH the changes we make in order to see them in the unpublished blog post. You can only see those changes using “Preview.” The editor is not going to interpret your changes so that you can see the changes of the code within the editor.
I sometimes have up FOUR tabs open:
- The CSS tab that shows the code I’m working on (the Additional CSS style sheet from the “Customize Theme) menu. I will also call up a page in the right panel there to look at an existing post that could be affected by my changes
- A test post that lets me fiddle with the CSS, then test the new code.
- A tab of the web page from which I’m borrowing code or using as a reference.
- A tab for the W3 school reference on CSS.
Step 4: We put in the code we’ve borrowed or created in the Additional CSS stylesheet, then hit PUBLISH button at the top of the page. THEN we go and preview the code in a browser window to see how we did. It can be a tedious process but we learn by doing.
- If text vanishes on the page, you’ve forgotten to close a quote in the selector tag. (Example: if you put in <h2=”mynewstyle > and forget to close the quote, everything on the page vanishes until the editor finds another quote mark to close the statement).
- Other common mistakes: forgetting a semi-colon at the end of statements (the CSS editor will point these out).
- Forgetting or accidentally erasing a closing bracket will also cause errors that will be pointed out by the editor.
More on the Pro-Tip: Use Fewest Tabs You Can To Improve Focus Because this Stuff Gets Crazy. 😀
It’s a good practice to limit your tabs to only those four. I know, I know, heresy! I prefer to have open about ten tabs–call me a digital native. (Shrug). It’s how I roll. But trust me, it helps to keep the tabs to a smaller number. You will end up with five, six, eight tabs open as you jump between your editor and previewing your results–it gets confusing, so close those tabs after the preview of the changes. Otherwise you’ll have six or eight “preview” tabs and you won’t know which one is current.
More soon. This will get you started in learning how to borrow and test your own custom CSS — with fewer headaches. 🙂 Best, ~Lola