Categories
WordPress Automattic Workshop Novi Sad

Intro to WordPress Workshops in Novi Sad

The WordPress Workshops in Novi Sad kicked off on Saturday, September 28th. I was overwhelmed by the number of people that showed up 🙂 I expected 15-25 people total but 170 signed up and around 120 showed up at the intro talk this Saturday.

Intro presentation for the WordPress workshops in Novi Sad
Photos by Marija Aparac, Startit.rs

During the intro talk, I shared my WordPress story with the attendees and I gave a short overview of all the areas which will be covered during the workshops. Afterwards, we worked on creating Slack accounts on the official WordPress Serbia Slack which we’ll use for further communication. There will be three groups created and the workshops will be conducted in two-hour timeslots for each group. The workshops as a whole will last for seven Saturdays during the course of three months.

I’ll be uploading the workshops material after each class on both my website (in English) and on Startit.rs (in Serbian).

Categories
WordPress Automattic Workshop Novi Sad

WordPress Workshops in Novi Sad

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.

For more details and the registration form, make sure to check the original announcement post and the Facebook event!


Topics Covered

WordPress Workshops in Novi Sad 1
  • What is WordPress?
  • WordPress.com and WordPress.org
  • Creating a WordPress.com site and exploring its options
  • Gutenberg and Classic Editor

WordPress Workshops in Novi Sad 2
  • 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

WordPress Workshops in Novi Sad 3
  • Creating an e-shop
  • Creating a membership site
  • SEO
  • Image optimization
  • Backup
  • Different errors and debugging

WordPress Workshops in Novi Sad 4
  • 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 🙂

Categories
WordPress

Google Search Console Guide

A really good Google Search Console guide. If you’re interested in enhancing SEO of your WordPress website, you’ll find the aforementioned article quite valuable.

Categories
WordPress Automattic

Making CSS Changes and Creating Test Sites

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 5

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 6

Follow the steps until you get to this screen:

Making CSS Changes and Creating Test Sites 7

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 8

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 😎

Categories
Automattic Miscellaneous WordPress

Browser Extensions

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!