During the fourth WordPress workshop in Novi Sad, we went through the basics of HTML and CSS, we covered the best practices for adding custom CSS to a WordPress site, we went through some of the options of the element Inspector in browsers, and we also manually created a child theme.
After the workshop, I created a short video walkthrough of the element Inspector options in Chrome and I covered the basic creation of a child theme (both manual and via a plugin).
I’m speaking in Serbian but the whole interface is in English
Next
During the next workshop, we’ll go through WP-CLI and creating a web shop by using WooCommerce.
You’ve launched your first WordPress site. Fantastic! After a while, though, you decided it’s time to change a couple of things on the site. Maybe you’d like to use a shiny new theme you just bought, add listings in the form of a plugin, or implement courses to your site. Whatever you’d like to change/add/remove, I’d strongly recommend testing on a test site first.
This goes the other way around as well! Before you launch a site, the best thing would be to build it in a local environment first, just to make sure everything is set up correctly.
Custom CSS
If you decide to make just visual changes on your site by using CSS, you wouldn’t need to use a test site. You can test your CSS code directly on your site inside WP Admin ->Appearance -> Customize -> Additional CSS. This feature was added to WordPress after my previous article on Custom CSS so I wanted to cover it in this post. I’d strongly advise against making any changes to the theme’s style.css file! The Additional CSS field inside the Customizer is your best option for two reasons:
Additional CSS loads after the style.css file (inside the <style> tag in the <head> element. As CSS stands for Cascading Style Sheets, the code added the last will be used on a site. For instance, the theme you’re using has this CSS class inside its style.css file:
.entry-title {
color: #1a1a1a;
}
Let’s say you’d like to change the color of the titles to #007acc . You shouldn’t make this change inside the style.css file of your theme but inside WP Admin ->Appearance -> Customize -> Additional CSS:
This way, the code is applied inside the <style> tag inside <head> on your site:
And all done! There’s also one more very important reason why adding CSS code should be added inside Additional CSS which brings us to the reason number two 🙂
If you make any changes inside the style.css file and you decide to update the theme you’re using (theme updates are usually issued on a regular basis in order to fix bugs, add new features, or just to keep up with the latest WordPress updates), your style.css file will get overwritten! All the changes you made will be lost.
For this reason, it’s best to add the CSS code inside the Additional CSS field as they will remain intact, even after the theme update.
There’s also one more option you can consider using and that’s creating a child theme.
Creating a Test Site
If you’re going to make extensive changes to the site and add new plugins or a theme, it might be best to first apply those changes on a test site. There are a few hosts that allow you to have a staging site (like WP Engine) but if your host doesn’t support this, don’t worry. There are a few options you can use and I’ll mention two of them which I used in the past.
MAMP/WAMP/XAMPP
MAMP, WAMP, and XAMPP all allow you to create a test site in your local environment pretty easily. I’ll cover the details of MAMP in this article.
After following the steps for MAMP installation on your computer and after starting the application, you’ll get to this screen:
After clicking on the Open WebStart page link, you’ll be redirected to a new tab in your browser:
Scroll down until you see the MySQL section and click on the phpMyAdmin link:
You’ll get redirected to the phpMyAdmin part of MAMP and where you’ll be able to create a new database. Here, you can name your database. I named it my_wordpress:
Hit the Create button to create your new database.
Now, go back to the MAMP screen and click on the My Website menu item at the top-left:
Afterward, you’ll basically get redirected to the WordPress installation screen:
Follow the steps until you get to this screen:
For the value of Database Name, make sure to enter the database name you created previously. In our case, we’ll insert my_wordpress. For the values of Username and Password, make sure to enter root.
Use these details to connect to the database you’ve just created. Substitute my_wordpress with your database name in case you created the database under a different name.
Click the Submit button and insert the requested details for your site.
Hit the Install WordPress button and your new test site is ready! Cheers 🙂
Local by Flywheel
There’s another option you can use to create a WordPress test site and that is Local by Flywheel. I have to admit that this is my preferred option 🙂 I used MAMP for years before I discovered Local By Flywheel. It allows you to create a test WordPress site with one click!
After downloading the application from their official site and completing the installation process, you’ll get to this screen:
The three local sites at the top-left are my already created local sites 🙂
Hit the big + button at the bottom-left of the screen and follow the steps to create a new site:
When you get to the database screen, you can just enter your new database details:
Click on the Add Site button at the bottom-right and that’s all there is to it 🙂 Your new WordPress test site is ready. You’ll get to the following screen where you can see the server details and where you can access WP Admin and view the site:
One fantastic addition that Local adds is that you can easily access the server’s terminal and use WP CLI! Right-click on your site’s name and choose Open Site SSH:
And if you click on Reveal in Finder instead, you’ll access the site’s files:
It’s that easy! You can easily create new test sites by repeating the same steps.
Conclusion
Since I work as a Happiness Engineer at Automattic (we’re hiring, by the way), I provide support to our customers on a daily basis. A big chunk of the work I do can sometimes involve testing different plugin/theme combinations in order to locate the cause of the problem that the customer is experiencing. Although I have lots of live test sites on WordPress.com, I like to use Local by Flywheel as well, for both testing and learning new stuff. And when I am adding CSS code, I always add it to the Advanced CSS field, inside the Customizer.
Whatever you choose to use – MAMP, Local by Flywheel, or something else, having a test site is never bad. It’s always better to break a test site than a live one 😎
Quite a while ago, I posted about Lazarus, the Chrome extension which prevents the loss of data you insert into a form on a page when you accidentally navigate away from the page (or if the internet connection breaks). In the last paragraph in that post, I promised to follow up and write about the browser extensions I’m using. More than a year passed but better late than never!
If you’re into CSS, mastering CSS grid is a super cool new skill you should check out. I ran into this great course on Scrimba made of short videos and it’s definitely worth watching. Happy learning!
