So I just started working for a web dev company that does a lot with WordPress for their customers, but it’s pretty new to me, as is php in general. My experience is mostly in the JavaScript world – React, Next, Node, etc – and in Rails.
Especially with js, development feels real slick. Great cli, things like typescript and parcel that magically keep my code tight and spit out an output directory that includes transpiled code ready for comparability with a broad set of browsers, merge and split code accordingly to reduce the number of http requests needed, etc.
So far though, new to both WordPress and PHP in general, everything I’ve worked on so far has seemed a whole lot clunkier… When I want to edit a theme or add functionality, I end up with colossal files with PHP, HTML, and sometimes JavaScript all interspersed and mixed together (and a confused IDE that doesn’t do a great job of recognizing when I switch back and forth, and isn’t able to format my code at all). I’m also not certain whether I should be `echo`ing out lines of HTML, or closing and opening my PHP tags. Different coworkers seem to do it differently so I’m not sure what’s best.
All this is not to complain about WordPress and PHP, but about my own ignorance (I hope). Can someone point me towards some better practices and approaches and structure, because right now it feels like all my work in WordPress is done with duct tape.
Are there some equivalents to the slick JS-development tools I use? Is there a way to use them in conjunction – maybe to have something like parcel handle my js, css, and HTML, and somehow just have my php separate, just picking up their output files? Any help is much appreciated!
[ad_2]
IMO, the Javascript world has a different feel from most everything else. Those frameworks all provide so much scaffolding for you that, yeah, it may feel clunky that you have to actually build most things yourself.
The other thing that’s important to understand is that WordPress is also significantly older than most (all?) major JS frameworks, and goes back to a time when Php development looked very different. WordPress was released 10 years before PHP became object-oriented, and best practices for PHP development have massively shifted since then.
Whenever you have software so old and with such a massive community of modifications (plugins, themes), there’s a lot of legacy design decisions that stick around to avoid breaking changes.
And so, we have today’s php and WordPress: a hodgepodge of paradigms and strategies. Many of us develop new plugins where every function is in a namespaced class. But, different developers take different approaches, and I have yet to see a magical tool that can effortlessly update code paradigms in old plugins.
That said, if you want to focus on the frontend, you can do a lot with the Ajax API.
Closing and opening PHP will help your IDE to highlight both. If you’re using control structures containing large chunks of HTML, use alternative syntax. It’s a lot easier to find `<?php else: ?>` in the middle of a chunk of markup than braces when you’re dipping in and out of the interpreter.
Maintain separation of concerns. There are certain things that belong in a theme’s functions.php and those things are related to displaying content, eg a function to spit out a breadcrumb trail. Any custom code you write *not* related to displaying content belongs in a site-specific plugin. For example: registering custom post types. That’s extending the types of content the site contains, so it belongs in plugin land. If at some point in the future the client wanted to change their theme, they should be able to do that without their CPT content becoming inaccessible.
I like to write the main class of a theme or plugin as a singleton. Opinions differ on this approach, but since both are unique it makes sense to me.
Get to know the template hierarchy, and don’t be tempted to reinvent it. Get to know WP’s hooks and filters and use them wherever possible over hard-coding a change.
Enqueue your JS in separate files. That makes it available to any plugins that minify, cache or concatenate it (though with http/2 concatenation is less of a thing).
WP is (roughly speaking) a pub/sub architecture, which can be confusing to people who are only familiar with MVC.
As someone who’s been building for years on WordPress and Node as well, that’s just how WP is. PHP, JS, HTML all coming together.
One of the ways that I personally use is just look at how the giants on WP are doing it meaning
Checking out how major plugins are built by studying their code for example Woocommerce, Elementor, etc
Then doing the same for themes.
Once you’ve done a few, you might form a pattern and follow it as you grow
Part of this is just the difference between front end and backend dev. Fronted build chains exist because code that helps developers stay sane is not usually code that works efficiently in the highly dynamic browser environment. The backend environment doesn’t need that as much. There are tools for testing, debugging, and templating, but you don’t NEED them to do good work.
If you want examples to study and tinker with, check out the different projects from the folks at Roots: They have very modern approaches to WordPress theme, plugin, and site dev. (There is a learning curve!) Another one is WP-Rig, which is a boilerplate for theme development (a little outdated but still way more modern than the WordPress norm, maybe simpler to approach.) At minimum learn to use Composer — dependency management is hugely important and IMO it’s almost criminally stupid that WordPress continues to officially ignore it. Autoloading classes and namespaces is The. Best. Thing. THAT is what will help keep your files a reasonable size and separate your logic from your output.
And on that note I encourage you to learn a bit about object-oriented programming in PHP. A good book, not WordPress-specific, is PHP Objects, Patterns, and Practice. Don’t try to OOPify every single thing you write (been there, tried it, wasted so much time), but understanding some common pattterns and applying them where they make sense does wonders for taming the duck tape jungle.
Sage 10 is a great modern theme and even has some other plugins/ server configs in its ecosystem that are great. Its built on the blade system and is a much more modern approach to PHP and other php application workflows