I’ve started using WordPress back in 2008 to develop themes and plugins. And since then a lot has changed in both WordPress and Web development worlds.

For example, I’ve used it as a framework for building about 4/5 web apps powered by VueJS. But also, because of Gutenberg, I had the opportunity to learn and work with React.

What is “Modern” WordPress development?

Old devices

In 2018 at the WordCamp London there was a panel of small companies and developers exchanging their own experience as WordPress development.

During the talk, some of them admitted to writing pure CSS because they had no time to learn SASS.

Also, one of the companies I’ve worked did outsource a few website developments.

Nothing wrong with that, but the quality of the code wasn’t great. The common problem was:

  • No JavaScript tooling (i.e. Webpack, ParcelJS) used, but a single massive +1k lines JavaScript file
  • Lack of any coding standard used for both PHP and JavaScript files
  • Massive and disorganised PHP files

Do you think this is an isolated case? If so, how many popular plugins and themes do use tools like Webpack, Parcel, Composer, PHPUnit, SASS, LESS, PostCSS…? But also, how many developers or companies you know do the same?

Believe me, if you go and check, I’m sure you’ll be surprised!

So, what do I mean with “Modern”?

Simple, I mean the opposite of what I’ve described above: Learn, and take advantage of those tools will allow us:

  • saving time
  • becoming better developers
  • boost our career

I haven’t got time for this

Remember the episode I talked about while I was attending the WordCamp in London?

I was shocked by their “I don’t have time” excuse… that’s the WRONG attitude! And as most of the excuses that we use, this does not help but only damage ourself.

But why should we care?

If you don’t agree with me, or still not sure why let’s take a look some small example.

The main stylesheet for my old website contains about 1k lines and imagine we want to do some change to the .mobile-menu class.

Scrolling to find it is out of questions, too many lines and is too slow.

So, let’s do a search… Found it at line ~851, yay:

.mobile-menu {
  background: var(--color-black);
  position: fixed;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0.9;
  cursor: pointer;
  display: none;
  z-index: 10;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
  -webkit-box-shadow: 0 0 5px 1px rgba(249, 105, 14, 0.6);
  box-shadow: 0 0 5px 1px rgba(249, 105, 14, 0.6);
}

In my case, I’ve used CSS variables and this means that to know the value of --color-black I need to scroll up the entire document, find what I’m looking for in:

:root {
  --display-medium: 975px;
  --display-small: 767px;
  --color-black: #2e343b;
  --color-bg: #fff;
  --color-white: #fff;
  --color-shadow: #939393;
  --color-orange: #d43900;
  --color-light-orange: rgb(249, 105, 14);
  --color-menu: #082213;
  --color-menu-search-hover: #bbd4d4;
  --color-orange-opaque: rgba(249, 105, 14, 0.4);
  --color-sidebar-link: #91a6ba;
  --color-social-bar: #48525d;
  --color-social-bar-link: #b2cce5;
  --color-tooltip-bg: #009fd4;
  --color-quote: #050709;
  --color-quote-border: rgba(112, 128, 144, 0.36863);
  --color-quote-symbol: #f9690e;
  --color-body-link: #006080;
  --content-width: 1210px;
  --post-header-height: 350px;
  --transition-fast: 0.2s;
  --transition-slow: 0.3s;
}

Go back to line 851 and carry on with your reading/change, and then go to the next issue.

Now imagine doing the same thing on a 5k+ or 10k+ huge stylesheet, or maintaining a single 1k+ JavaScript file…
That sounds a bit crazier and time-consuming, doesn’t it?

Yes, I can do it (but take it easy)!

Bravo/a that’s the right mindset!

– “Me”

One of the companies I’ve worked used to create one big CSS file for each project/theme. Comments block were used to separate each section within the file. And trust me, maintaining them was a real nightmare.

So, soon after joining, I proposed to use SASS to make things more manageable:

ME: Let’s use SASS! It makes it easier to write and maintain the CSS

Boss: But no one knows how to use it

ME: They don’t have to learn it straight away, but they CSS the old way and slowly learn how to take advantage of SASS features

And that’s what we did!
We made the transition from plain CSS to SASS as painless as possible. We had to teach people only:

  • How to use grunt to compile the SASS files
  • How to use imports and nested selectors

That’s all, and the next project we started we were able to use SASS with almost zero friction. And with a bit of time people started to master SASS and writing mixing, functions, etc…

A similar thing happened years later when one of my colleagues proposed to migrate from SASS to PostCSS. He talked us through the benefits of using it, to be sure we understood the value. And after he did configure it so we could use it in a similar way we did with SASS.

In the beginning, the only thing we had to change, was the extension of the file: from .scss to .pcss.
And slowly, we started to explore more about 3rd party plugins and writing custom functions.

So as you see, when embracing a new tool, or technology, we should do it progressively. Start from the basic and improve along as we get more confident using it.

The zero-configuration dream

There are tools like Webpack and Parcel that offer that. This means that we can start using them right away with zero or small effort!

We cannot know everything

Also, there are cases when it’s enough to have a basic understanding of a tool. Either because it is not our primary focus, or we don’t have time to go deeper.

For example, I know how to use Docker. I’ve created a custom WordPress image to used in my previous company, and for my local development. But that’s all, I’ve learned the basic and understood how I could use it for my day-to-day development.
Why? Because Docker is not my priority, is not a fundamental skill for my current job or career, neither I have time to learn it 🙂

The career

If we go and search for any mid or senior backend/frontend JOB, we can see that all of them have something in common: They expect knowledge/proficiency/usage of some tool, for example:

  • Composer
  • Unit test (i.e., PHPUnit, Jest, Mocha)
  • CSS Pre-processor (i.e. SASS, LESS, PostCSS)
  • JavaScript framework (i.e. VueJS, React)
  • etc

And the good news is: We can use most of them when writing a WordPress plugin or theme.

And actually, this is my story!
I’ve used WordPress to learn and practice like:

  • Unit test and TDD with PHPUnit and Jest
  • CSS Grid/Flexbox
  • Write vanilla JS
  • Write a Web App with VueJS and React
  • How to use REST API and GraphQL

Thanks to that, in my last job search, I was contacted by several companies, not recruiters! And had different offers, and so the opportunity of deciding which challenge to text next!

WordPress is the perfect platform for learning, experimenting and improve our skills!

– “Me”

What’s next?

In the next weeks, I’m going to write more about my WordPress development adventures in using and experimenting with various tools.

I’m going to talk about real-life problems I faced when working for WordPress agencies, and as a solo developer.