Show and fix Stylelint errors in PhpStorm while coding

Following coding styles is important, not only when developing for yourself, but even more when working in a team. It means fewer issues, and it also avoids unnecessary changes when using version control, which can easily cause conflicts as well.

I use PhpStorm as my main IDE and when developing WordPress plugins or themes, I nowadays use “wp-scripts” to compile SCSS or JavaScript. This package also comes with “Stylelint“, a command line tool for “linting” of your code.

Running a linter on the command line

You can configure the “lint-style” command from “wp-scripts” in your package.json file. Then you run it like this:

$ npm run lint:style

> @2ndkauboy/[email protected] lint:style
> wp-scripts lint-style


src/style-dark-mode.scss
  5:3   ✖  Expected empty line before comment  comment-empty-line-before
 11:22  ✖  Expected a leading zero             number-leading-zero
 22:6   ✖  Expected indentation of 2 tabs      indentation
 27:9   ✖  Expected indentation of 2 tabs      indentation
 72:6   ✖  Expected empty line before at-rule  at-rule-empty-line-before

5 problems (5 errors, 0 warnings)

After running the command, you will find a list of all issues that have been found. They also give you the rule names in the last column. If you want to ignore/exclude some of them in your project, you can use a custom configuration in your project.

Running the tests inside the PhpStorm code editor

While these tools are great to be used on the terminal, or later in CI (like a GitHub Action), those tests usually come only after you made the mistakes and/or even committed them. Wouldn’t it be nice to see the issues earlier? Fortunately, PhpStorm has an integration for Stylelint. You can find it at “Settings | Languages & Frameworks | Style Sheets | Stylelint”. Here you have to “Enable” it and set some configuration parameters.

When you are on Windows, using WSL2, something like this would be the settings you want to use (adjust path for your local setup):

