WordPress Coding Standards for Designing Scalable And Lean Websites
Creating a website is only half the battle. If you want your site to be successful over the long-term, you need to make sure it’s built on a strong foundation that supports its continued growth and success. But what does that really mean when it comes to WordPress development? We asked some of the Top WordPress engineers about what are the WordPress coding standards, which they follow to deliver scalable, maintainable and secure websites? This report summarizes our findings.
WordPress Coding Standards
Keep the UX/UI Simple
Maintaining your WordPress website and scaling it is much easier as per the WordPress coding standards if development is done with speed in mind. Keeping the UX/UI minimal ensures that your website isn’t bloated with unnecessary features and components. This requires you to have a comprehensive understanding of your needs. Keep your website design at a minimum for ensuring scalability.
“85% percent of websites suffer speed problems because of the lack of knowledge and understanding that simplicity is your best ally. This is why Google came with AMP pages, which for me is honestly dumb because they are not targeting the real issue. If you plan your development with speed and simplicity in mind, your speed, user experience, SEO and conversions will be better.”
Uriel Posselt – Investor, Coach, Web Developer, & Online Marketer
“We also like to keep everything simple – so all components are “stripped” to a bare minimum – that way we can minimize the amount of bloat and “spaghetti-code”.
Aris Kuckovic – Lead WordPress Engineer
Less is More When it Comes to Plugins
With 28,000 free plugins in circulation, WordPress can do almost anything you can dream of. Without its plugins, WordPress is no more than a publishing platform for content creators. But before you install any plugin, consider the value of that plugin. What happens if you don’t have it? Will you lose some critical functionality? Often, you can replace plugin functionality with a small, readable code snippet.
For example, instead of installing a plugin to add Google Analytics code to your site, consider adding it directly to the header.php file when creating a child theme.
“If planned well, your design, development, and online marketing, you won’t need plugins at all in WordPress. If you know HTML, PHP, CSS, and how everything works on WordPress, you can build 95% of many small business websites without plugins.”
Uriel Posselt – Investor, Coach, Web Developer, & Online Marketer
”I build websites with Tailwind 3 – and mainly around WordPress core (avoiding plugins if possible). I believe, if you do it by using WordPress’ standard hooks and filters, you can avoid A LOT of problems afterwards and minimize the amount of maintenance for the client. This solution is really scalable – and definitely something we use for all our solutions – big or small. By using this setup – we’ve managed to minimize the time spent on development itself – and maximize the time spent on optimizing and meeting all the requirements the client may have.”
Aris Kuckovic – Lead WordPress Engineer
Avoid Using Page Builders
Page builders like Elementor and Divi Builder have become the go-to standard for WordPress developers to create beautiful interfaces quickly. While these drag and drop builders offer convenience for website managers to easily make changes to their site regardless of their technical skills, they also cause a number of performance issues.
For one, these builder plugins are packed with a large number of features and elements to appeal to the masses. Since you may not need all of those features, they might just bloat your website with unnecessary code. Page builders are also notorious for adding a lot of nested HTML and non-semantic code, both a draw for website performance.
Alternatives for page builders: Gutenberg & Templating with Advanced Custom Fields (ACF)
Never Hack the WordPress Core or the Core Theme
You may be tempted to achieve something by adding a small snippet to your WordPress core or the core theme. That’s a mistake that often lands developers in trouble later when support emails from clients start jamming in the inbox. Always create a child theme and add your custom code in there. This way, your customizations will stay intact the next time the theme and the core get an update.
“Never customize the core theme because if you update, it can break your website.”
Mahammad Ahmadov – WordPress Developer, SEO Specialist & Manual Software Tester
Compress all Files
As your website grows and you add more content, the load on your server resources increases. All of that data has to be stored somewhere. To avoid scaling issues in the future, it’s better to be proactive and use Gzip compression to compress all of your files. Gzip compression reduces your file sizes by removing unnecessary characters and reorganizing data more efficiently.
“One of our standard practices is to always compress files like HTML, CSS, JavaScript and image files to reduce the size of the website by 70% without losing anything. This is like an easy fix to improve website performance.”
Faraz Ahmed – Development Lead at Codup
Fight Code Redundancy by Reusing Components
When writing custom PHP code to develop your WordPress website, use the software development principle of Separation of Concerns. The code you write should be modular meaning that every code module or function should be responsible for a single feature or functionality. when you keep things separate, you can easily reuse components and avoid leading to spaghetti code that’s impossible to untangle later.
“To help websites scale on WordPress, we make sure that every block of code loaded on a page is needed for its functionality. For example, the code responsible for the checkout flow should only be loaded on a checkout page and not on other pages.”
Faraz Ahmed – Development Lead at Codup
Use AWS for Auto-Scaling and Horizontal Scaling
AWS is the recommended hosting provider for enterprise level WordPress websites that want to manage their traffic and performance. AWS has been known and tested to have helped in managing scaling and heavily trafficked websites without any disruptions. With more server capacity comes the ability to manage the load easily, which is helpful in both, scaling your websites and increasing the performance/speed of your websites. The AWS EC2 also allows you to auto-scale horizontally and load-balance easily by adding web nodes as required.
Moreover, many industry experts also find AWS to be one of the most reliable hosting platforms because of its impenetrable security & encryption capabilities. Armed with a myriad of amazing tools and such exceptional support, AWS is considered a favorite for maintaining and scaling websites in these current times.
“If a client asks us to recommend any particular hosting server, then yes, we normally go with AWS due to its wide range of options that help us to set up a website according to the client’s needs and helps us to easily balance the load.”
Faraz Ahmed – Development Lead at Codup
Use Lazy Loading
Reducing your website load is the best and the most efficient way of scaling and maintaining it. Lazy loading enables in reducing extra load on your servers and helps in boosting the overall performance of your website. Using heavy images and videos, which take up a substantial number of resources may affect the performance of your website. However, with lazy loading, these images and videos will only load when a user scrolls down to them. This specificity allows and helps in increasing your website speed and reducing the loading time to a bare minimum.
“I personally prefer the use of lazy loading when developing a website because with increasing visual content on a website, the chances of performance reduction increase. With lazy loading, we can decrease the image loading time and boost a website’s speed and performance.”
Faraz Ahmed – Development Lead at Codup
Keep Separate Environments
When developing a WordPress website, it is highly advisable to use separate environments for coding, testing and live. When you accidentally mess up something on your site (which happens oftens), keeping environments separate comes in handy at that time. Damage control becomes easy. Using separate environments also helps in making changes according to your needs, without having to make any changes to anything else in the development process. This also makes testing easier and much more efficient.
“Our general workflow looks like this: creating a local environment and doing all our custom coding in there ⇒ pushing those customizations to staging and testing it on staging environment ⇒ deploying to live once QAs test it completely and give a go-ahead.”
Muniza Sultan – Dev Lead at Codup
Using Git Version Control
GIT version control helps in damage control when you accidentally make mistakes. One little mistake in your code can tank the whole site. However, with GIT you can easily reset any changes that you might have made to undo all the chaos. It acts like a time machine.
Nevertheless, you must be careful about securing your GIT folder. And, you must ensure not to store your sensitive information in it. Make sure to block public access to your GIT folder. Blocking access to your log files is also helpful as these often contain sensitive information as well.
“Codup strictly follows its SOP and uses GIT for version control. It allows our developers to collaborate easily and work together.”
Muniza Sultan – Dev Lead at Codup
Regular Automation Testing
With regular automated testing made a part of the development process, it can greatly improve the overall quality, speed and performance of the website. Automated testing helps in reducing performance related issues and helps in taking preemptive measures to ensure high performance of the website. Moreover, running these tests separately and manually is highly inefficient.
“By using coding best practices plus automated tests at regular intervals using powerful testing automation tools, you can achieve amazing website performance and speed. Furthermore, the more test cases you cover, the more likely you are to achieve a high performing website. “
Talha Mujahid – QA Lead at Codup
Rely on Vue.js or React instead of jQuery
Since the WordPress core and plugins rely on jQuery, using it to execute simple tasks such as running a one-time Ajax request is understandable and logical.
However, when it comes to modern and highly complex web pages which require the use of complex components with hierarchical relationships, this calls for a different solution altogether. Here, modern front-end libraries like React can and should be used because they use object-oriented programming principles.
“With Gutenberg development becoming more common, React has become an in-demand skill for WordPress developers. Our WordPress developers are adept at React allowing them to build complex web applications on WordPress.”
Wasi Noor – Senior Business Analyst at Codup
Use the WordPress REST API
WordPress Rest API is a powerful feature that has bridged the gap between the legacy WordPress core built on PHP with modern JavaScript implementations. It allows your WordPress website to be more than a publishing platform. Now, it can serve as a storage and retrieval system that can feed data to the front-end. REST API is a huge step forward in making the code modular, reusable, and readable.
“WordPress REST API can standardize the communication between the back-end and front-end. It’s a huge step forward from the old days where you used to get templates with a mix of HTML, PHP and SQL all thrown together.”
Waqar Jamal – Product Manager at Codup
Also Read
