Making CSS Changes and Creating Test Sites

Code, glasses, and computer

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:

CSS Code inside Additional CSS

This way, the code is applied inside the <style> tag inside <head> on your site:

CSS code applied inside the style tag in the head

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:

MAMP start screen

After clicking on the Open WebStart page link, you’ll be redirected to a new tab in your browser:

MAMP first page in a browser

Scroll down until you see the MySQL section and click on the phpMyAdmin link:

Making CSS Changes and Creating Test Sites 1

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:

Create new database in phpMyAdmin

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:

My Website link on MAMP start page

Afterward, you’ll basically get redirected to the WordPress installation screen:

Making CSS Changes and Creating Test Sites 2

Follow the steps until you get to this screen:

Making CSS Changes and Creating Test Sites 3

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.

connecting to the database screen
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.

WordPress installation screen

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:

Local by Flywheel first 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:

 Create a WordPress site via Local by Flywheel application

When you get to the database screen, you can just enter your new database details:

Create a new database inside Local by Flywheel

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:

Making CSS Changes and Creating Test Sites 4

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:

Access SSH of the site in Local by Flywheel

And if you click on Reveal in Finder instead, you’ll access the site’s files:

Open local 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 😎

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: