Categories
Automattic Miscellaneous WordPress

New Site on the Block

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 ๐Ÿ™‚

New Site on the Block 1

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!

Categories
WordPress Workshop Novi Sad

Fourth WordPress Workshop โ€“ Novi Sad

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.

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 2
  • 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 3
  • 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 4
  • Creating an e-shop
  • Creating a membership site
  • SEO
  • Image optimization
  • Backup
  • Different errors and debugging

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

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 7

Follow the steps until you get to this screen:

Making CSS Changes and Creating Test Sites 8

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 9

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
WordPress

Add Custom Functions

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.

Awesome, right? Cheersย ๐Ÿท