Stylelint package: \wsl$\Ubuntu\home\bernhard\PhpstormProjects\theme-tests\wp-content\plugins\dark-mode-for-astra\node_modules\stylelint
Configuration file: \wsl$\Ubuntu\home\bernhard\PhpstormProjects\theme-tests\wp-content\plugins\dark-mode-for-astra\node_modules\@wordpress\scripts\config.stylelintrc.json
Run for files: **/src/{**/*,*}.{css,scss}

On Linux/Mac, it could look like this (adjust path for your local setup):

Stylelint package: ~/PhpstormProjects/theme-tests/wp-content/plugins/dark-mode-for-astra/node_modules/stylelint
Configuration file: ~/PhpstormProjects/theme-tests/wp-content/plugins/dark-mode-for-astra/node_modules/@wordpress/scripts/config.stylelintrc.json
Run for files: **/src/{**/*,*}.{css,scss}

In this example, I’ve limited the “Run for files” to the src folder only. On my Linux machine, it otherwise tried to check every single CSS/SCSS file in the entire project and killed my machine. If you have used a custom configuration file, like explained before, you can use this file for the “Configuration file” setting. If you don’t have one, use the default one as shown here. When you have set the path of the “Stylelint package” correctly, you should also see its version number in the settings window:

Settings for "Stylelint" showing the version number "14.16.1" at the end of the "Stylelint package" settings line.

Checking issues while you type

Now that we have set up the Stylelint integration, let’s open that file we got errors for to see them in the editor:

The errors shown in the editor, with one of them highlighted, opening a modal showing more details on that error.

In this screenshot, you can see different things regarding the Stylelint errors. On the right scrollbar, you see red indicators for each error found in the file. In the top right, you also see the 5 errors we have in total (like we also had when running the command in a terminal). In the code editor, every error is underlined in red. When hovering over the error, you see more details, including the rule name.

Repairing errors using the command line

Stylelint comes with a parameter to automatically fix all issues in a file – that can be fixed. These are usually white-space issues. To automatically fix all fixable issues, run the following command:

npm run lint:style -- --fix

Since we use “wp-scripts” in a npm script, we have to add two extra dashes in between the command and the parameter we want to pass to it.

Reparing errors in PhpStorm

Since we already integrated Stylelint into the editor, we can also fix the issues from there. To do that, click on underlined error. After a second, click on the down caret next to the red lightbulb and choose “Stylelint: Fix current file” – this should fix all fixable issues in the current file:

Conclusion

Following coding standards is very important. The right tools can help you with that, and PhpStorm with its integration of many of those “Quality Tools” makes it even easier. I only wish that PhpStorm would automatically detect these type of tool – even on a “per folder basis”, and not just for the whole project. But for me this small initial setup help me to save a lot of time to solve these errors later on.

Add text to the “Privacy Policy Guide” for your plugin or theme

With WordPress 4.9.6, we got some new privacy tools. This includes the new “Privacy Policy Guide”. Have you ever heard of it or even used it? If not, you should take a look at it on your site. You will find it at “Settings | Privacy” and then in the “Policy Guide” tab.

Overview of text snippets for your privacy policy

When you run WordPress and have a couple of plugins installed, some of them might store user data. Even the theme might do that. In those cases, the GDPR and similar laws enforce you to inform the users about that data in your privacy policy. Yet, it can be hard to know what data is stored and for what purpose. Themes and plugins can provide you with a text snippet you can copy to your privacy policy page.

Adding a text snippet to the Privacy Policy Guide for your plugin or theme

When you develop themes or plugins and store user data, make sure to add a custom text to this special page, so anyone using your plugin or theme can copy it. To add text to this page, you have to call the wp_add_privacy_policy_content() function and pass it a title and policy text. This could look something like this:

function privacy_policy_demo_plugin_content() {
    $content = sprintf(
        '<p class="privacy-policy-tutorial">%1$s</p><strong class="privacy-policy-tutorial">%2$s</strong> %3$s',
        __( 'Privacy Policy Demo Plugin is using local Storage ...', 'privacy-policy-demo-plugin' ),
        __( 'Suggested text:', 'privacy-policy-demo-plugin' ),
        __( 'This website uses LocalStorage to save ...', 'privacy-policy-demo-plugin' )
    );
    wp_add_privacy_policy_content(
        __( 'Privacy Policy Demo Plugin', 'privacy-policy-demo-plugin' ),
        wp_kses_post( wpautop( $content, false ) )
    );
}
add_action( 'admin_init', 'privacy_policy_demo_plugin_content' );

With this snippet in your plugin or theme, you should be able to see the text on the Privacy Policy Guide like this:

The "Privacy Policy Guide" with our custom text as well as one for "Twenty-Twenty-One" with the notice "Removed December 17, 2023".

As you can see in this screenshot, you will find different text snippets here. A click on the button “Copy suggested policy text to clipboard” will only copy the text after the “Suggested text:” headline, so your text might need also to include the plugin or theme name, to make sense.

Update notices

You can also see a text snippet for “Twenty Twenty-One” here with the notice “Removed December 12, 2023”. Any text that is added using this functionality will be “versioned”. WordPress will automatically detect, if the text was updated, or in this case, if the theme or plugin has been removed or deactivate. This indicates, to the site’s owner, that they might want to update their privacy policy page or remove some old text from it.

Conclusion

Even though this feature is around since May 2018, many have never recognized it’s there and/or have used the text snippets presented here. If you, like me, haven’t checked this page for your sites for some time, maybe now is a good time to take another or first look at it.

Limit resources used by Docker

For many years now, I am using Docker for my local development environment. In the beginning I was using my own custom images, but lately I’m mainly using “abstractions” like DDEV or wp-env, especially when working with WordPress projects. I run those mainly on Linux, but also have a setup on a Windows dual boot machine.

My previous Linux work laptop was only a Core i5-7200U dual-core with 16GB of RAM. Since I sometimes worked on different projects at the same time, my machine was on its limit pretty fast, with multiple PhpStorm instances and Chrome browser tabs open. Checking the resources, it became clear, that Docker was the issue, taking 50% of all resources.

Measuring resources used by Docker

Different operating systems have different tools to measure the running processes. If you want to find out, which process if using how much, you usually use them. But there is also a command build into Docker itself: docker stats. With this command, you get an output like this: 

$ docker stats --format "table {{.Name}}\t{{.CPUPerc}}\t{{.MemUsage}}"
NAME                                                 CPU %     MEM USAGE / LIMIT
34774832e449e0c5323d0c6eb5b88fdf-tests-cli-1         0.00%     628KiB / 15.01GiB
34774832e449e0c5323d0c6eb5b88fdf-cli-1               0.00%     1.133MiB / 15.01GiB
34774832e449e0c5323d0c6eb5b88fdf-tests-wordpress-1   0.01%     15.95MiB / 15.01GiB
34774832e449e0c5323d0c6eb5b88fdf-wordpress-1         0.00%     16.63MiB / 15.01GiB
34774832e449e0c5323d0c6eb5b88fdf-tests-mysql-1       0.02%     180.4MiB / 15.01GiB
34774832e449e0c5323d0c6eb5b88fdf-mysql-1             0.02%     183.1MiB / 15.01GiB
ddev-router                                          0.82%     43.99MiB / 15.01GiB
ddev-theme-tests-web                                 0.03%     144.4MiB / 15.01GiB
ddev-theme-tests-db                                  0.11%     150.6MiB / 15.01GiB
ddev-ssh-agent                                       0.32%     5.805MiB / 15.01GiB
ddev-theme-tests-dba                                 0.01%     20.1MiB / 15.01GiB

Changing the resource limits in WSL2

This is an example taken from within a WSL2 Docker setup. You can see two projects running with their containers. The “MEM USAGE” column also shows you the “LIMIT” all containers can take. On this machine with 32GB of RAM, it’s 50% of the available memory.

This limitation is set by WSL itself. By default, it takes 50% of the available memory or 8GB, whichever is less. On older builds however (before 20715), it was taking up to 80% of the memory! This can bring even powerful machines down easily.

Fortunately, it’s quite easy to overwrite this. All you have to do is create a .wsconfig file in your user’s home directory (%UserProfile%). Here, you create a file with the following content:

[wsl2]
memory=8G

Now you have to restart WLS2 with the following command (in Windows CMD or PowerShell), which will shut down all running distros, so make sure this is OK on your environment:

wsl --shutdown

Docker for Windows will now probably report, that Docker was stopped, and you can hit the “Restart” button. Now running the docker stats command again, you should only see a 8GB memory limit. There are more settings you can overwrite in that .wslconfig file, like the number of processors used. Since the virtual server, this blog is hosted, also only has 4GB of RAM, the 8GB I have defined here is still very generous.

Limiting the resources in other operating systems

I don’t use a Mac, so I can’t tell you how to change the settings there. And on Linux, there are many different options to achieve the same. It would be a bit too much to name all the different variants. But I do have a tip for those of you using Linux.

Limiting the resources per project

Instead of limiting the resources globally, you can limit them per container or for a project using docker-compose.yml files. When running a container manually, you can pass the resources into the call. But with a docker-compose.yml file, you can also set them for an individual service, like this, in which I’ve edited the file for the wp-env project:

version: '3.7'
services:
  mysql:
    image: mariadb
    deploy:
      resources:
        limits:
          memory: 2GB
# ...

Using the resources key, you can change different values for each service. With this change applied, the stats now look like this:

$ docker stats --format "table {{.Name}}\t{{.CPUPerc}}\t{{.MemUsage}}"
NAME                                                 CPU %     MEM USAGE / LIMIT
34774832e449e0c5323d0c6eb5b88fdf-cli-1               0.00%     576KiB / 7.761GiB
34774832e449e0c5323d0c6eb5b88fdf-wordpress-1         0.01%     15.87MiB / 7.761GiB
34774832e449e0c5323d0c6eb5b88fdf-mysql-1             0.02%     177.6MiB / 2GiB
34774832e449e0c5323d0c6eb5b88fdf-tests-cli-1         0.00%     2.664MiB / 7.761GiB
34774832e449e0c5323d0c6eb5b88fdf-tests-wordpress-1   0.00%     16.17MiB / 7.761GiB
34774832e449e0c5323d0c6eb5b88fdf-tests-mysql-1       0.03%     86.56MiB / 7.761GiB

As you can see, all services use the previously defined 8GB, but the MySQL service is limited to 2GB now. As the MySQL service is usually the one using the most memory, this is the service I would recommend limiting first.

Conclusion

This is not a blog post on how to optimize the resources for Docker containers in all operating systems and in all different scenarios. But I hope it gives you an idea on the options and helps you, you quickly limit them on a machine with a low amount of total RAM or one few processors/threads. For my old work laptop, it really helped, and I was able to get work done a lot faster, as the other processes didn’t have to share the remaining 50% of memory.

How to get rid of the “-2” suffix on a page

If you are reading this blog post, you probably came across this issue yourself. You try to set the slug of a page (or other post type), and WordPress is appending a “-2” suffix to the slug. You are searching for a page with this slug, but can’t find one. But where is the issue coming from?

The problem

Let’s say we have a website about Berlin, and we want to create a page about the “Brandenburger Tor” (Brandenburg Gate), we would give it that title, write some content and then publish the page. We would hope to get a URL like example.com/brandenburger-tor, but we get example.com/brandenburger-tor-2 instead. But why?

The cause: media library items

With WordPress 6.4, that was just released, attachment pages are gone. But they are not really. For those of you how don’t know them, attachment pages were frontend pages one could navigate to, and that would just show the title/slug and the attachment. In some themes, it would even show the user who uploaded the file and when. This is how it looks like in WordPress 6.3 with TwentyTwenty:

Frontend screenshot showing the title/slug "brandenburger-tor", the post meta information, the image in the content and the beginning of the comment area

As you can see here as well, those attachment pages have the ability to be commented. There might be some website that would use them, but for most, they were rather useless.

With WordPress 6.4, those pages have been “removed”. When you access the URL for them, they would just redirect to the attachment file.

But the pages are not really removed. They are just not accessible anymore. They still exist in the database and have a title/slug. Now if we upload an image with a name like brandenburger-tor.jpg to the media library, the slug brandenburger-tor will be used for the attachment page, even with WordPress 6.4 without those frontend pages.

The solution: changing the slug of the attachment page

Now, to “free” the slug for our page, we have to change the slug of the attachment page. So let’s see how we can do this.

Finding the page

First, we search for the attachment name (we can also search for the slug):

List of media items with the search term "brandenburger-tor" with one entry showing the image

Editing the slug for the attachment page

We then click on the media item. At the bottom right, we find some links for the media item. With the first one, we can open that attachment page (this redirects us to the media item with WordPress 6.4) and with the second one, we can “Edit more details”:

The "Attachment details" pop with the "Edit more details" link highlighted

This will open up the “Edit Media” view, where you can see the Permalink for the image:

The "Edit Media" view with the "Permlink" at the top

In older versions of WordPress, there was an “Edit” button next to it, but this button does not exist anymore. Instead, you have to use the “Slug” screen element (meta box), which you probably first have to “active”, using the “Screen Options”:

The "Screen Options" opened with the "Slug" checkbox highlighted and checked

Now you can scroll down the page to this new meta box and change the slug for the attachment page. You could simply attach a suffix like “-attachment-page” to it:

Meta box to change the "Slug" for the page and the "Update" button on top

After you have changed the slug, hit the “Update” button.

Change the slug of the page

Now you can finally navigate to the page and update the slug. WordPress should now no longer add the “-2” suffix to the permalink.

Bonus: using the WP-CLI

If you are using the WP-CLI, you can change the slug of the attachment page using the wp post update command.

First, you have to find the ID of the page. You can find this when you hover the “Edit more details” link, or you search for attachments using the WP-CLI as well:

$ wp post list --post_type=attachment
+----+-------------------+-------------------+---------------------+-------------+
| ID | post_title        | post_name         | post_date           | post_status |
+----+-------------------+-------------------+---------------------+-------------+
| 35 | brandenburger-tor | brandenburger-tor | 2023-11-19 16:09:23 | inherit     |
+----+-------------------+-------------------+---------------------+-------------+

Once you have the ID, updating the slug works like this:

$ wp post update 35 --post_name=brandenburger-tor-attachment-page
Success: Updated post 35.

Conclusion

Having a page with that “-2” suffix is really annoying. And when you name your images or other media files similar to page names and also upload them into the media library before creating the page, you might run into this issue.

My advice would be to either create the page first, before uploading the media files, or even better, use better and more descriptive (longer) media file names before adding them to the page or media library.

If you happen to have run into this issue, now you should know how to fix this manually.

The first “official” WordCamp Germany in Gerolstein

Two weeks ago, I went to the small town of Gerolstein, to participate in the first ever “WordCamp Germany“. But wait, the first WordCamp Germany? Haven’t there been any before?

The history of German WordCamps

The first ever WordCamp in Germany was held back in 2008 in Hamburg. It was even the first WordCamp in Europe! Back in the days however, those WordCamps were not “official”, as the ones we have now, that are organized with the support WordPress Foundation / WordPress Community Support.

One year later, there was a second WordCamp in Jena, and it had a guest from the US giving a State of the Word speach.

It continued in 2010 in Berlin, which was my first WordCamp and 2011 in Cologne. Although they were all named WordCamp Deutschland (WordCamp Germany), they were still independently organized. Following two year of having a WP Camp, the reason behind the different name is a long one, which was hard to explain to the community back in the days.

Then in 2014, we had the first “official” WordCamp in Germany in Hamburg. But this was a “city based” WordCamp. All WordCamp following were always named after the city. This is why WordCamp Germany this year was the “first official regional WordCamp” we had.

Wednesday: Pluginkollektiv Hackathon

The day before the WordCamp, we had a little side event: the Pluginkollektiv Hackathon. This group of volunteers is working on some plugins that are well known and widely used, especially within the German and European community.

We tested some plugins, worked on some upcoming versions, but also discussed quite a lot about the future of the Pluginkollektiv and some of the plugin. Some plugin that were taken over had already been closed, and we took the hard decision to close some more.

Thursday: Contributor Day

The day before the conference days was reserved for the Contributor Day. I participated as a table lead for the Meta Team. Three first time contributors joined me, and we have worked on different tickets. I continued with a WordCamp.org ticket and the other worked primarily on WordPress.tv tickets. One of them was an 8-year-old ticket regarding the font-size, and we also created three new tickets.

After the Contributor Day, we had a small dinner for everyone helping with the event, followed by the “opening party”.

Friday: The first conference day

After the opening remarks, I took the chance to meet with attendees I haven’t seen in many years, or even haven’t met at all in person.

WooCommerce Blocks: Ein aktueller Blick auf die neuen Blöcke für Produktseiten, Cart und Checkout

This was the first of three lightning talks. Even though I don’t really like eCommerce, this talk by Manja Neumann was really fascinating one, showing the possibilities with the new blocks. I like the great flexibility to arrange the elements on the WooCommerce cart and checkout pages. If I ever have to work with WooCommerce again, I will be happy to give them a try.

Ein-Klick-Entwicklungsumgebung mit GitHub Codespaces

I’ve heard the project name “GitHub Codespaces” before, but never really knew what they are. After seeing this talk from Thomas Rose, I can’t wait to give them a try in one of my projects!

State of TV – Vortragsaufzeichnung, aktueller Stand und Ausblick

The last lightning talk was about the current setup we use at German WordCamp to record all the talks, held by Frank Neumann-Staude. As you might have recognized by now, all the sessions titles link to WordPress.tv and the respective videos. That’s possible, because all videos were already available just in the night of the last day of the WordCamp, thanks to our amazing TV team!

Digitale Barrierefreiheit fürs Kognitive Spektrum

I’ve seen many talks from Maja Benke on accessibility, but this one was an exceptional one. It was not focussing on the typical a11y topics like contrast, font-size, etc. But it was about people “on a spectrum” and what an accessible website means for them.

Empowering women through code: unleashing the power of diversity in tech

In the next lightning talk round, I was only able to watch this talk from Tabea Braun about the Groundbreaker Talents scholarship program, that empowers women from underprivileged communities in Uganda to become Software Engineers.

That was the last session for the day. The rest I have spent talking to more attendees and some sponsors as well.

Saturday: The second conference day

The schedule for the second conference day was packed with another round of amazing talks!

WordPress-Login-Security

Even if you think you know everything about a topic, you will learn something new! This session from Angelo Cali and Simon Kraft was no exception to that! While some “basics” were familiar, the part about passkeys was fascinating. I still don’t fully understand the security behind them, but as a modern alternative to passwords, they are something to take a look at.

Meta-Meetup für WordPress-Meetup-Organisator*Innen

After taking a break and after having lunch, I’ve met with other meetup organizers in the workshop room. We shared our experiences and exchanged ideas around the meetups in the German-speaking community. With the meetup group in Berlin, we are still online, but we really hope to get back to an in-person meetup by next year.

After this session, I was interviewed for a podcast.

Exploring the power of generative styling

The next talk I’ve attended was given by my colleague Tammie Lister. I can’t even summarize what the talk was about. Just watch the video and experience it yourself!

This was already the last talk for me at this WordCamp. I took a small break to get some new energy for the last part of the WordCamp: the After Party! I even had the chance to dance some Kizomba and Salsa 😀

Conclusion

This “first” WordCamp Germany was a great success! Given how difficult it was to travel to Gerolstein, around 240 people attended. This was a normal number of a “big” German WordCamp and not necessarily something you could have expected for the first post-pandemic event.

We don’t know yet where the next German WordCamp will be held – maybe in Munich, which was not possible this year because the team could find any affordable venue. I only know that I will attend it again, just as all German WordCamps since 2010.

How to create a Super Admin and assign it to all sites of a multisite using the WP-CLI

Two weeks ago, I’ve started to work on a new project. The whole WordPress website was versioned in Git, including a DDEV configuration and an SQL dump for local development. This was great, as it allowed me to get started really quickly. But after installing the project, I couldn’t find the login credentials.

Getting all users of the installation

The usual “admin” or “wordpress” users didn’t work, so I first checked the list of available users with the WP-CLI:

$ wp user list
+----+------------+--------------+------------------------+---------------------+---------------+
| ID | user_login | display_name | user_email             | user_registered     | roles         |
+----+------------+--------------+------------------------+---------------------+---------------+
| 11 | jo         | jo           | [email protected]         | 2023-06-01 01:30:30 | administrator |
| 22 | jane       | jane         | [email protected]       | 2023-06-02 02:30:30 | administrator |
| 33 | john       | john         | [email protected]       | 2023-06-03 03:30:30 | administrator |
+----+------------+--------------+------------------------+---------------------+---------------+

For none of these users (names have been changed) I could find any login credentials. Therefore, I had to create myself a new user.

Create an administrator user

I usually use the --prompt parameter when creating a new user (or other entities), so I don’t miss an important parameter:

$ wp user create --prompt
1/15 <user-login>: wapuu
2/15 <user-email>: [email protected]
3/15 [--role=<role>]: administrator
4/15 [--user_pass=<password>]: wordpress
5/15 [--user_registered=<yyyy-mm-dd-hh-ii-ss>]: 
6/15 [--display_name=<name>]: 
7/15 [--user_nicename=<nice_name>]: 
8/15 [--user_url=<url>]: 
9/15 [--nickname=<nickname>]: 
10/15 [--first_name=<first_name>]: 
11/15 [--last_name=<last_name>]: 
12/15 [--description=<description>]: 
13/15 [--rich_editing=<rich_editing>]: 
14/15 [--send-email] (Y/n): n
15/15 [--porcelain] (Y/n): 
wp user create --role='administrator' --user_pass='wordpress'
Success: Created user 44.

Now I was able to log in to the site! But as soon as I was logged in, I’ve recognized that this was a multisite installation. So my new shiny administrator user was not able to see all the other sites.

Promote a user to a Super Admin

Using the WP-CLI you need a single command to promote a user to a Super Admin:

$ wp super-admin add 44
Success: Granted super-admin capabilities to 1 user.

After running this command, I was able to see all sites listed in the “Network Admin”. I would now be able to work with all of them. But since my new account was not directly associated with any of those sites, they would not show up in the “My Sites” dropdown in the adminbar.

Adding a user to all sites as an administrator

This specific multisite had only three sites, so adding my new user as an administrator to all of them is a rather quick task. But what about a network with 100 sites? That would take quite long and you might miss one site. Fortunately, you can use another WP-CLI command to solve this.

Getting a list of all sites

We would first need to get a list of all sites. This can be done with the following command:

$ wp site list
+---------+---------------------------+---------------------+---------------------+
| blog_id | url                       | last_updated        | registered          |
+---------+---------------------------+---------------------+---------------------+
| 1       | https://example.com/      | 2023-06-01 01:30:30 | 2023-06-01 01:30:30 |
| 2       | https://example.com/de/   | 2023-06-02 02:30:30 | 2023-06-02 02:30:30 |
| 3       | https://example.com/en/   | 2023-06-03 03:30:30 | 2023-06-03 03:30:30 |
+---------+---------------------------+---------------------+---------------------+

To assign the new user to one of these pages with a specific role, we can use this command:

$ wp user set-role 44 administrator --url=https://example.com/de/
Success: Added wapuu (44) to https://example.com/de as administrator.

We would now need to do the same things for every single site, using the url field. But for many sites, this also takes some time and we might make a mistake. So instead, I was looking for a single line command.

Adding the user as an administrator to all sites

I’m not the best shell developer, but with some trial and error, I came up with this command:

$ wp site list --field=url | xargs -I {} wp user set-role wapuu administrator --url={}
Success: Added wapuu (44) to https://example.com as administrator.
Success: Added wapuu (44) to https://example.com/de as administrator.
Success: Added wapuu (44) to https://example.com/en as administrator.

This command is getting the list of sites, as shown before, and for each of them only the url field. This is then passed with xargs to the second command, that would add the user to the site. Make sure to set the correct username (wapuu in this example) in the second command.

Conclusion

With some WP-CLI magic, you can quickly create an administration user, grant Super Admin permissions and associate it with every site in a multisite. I hope you’ll find this useful in one of your (future) multisite projects as well.

WordCamp Nederland 2023 – My 50th WordCamp

Two weeks ago, I’ve attended my first Dutch WordCamp. It was not the first WordCamp in the Netherlands, this was the first WordCamp Europe 2013. But this was my first “true” Dutch WordCamp, being organized by the local community.

It took place in Burgers’ Zoo in Arnhem, just as last year. I was joining the event as a volunteer, which I also haven’t done for quite a while – if you don’t count organizing WordCamps as volunteering 😉 There was a tour through the Zoo, which I missed, unfortunately. But I joined the “speakers dinner” on Thursday evening.

Friday: The first conference day

The WordCamp was a two-day event, with talks and workshops. There was no Contributor Day. My first volunteering shift on Friday was registrations. Fortunately, we were many volunteers for this task, as I sometimes had hard times to understand the names of attendees, since it’s not always easy to get the spelling from the pronunciation of Dutch names for a German speaker 😀

Performance Awareness and Optimization

After the first rush of attendees arriving, I had some time to see the talk from my colleague Thorsten Frommen. He gave some very deep level insights on code performance. This was clearly a talk targeting a more experienced audience, and I personally also learned some new things:

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

This was also the only talk I saw on the first day. I spent a good amount of time talking to people I already knew, as well as other volunteers and some of the sponsors.

At the evening, there was a small event in downtown Arnhem, organized by a sponsor.

Saturday: The second conference day

On the second day, there was only the bigger room for presentations, as well as the two smaller “lodges” used for talks and workshops from the first day. I had a volunteers shift at the registration again, but since most attendees already arrived at the first day, there was not too much to do.

Your Code Can Be Poetry Too

This gave me the chance to attend the talk from Juliette Reinders Folmer. She talked about the WordPress Coding Standards in general, but also highlighted the huge task of releasing the new version 3 of the WordPressCS tool. She also explained why open source projects like this need more and better funding, to be sustainable:

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

After this talk, I had to go back to the registration counter, so I missed the talk “Bytes and Minds: Navigating Mental Health in the Tech World” by Ryan Hellyer, a community member from Berlin. I’ve heard so much positive feedback and also had the chance to talk to Ryan after the WordCamp, that I will definitely watch it, as soon as the talk is available on wordpress.tv – hopefully soon!

After lunch, I joined the unofficial session “Zoo Time”, where some attendees took some 2h to explore the zoo – as the WordCamp was inside the zoo, entrance to the zoo was included in the ticket as well.

In the evening, we met some other attendees in the city center for some food and drinks.

Conclusion

The WordCamp was really amazing! It was my “first true Dutch WordCamp”. But as I also wrote in the title, this was also my 50th in-person WordCamp. I will write a dedicated blog posts about all the WordCamps I have visited, including some nice stats.

WordCamp US 2023 – and my first trip to the capital

Last week I have been to Washington DC to visit WordCamp US. This was the third WCUS, I have visited. It was also the first trip back to the US since 2017 and my very first visit to the capital of the United States.

Visiting Washington DC

I was starting my trip on Monday afternoon. The flight was already an hour late, when it arrived in Berlin. After landing at Dulles Airport, I was welcomed by a huge line at the border control. After around 90min, I finally made it into the US.

I headed to the hotel, checked in, and then bought myself some pre-season tickets for the NFL game Ravens @ Commanders – my first NFL game in the US.

Some sightseeing in Washington

After a very long day, some good sleep and a typical American breakfast, I first tried to get a tourist SIM card, which is not all that easy in the US. Then I headed into the city for some sightseeing. The first stop was, quite obviously, the White House. I finished the day by visiting the western part of the National Mall.

On Wednesday, I continued my tour at the National Mall. It started at the Washington Monument, but unfortunately, I was not able to get tickets to go up (for the whole week). Instead, I visited the National Museum of African American History and Culture. The museum is rather new and shows on floors many fascinating things, but also quite emotional stories. I’ve spent three hours in the museum, but I could have easily spent three days, without being able to see all things.

In the evening, I went to National Harbor, where WordCamp US would take place and where I stayed for the following four days.

The Contributor Day

The Thursday was reserved for the Contributor Day. I’ve joined the Meta table again to continue some work on a WordCamp.org related ticket, I’ve started with back in February at WCAsia. As the people who were involved in the ticket were at WordCamp US as well, I could make some progress. But I also found some new issues and opened a new PR.

After lunch, I helped to restore a Linux laptop, as the permissions of the file system had been “destroyed” trying to install the Gutenberg repository.

I’ve also learned about “wp-now”, the new way to contribute to WordPress (and it’s plugins) that uses WP Playground.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

The conference days

The schedule of this year’s edition was quite different. It has three tracks, but the first and last session of every day was a keynote. Usually, there is only one keynote at the end of the WordCamp, held by Matt.

The layout of the venue was a bit complicated. While the sessions were all located very close to each other, the sponsors hall was located in a different part of the enormous venue. It was easily a 3-min walk from the sessions to the sponsors.

For All Userkind: NASA Web Modernization and WordPress

The first keynote was held by two members of the team responsible for the relaunch of the NASA website. They shared their story on how they are migrating the many different single sites into a new unified WordPress website. For the main site nasa.gov they are currently using Drupal 7 (a version that was first released in 2011 and will reach its end of life in January 2025). NASA had their first website back in 1994 and use Drupal since 2015 for the current site.

So it’s about time to get a fresh start. At beta.nasa.gov, they are already presenting the new site. It was built using many custom Gutenberg blocks and patterns they have developed with their team. They have currently onboarded 440 users to the new WordPress CMS, created 3,023 new landing pages and migrated 68,006 pages from the old CMS. But this is still just a fraction of all the content they have at around 130 different sites. I can highly recommend watching the recording of this fascinating session. There was a follow-up session, which I didn’t attend.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

So, You Pledged to Contribute to WordPress: What Next?

After lunch, I attended a panel with my colleague Tammi on stage. Together with Femy Praseeth, Jonathan Desrosiers and the host Hari Shanker, they all shared their experiences as WordPress contributors and gave some tips about how to get started contributing. As some of them are sponsored for their contributions, like Tammi is sponsored by my employer Inpsyde, attendees get some first-hand insights on how to become more active in contributing back to the project.

Inpsyde also created the Five for the Future profile with the current pledges, including the 5 hours I currently contribute. In the future, I will be able to contribute more, which I will probably blog about later this year.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

All the President’s Websites

After a quick break, I’ve attended another session presenting a governmental project, held by Helen Hou-Sandí and Andrew Nacin. Those of use who worked on client projects knows about deadlines and the issue to hold this deadline. There are all kinds of things that can go wrong, and in the end it takes longer. But as Nacin was jokingly saying, “the Founding Fathers” of the United States decided back in 1776, that a new website needs to go live on January 20th, at noon 😀

This makes things a lot tougher. The new whitehouse.gov website for the Biden administration was built with the help of the WordPress agency 10up, where Helen was working at the time. The design Ben Ostrower created the entire brand in only around 72 hours. For the whole project, the team of only 10 people had just 6 weeks to get it done. This is not a lot of time, as many of us know. Fortunately, they didn’t have to worry too much about the website content, as the new administration has a team to produce a lot of content.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

In this project as well, they heavily used custom blocks for the content. Helen was showing some videos of the editing experience. The backend had almost an almost pixel perfect preview of the page on the frontend, so the content team could truly create the final look of each site. That was long before Full Site Editing was introduced.

It was really an impressive showcase on what can be achieved with WordPress in a short amount of time with an experienced team and a client, that works closely and actively with the development team.

BlackPress: Amplifying Black Professionals in WordPress

On the second day, I’ve attended another panel featuring Ray Mitchell, Maestro Stevens, Destiny Kanno and George H. Woodard III. They presented the BlackPress project, a community for black WordPress professionals and allies with the goal to connect them and uplift each other.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

The panelists shared their individual stories and career paths as owners of an agency, Automattic employee and sponsored contributor or consultant and WordPress developer.

I haven’t heard about this initiative before, but it was inspiring to listen to the stories of all panelists. These are the kind of sessions I want to see a lot more on WordCamps.

The final keynotes

Josepha Haden Chomphosy gave a brief 15 min talks on the future of WordPress including community topics like the new event formats and a brief summary of the Community Summit that happened at the two days before WCUS. Three of my colleagues attended this event as well.

This keynote was followed by Gutenberg: Next held by Matt. He showed a video of the WordPress 6.3 release and talked about the things we can expect in WordPress 6.4, like the new default theme Twenty Twenty-Four. The development of this new theme will be co-led by Jessica Lyschik from the Germany community in the Women & Nonbinary Release Squad.

The Q&A after these two keynotes were done differently this time, as multiple community members asked for a change of the format on how questions are asked. The questions could be asked using Slido. Each question needed to be approved by the organizing team. After the approval, all attendees could vote on those questions. The ones with the most upvotes were picked up by Josepha and Matt.

After the Q&A, the WordCamp US organizing team was asked on stage. They thanked all people who helped to make this year’s WCUS possible. Unfortunately, they have not announced where and when WCUS will be next year.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

The After Party

Following the tradition of previous years, the After Party took place in a museum. After a nice dinner with my Inpsyde colleagues, we headed into DC for the Smithsonian Museum of Natural History. In the Rotunda, they served some deserts and alcohol-free drinks. When I was not talking to other attendees, I was able to roam a bit through the Ocean, Mammal, Fossil and Geology halls. The museum has some impressive exhibits, but way too much to see in just three hours the party lasted.

Click here to display content from Twitter.
Learn more in Twitter’s privacy policy.

Open "content" directly

Some more days in the DMV area

On Sunday, I visited some friends in Annapolis I haven’t seen for many years. I was a great way to cool down a bit after all the impressions of the event.

I was also lucky enough to be able to secure a tour in the Capital on Monday. After the tour, I could also visit the galleries of both The House and The Senate, since both chambers were still on summer break. For the rest of the day, I went to the National Air and Space Museum, another Smithsonian Museum. While around half of the museum was closed for renovation, they still showed some very interesting things. From “The Wright Brothers & The Invention of the Aerial Age” and other “Early Flight” exhibits to “Destination Moon” showing some of the NASA equipment used for their moon missions. This perfectly closes the circle to the first keynote of the WordCamp.

Tuesday was my last day. I went to the airport to check in my luggage and then went to the Steven F. Udvar-Hazy Center, the second location of the National Air and Space Museum. I was most fascinated by the Space Shuttle Discovery, as well other historic Human Spaceflight exhibits. Other impressive objects were a Lockheed SR-71 Blackbird or the Boeing B-29 Superfortress “Enola Gay” that dropped the first atomic bomb on Hiroshima. Unfortunately, other than in similar museums in Germany, it was not possible to see some planes from the insight. But it was still an impressive collection.

I also only had about an hour, before I went back to the airport, to have enough time for security – which only took like 3 minutes to go through! So I had enough time to prepare myself for the flight back.

Overall, it was another trip to WordCamp US I really enjoyed. I’m looking forward to seeing where it will be next year and then decide, if I attend it once again.

Migrating the Media Library from one site to another

At the last WP Meetup Potsdam, which was a casual meeting for some food, drinks and talks, one of the new attendees asked a question that sounded easy, but for which we had different answers:

How can I migrate all images from one WordPress site to another site?

Different attendees came up with different solutions. Here are the ones that were mentioned.

Migrate the images using FTP

Many people working with websites use FTP to upload/download files to a server. So why not just download them from the source site and upload them into the wp-content/uploads folder of the new site.

Anyone knowing how WordPress deals with attachments (images and other files) probably knows, that not only the files must be there, but also an entry in the database. Otherwise, the images could only be hot linked using their URLs, but are not available in the media library.

Import files from a folder using a plugin

To import those files into the media library, you have to use plugins like Add From Server, which some of you might know. It hasn’t been updated for 3 years, but might still work, although the plugin description states, that it is not designed for migrations. I’ve found Media Sync as an actively maintained plugin, but I have never tested it myself.

Import media files using the WP-CLI

You can also use the WP-CLI to import media files from a folder. Here is an example importing files from one WordPress installation into another on the same server:

$ wp media import ../source/wp-content/uploads/**\/**\/*.jpg
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391-1024x683.jpg' as attachment ID 6.
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391-150x150.jpg' as attachment ID 7.
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391-1536x1024.jpg' as attachment ID 8.
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391-2048x1365.jpg' as attachment ID 9.
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391-300x200.jpg' as attachment ID 10.
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391-768x512.jpg' as attachment ID 11.
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391.jpg' as attachment ID 12.
Imported file '../source/wp-content/uploads/2023/08/28164a88367399c18.97744391-scaled.jpg' as attachment ID 13.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317-1024x683.jpg' as attachment ID 14.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317-150x150.jpg' as attachment ID 15.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317-1536x1024.jpg' as attachment ID 16.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317-2048x1365.jpg' as attachment ID 17.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317-300x200.jpg' as attachment ID 18.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317-768x512.jpg' as attachment ID 19.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317.jpg' as attachment ID 20.
Imported file '../source/wp-content/uploads/2023/08/41864a882e698f3d6.67081317-scaled.jpg' as attachment ID 21.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907-1024x683.jpg' as attachment ID 22.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907-150x150.jpg' as attachment ID 23.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907-1536x1024.jpg' as attachment ID 24.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907-2048x1365.jpg' as attachment ID 25.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907-300x200.jpg' as attachment ID 26.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907-768x512.jpg' as attachment ID 27.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907.jpg' as attachment ID 28.
Imported file '../source/wp-content/uploads/2023/08/75364a8821590f529.41962907-scaled.jpg' as attachment ID 29.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704-1024x683.jpg' as attachment ID 30.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704-150x150.jpg' as attachment ID 31.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704-1536x1024.jpg' as attachment ID 32.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704-2048x1365.jpg' as attachment ID 33.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704-300x200.jpg' as attachment ID 34.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704-768x512.jpg' as attachment ID 35.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704.jpg' as attachment ID 36.
Imported file '../source/wp-content/uploads/2023/08/89264a87feebb12a4.11887704-scaled.jpg' as attachment ID 37.
Success: Imported 32 of 32 items.

This example imports all *.jpg files in any monthly uploads subfolder. But you can also see one big issue here. Since WordPress creates many different file sizes of the original image, you would import all of them as separate media library items. So before importing any files you have copied over using FTP, you would have to manually remove them. When you migrate large media libraries, that task can take a while and you might make mistakes. So what to use instead? There are other (premium) plugins to migrate files, but there is a simpler and free way.

Migrating the media library with the WordPress Export/Import

Any WordPress installation comes with a default “Export” mechanism. You can find it at “Tools > Export” in your dashboard. Here, you can select which post types you want to export and optionally filter by a date range.

Export the media items

We want to export only media files, and we don’t select a date range, so all items will be exported:

The export tool configured to export all media items.
The export tool configured to export all media items

After clicking the “Download Export File”, your browser will ask you to save an XML file. This file can be used on your target site to import the media. So the export tool does not export all images (or other media file types), but only a file with the information where to find them.

Import the media items

Now you access the dashboard of the target site. Here you navigate to “Tools > Import”. At the bottom, you should see the “WordPress” importer. It is not installed by default, but you can install the plugin easily using the link:

The overview of the import tools, with the "Install Now" link highlighted.
The overview of the import tools, with the “Install Now” link highlighted

This will install and activate the plugin. The link will then change to “Run importer”. This brings you to a page with a file upload. Select the previously downloaded XML file and hit the “Upload file and import” button on that page. You should then see a page like this:

Step 2 of the XML import, that ask you to assign authors and gives you the option to "Import Attachments".
Step 2 of the XML import, that ask you to assign authors and gives you the option to “Import Attachments”

This page will list each author from the source site and asks you if you want to import them by creating a user or by assigning the contents of this user to an existing user.

The most important part is the checkout to “Download and import file attachments”. This checkout must be active. Then you click the “Submit” button and the import begins. Depending on the number of files, this might take a while.

Potential script timeout

As this process will download all files from your source site via HTTP and saves them to your new site (while also creating all the other images sizes), it might happen, that the request times out. You can then either import the same XML file again (existing content will be skipped), or you might have to split up the exported XML file into multiple ones, where you select a date range that is small enough.

Conclusion

There are many ways to migrate media files from one site to another. While I really like to use the WP-CLI for this task, the WordPress Export/Import has some major advantages. All you need it the ability to install the importer plugin. No need to use FTP and SSH to install and run the WP-CLI on the target site (which you might not have permissions to). You can also filter the media items by date and if you know how to edit XML files, you can also adjust what should be imported.

Another plugin goes into retirement

Yesterday, I’ve closed another of my old plugin: Kau-Boy’s Opensearch. Yes, back in the days I had a prefix for all of my plugins, like many others. 😀

This was the fourth plugin I’ve published in the WordPress Plugin Directory. Its purpose was to add an OpenSearch description format to the site. Browsers back in the days would then offer the search of your WordPress installation to be added to the search field, browsers were showing right of the address bar. Around 2019 however, Firefox began removing this additional search field.

Chrome continued to offer the autodiscovery for searches, and would allow you to hit TAB after typing the domain name, which would then directly search on your page. This didn’t even require such an OpenSearch feature on your site. This autodiscovery was removed for quite a while for new pages, however. If you still want to use it, you have to add those website searches manually in the settings of both Firefox and Chrome.

As browsers were not supporting the functionality anymore and the plugin only had 10+ active installs, I decided to remove it. In the 13 years it was available in the Plugin Directory, it only got 1627 downloads. So it was always a niche plugin anyway.

Alternatives

As mentioned before, there is no real alternative, unless you want to set up those website searches manually in your browser. For some times you could find Firefox search add-ons, but it seems they have all been removed. Chrome seems not to offer any of them as well.

Search shortcuts

While I was checking for the current search options in Chrome, I’ve found some really useful search shortcuts. When you type @tabs you can directly search for a currently opened tab, with @bookmarks you can perform a search of your bookmarks and with @history you can find recently visited pages. Firefox also has search shortcuts, but using different symbols you have to memorize.

Future plugin plans

Of my 13 plugins, I’ve now closed two of them and two more will follow in September and October. This gives me more time to focus on the remaining plugins and check them for compatibility with the upcoming WordPress releases. But I also have some new plugins in the making. So stay tuned!