One of the biggest tasks you can undertake with a client is a complete redesign of their website. However, WordPress has a myriad of moving parts, which can make producing consistent work a challenge.
When tackling a redesign project, you’ll benefit from a clear checklist to guide you through the process. Everyone has their own project management style, but you should always maintain a high-quality service. Keeping a quality assurance checklist around will help you hit your goals every time.
In this article, we’ll offer you a nine-point checklist to follow in chronological order as you redesign your next WordPress website. Let’s get your next project out the door with confidence!
1. Custom Design Elements Should Be in a Child Theme
Simply put, child themes are recommended for modifying existing themes. They inherit the functionality and styling of its parent theme, and enable you to make changes that aren’t wiped out when updated.
Normally, updates eradicate any custom code you may have added to your desired theme. As they often include security fixes, it’s a good idea to maintain them separately. Additionally, child themes provide a clean and simple place to keep track of your customizations.
While child themes may seem a bit confusing at first, they’re simple to set up. In fact, given the way it inherits code from its parent, a new child theme only needs a theme folder and style.css file to function.
2. Existing Functionality Should Be Used Whenever Possible
WordPress is a well-tested platform with code that’s been reviewed by hundreds (if not thousands) of experts over the past decade. It means the collective experience and knowledge of these contributors has turned WordPress into an incredibly powerful platform straight out of the box.
Because of this, you should avoid writing custom functions into your themes and plugins when a similar feature already natively exists. You may be surprised by the vast number of utility functions available. One of our favorites is sanitize_title, which turns a series of words into a URL friendly slug with lower case letters and dashes. This comes in handy for manually generating a quick link from existing content.
Next time you’re tempted to program a new WordPress utility, check whether an existing function or hook exists. If you need some assistance, the WordPress.org Code Reference is a comprehensive database of the functions, hooks, classes, and methods included, and is easily searchable.
3. Functionality and Design Should Be Kept Separate
WordPress is extensible in two ways. Firstly, you can implement additional functionality to the platform in the form of plugins. Secondly, you can completely customize its front end presentation through design using themes.
Unfortunately, it’s technically possible to add code for functionality into a theme and design into a plugin. This is not the intended use, as it can cause complications due to badly organized code. Everything in WordPress loads in a specific order, so when you add something in the wrong place it may cause errors.
Simply put, plugins and themes create modularity for functionality and design respectively. This makes for powerful, flexible solutions and updates in the future. When modifying a WordPress site’s design, build a theme. If you are extending its technical capabilities, create a plugin instead. However, don’t be afraid to build both in the same project!
4. Content Should Never Be Hard Coded
Hard coding is the practice of writing temporary or optional content values directly into your code. For example, if your site’s name is “Joe’s Tasty Toast”, you might write it between the H1 tags in the WordPress theme template. However, this is incredibly poor practice!
Because WordPress is a Content Management System (CMS), that content should never be included as code in a template. Instead, it should be incorporated into the WordPress administrative environment using theme options. Users should be able to dynamically modify values (such as copyright texts, logos, and taglines) without needing to update any theme code.
There is a small learning curve to creating theme options if you’ve never worked with them. However, between pre-built Theme Features and the Customize API, you can incorporate almost any dynamic content you want.
5. Forms Should Behave As Expected
It’s typical to use placeholder content while developing a site to demonstrate styles for the final version. For example, you may have thrown together a few input boxes to style a fake subscription box. However, once the design is ready, it’s easy to forget that these are just placeholders!
If you launch a website with nonfunctional forms, your client may lose customers to broken subscriptions and contact pages. To avoid this kind of catastrophe, be sure to test every interactive form element before launching. Each one should submit, handle, or send provided content as expected.
For more robust testing, you could also run your forms through a dedicated tool to see how they handle unexpected or spam content.
6. The Site’s Design Should Test Well Across Different Devices
There are a seemingly infinite number of devices available for browsing the web. Whether that’s a smartphone, tablet, notebook, or desktop computer, you can’t predict the environment people will use to access the site you’re designing.
Designing for one static display size means only a handful of these devices will experience your site the way it was intended. Instead, it should perform well on any device. Responsive design is a technique for building fluid sites, adapting to any size necessary – even sizes you can’t predict.
To get started, you can use a tool such as BrowserStack to check that the site behaves well across different platforms, and tweak your code accordingly. Finally, don’t forget to test out the ease of use for navigating through links with ‘fat fingers’ on mobile devices too!
7. Your Site’s Content Should Be Optimized
You’re getting close to the end, and it’s time to clean up the site’s content, including text, videos, and graphics. Your primary concerns should be Search Engine Optimization (SEO) and site speed.
Launching a site with subpar content and slow loading times means you’ll have more work to do in the future. Instead, hand off a well-greased site that’s ready for action with both search engines and users, and take the time to check every page for quality titles, meta descriptions, and page headings. A plugin such as Yoast SEO makes this easy. Next, be sure the images on every page are optimized appropriately without losing important detail.
If it’s been a while, you can brush up on basic SEO techniques by checking industry standard publications before doing your full site audit. That (coupled with Yoast’s comprehensive metrics) will stand you in good stead.
8. Loading Benchmarks Should Be Two Seconds or Less
Loading time is the elapsed time between a website being requested and it being ready for the visitor to actually view in the browser. In short, many visitors don’t have the patience to wait longer than two seconds for a website to load.
If you hand off a slow-loading site, your clients could lose traffic and likely get frustrated when viewing their own site. Additionally, site speed is a ranking factor for Google, so you may even be costing your client some much needed ranking points. To avoid this, be sure their site consistently loads quickly.
To do this, first grab some benchmarks on its current load time using a tool such as GTmetrix, then begin optimizing! There are many techniques you can employ, including browser caching, script concatenation, and enabling compression. Finally, keep retesting the site with the new changes until you’re happy with its speed.
9. WordPress Should Be ‘Hardened’ to Protect Your Site’s Users
Once your site is completely ready to go, it’s time to ‘harden’ it before handing it off to the client. This is a security technique for websites to reduce data leak vulnerabilities or direct attacks. Simply put, it’s an important step to ensure the privacy and safety of your site’s users.
The WordPress core is fairly secure. However, once you add on any plugins or themes, the chance for new vulnerabilities rises due there simply being more moving parts. It’ll take a bit of effort to make sure everything is in good shape, and if you’ve developed a custom theme, there are even more special considerations to take before launch.
Generally speaking, you should follow best security practices such as using a strong password and two-factor authentication. On the other hand, avoid common mistakes such as using third-party themes from unknown sources. To put users at ease and protect their personal data, you’ll also want to consider using HTTPS and SSL – especially if your client has e-commerce aspects to their business.
Redesigning a WordPress website is a challenge, but keeping a quality assurance checklist will help you consistently produce excellent work. By following a set of guidelines throughout the project, you can be sure to ‘wow’ clients with the end result.
In this piece, we’ve offered nine points to check off throughout your next WordPress redesign. We’ve looked at the difference between functionality and design, and offered some tips for keeping custom design elements within child themes. We’ve also discussed where code should be written, and how the WordPress community has already carried out some of the hard work when it comes to utility code. Finally, we’ve looked at how your site displays on various devices, and considered the impact SEO, speed, and security could have if you disregard these elements.
Do you have any tips for redesigning your client’s WordPress websites? Let us know in the comments section below!
Image credit: Aaron Burden.
Start the conversation