It’s been quite a few years since the last time I changed my site’s appearance. Since I’m still on my vacation, I figured it’s finally time to change the theme and the overall look.
I wanted a bit different layout, a simple design with a homepage that is both a static page and a blog, with an accent on full-width. As a Happiness Engineer at Automattic, I am using the new WordPress Block Editor (codename Gutenberg) on a daily basis and it’s usually one of the main areas I cover during the screensharing sessions. I watched this editor evolve over the past three years into a powerful tool that provides a new and improved editing experience compared to the Classic Editor that’s been around since the birth of WordPress.
On my site, I’ve been using the new editor ever since it got released but I never fully converted my website to blocks. Until today 🙂
Let me know what you think of the new look and the 2020 theme I started using! I definitely prefer this design but if you’d like to compare it to the old one, you can check this Web Archive link.
P.S. If you’re still using the Classic Editor, try giving Gutenberg another shot. It offers a lot more flexibility and it’s evolved a lot since its release. And it’s a lot more fun!
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.
I am pleased to announce that I’ll be holding WordPress workshops in the Startit Center in Novi Sad starting from September 28th. The workshops will last for 3 months and they will introduce the attendees to the wide array of WordPress topics. The workshops will be conducted in Serbian and everyone is welcome to attend them – no previous knowledge is required but it’s necessary to register.
Creating a WordPress.com site and exploring its options
Gutenberg and Classic Editor
Local and live WordPress.org installation
FTP and databases
HTML/CSS
WordPress themes, installation, and file hierarchy
Child themes
WordPress plugins
WordPress hooks – actions and filters
Creating an e-shop
Creating a membership site
SEO
Image optimization
Backup
Different errors and debugging
Migrations
WP CLI
WordPress Support
Volunteering
How to make a living with WordPress?
I hope the attendees will find this workshop useful! I’ll give my best to publish the content of each workshop session on my blog so that the workshop material is available for everyone. And after the first 3 months, I’ll revisit the whole idea, and see how I can improve it. Cheers 🙂
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 😎
Code Snippets pluginWhen you have a WordPress website, at some point, you’ll probably choose to add your own custom functions into the functions.php file of your theme in order to add a certain feature, remove it, or modify it! However, when you update your theme at some point, all these changes you made will be gone.
The best practice is to always use a child theme and to add the custom functions into the functions.php file inside the child theme. However, you can also use the Code Snippets plugin which makes it super easy to add custom functions.
When you install and activate the plugin, navigate to Snippets -> Add New and add your snippet there.
