WordPress is an open source content management system (CMS), based on the PHP programming language and the MySQL database management system. It’s known for being user-friendly, allowing amateur developers to build and manage blogs and websites. Basic WordPress development requires little to no coding knowledge. It’s an extremely popular platform among professionals and DIY developers.
To give you some insight into how widespread the popularity of WordPress has become: WordPress is used to power around 14% of the top 100 websites in the world. More than 409 million people view more than 20 billion WordPress pages each month, and approximately 17 new WordPress site posts are published every second!
While some business owners do take the DIY approach to creating their WordPress website, many others turn to a professional team for the development work. This initially costs more, but in the long run it can save a lot of time and effort, and will also mean the final website functionality is much smoother. So, what goes into the development cycle of creating a new WordPress website?
A WordPress development project can typically be broken up into seven phases:
- Project initiation
- Design
- Data migration
- Development
- Quality assurance and user acceptance testing
- Site launch
- Support
Let’s examine each of the development phases in more detail.
1. Project Initiation
Once the client and the agency have agreed upon and sign a contract, the project can begin. Normally, representatives from the agency will meet with the client multiple times in order to get a detailed understanding of what the client wants to achieve with their WordPress site. This includes:
- General project goals
- Design requirements
- Website data details
Once this has been established, a project plan can be put in place This project plan will specify the client’s design and development requirements.
For those looking to do their own project management, there are some useful WordPress project management plugins available too. Here are some examples:
WP Project Manager:
The free WP Project Manager plugin can be used to manage projects within your WordPress system. The plugin allows you to keep your PM functions in-house, instead of having to log into an external site whenever you want to check on your project status.
CQPIM WordPress Project Management:
This is a premium full-feature project management plugin, available on CodeCanyon. The tool is designed for everyone from small freelancers to major agencies, helping them to organise their tasks without having to navigate away from WordPress.
Project Manager by UpStream:
Another free PM plugin, Project Manager by UpStream makes it easy to manage any type of project from within the WordPress website.
Smarty Pants Client Project & Document Manager:
Smarty Pants is a robust plugin with administrator features and client features.
Kanban Boards for WordPress:
This agile project management plugin offers multi-site support, and “edit-in-place” functionality.
Project Panorama:
This is a WordPress project management and communication tool designed to keep everyone involved in the project in the loop. Most notably, the Project Panorama plugin has a visualisation feature. The overall look, complete with beautiful and simple progress charts, makes tasks and milestones easy to track.
2. Design
The visual look and layout of the site is naturally a very important component in the site’s success. The design team works to bring the client’s vision to life.
The visual design requirements will have been established during the project initiation phase. Usually, the designers will create mock-ups to show to the client. These will be reviewed and revised as needed, before being finalised and signed off.
A good design team will bring a combination of technical know-how and creative flair to the table. They will make use of the latest web design elements, and will also make sure that the website is responsive (mobile-friendly).
Here are a few key elements that make up a beautiful, functional WordPress website that will appeal to site visitors and take them through a smooth user experience:
Layout:
When it comes to site layout, less is more. Avoid clutter and keep your layout clean and simple. This will allow your visitors to focus on the content, without unnecessary distractions.
Advertisements, pop-ups, animations and excessive buttons are all examples of clutter. Don’t bombard your visitors with unnecessary sights and sounds. Make sure any ads on your site are placed in a way that they don’t detract from the content, and only make use of ads if they are generating significant traffic to your site.
Images:
The right images can really enhance the appearance of a website. It pays to invest in good quality images, taken by professional photographers.
Free image resources:
- Flickr Creative Commons
- Unsplash
- stock.xchng
- Wikimedia Commons
Paid image resources:
- Istockphoto
- Shutterstock
- Getty Images
Logo:
A logo is a vital representation of your brand or business. It should be instantly recognisable to site visitors. Often the designers on an agency’s team will have some logo experience, but you may prefer to hire a graphic designer specialising in the creation of logos.
If you don’t want (or can’t afford) a visual logo at the moment, you can use a good font like Helvetica to create a type logo instead.
Font:
A good font choice will ensure that website copy is legible, and make the site overall appear more professional.
There are only a few core fonts that can be viewed universally on the web. Helvetica, Arial and Georgia are all known as legible, aesthetically pleasing fonts; they are timeless choices.
Online font sources:
- Myfonts.com
- Exljbris Font Foundry
- WP Google Fonts plugin
- Typekit Fonts for WordPress plugin
- Fontmeister plugin
Colours:
When it comes to a colour scheme, simpler is better. Try using two neutral shades (like black and white or grey and white), with a brighter highlight colour to complement them
Online colour scheme sources:
- Colour Lovers
- Coolors
- Adobe Color
- Color Hunt
- Material Palette
- Material UI Colors
3. Data Migration
In some cases, a client may be migrating from another content management system, or looking for a new WordPress install. In this case, data migration will be a part of the development cycle.
The data migration process typically starts with the client providing the development team with access to their database files. The team then pulls together a data mapping document and writes a data migration script, and then begins the import process. After completing the initial import, the team will perform a quality assurance review against the data mapping document to ensure that everything has been done correctly.
If you are doing your own data migration, here are some tips to make sure it goes smoothly:
- Always test your backup file before starting the migration. Make sure the backup is not corrupted.
- Keep the original WordPress site live, just in case you encounter any issues. Migrate to the new server by changing the host file on your computer to the new server IP address. If you come across any problems, you can use the original site to prepare a new backup.
- Only update the Domain Name System (DNS) when the migration has been completed. This will help to minimise downtime.
- Once the migration is complete, you can run any additional checks to ensure everything is working properly. Then you can update the Domain Name System.
There are a number of WordPress migration plugins available too, including:
- Duplicator
- VaultPress
- WP Migrate DB
- UpdraftPlus Migrator Extension
- All-in-One WP Migration
4. Development
Once the final designs are approved, the active development phase will begin. The developers will build the site functionality and custom features based on the client’s requirements.
Theme / Design
The developers and designers work together to create the new site based on the design signed off by the client. Dependent on budget, either an entirely bespoke theme can be built, or an existing theme from the WordPress marketplace can be edited and configured to fit the project.
A custom-built unique theme is always recommended in order to effectively market your brand and products / services, while if an existing WordPress theme is used you run the risk of your site looking very similar to thousands of others.
Functionality
Implementing custom functionality is made easier through plugins, but installing too many plugins can negatively affect the performance of your website.
Each plugin has to effectively fetch its relevant data from the site database, and when you have a large number of them trying to perform its own task at the same time – it can cause some conflict and slow everything down. Some plugins can also cause security risks, and paid plugins are generally more secure than the free variants.
For this reason all custom functionality is reviewed, and recommendations are made as whether to create a plugin from scratch, or download / purchase from the WordPress Plugin marketplace.
5. Quality Assurance (QA) and User Acceptance Testing (UAT)
Once all the development tasks have been completed, it’s time for the QA and testing phase to begin. This is to ensure that all functionality is in place before going ahead with the site launch.
The development team performs cross-browser and device testing to ensure responsiveness and accessibility is in place. We run your new custom theme through our WDS theme check plugin. Our development team also runs a query monitor and report to ensure that the site is performant prior to launch.
There are a few phases of quality assurance and testing.
Functional Testing:
This is the first and most important step in the WordPress quality assurance process. This process confirms that all functional requirements are satisfied. Functional testing includes:
- Build verification testing (also called “smoke testing”): Preliminary testing to reveal simple failures.
- Unit testing: A process where all units (the smallest testable parts) are reviewed.
- Integration testing: Individual units are combined (integrated) and tested as a group.
- Sanity testing: Checks to evaluate whether a claim or the result of a calculation is true.
- Regression testing: Confirms that a recent programme or code change has not negatively affected existing site features.
- Usability testing: Determines whether the site works properly for end users.
- System testing: The complete integrated software is tested, to evaluate the system’s compliance with the requirements.
- User acceptance testing (beta testing or end user testing): Users test the site to make sure it works in a real-world situation.
During functional testing, the developers must verify the main functions of the site, the links and forms, and any animations that appear on the site, as well as how it handles errors and how data is stored in the database.
Usability Testing:
This phase focuses on the user experience. The site must be user-friendly and make a good impression.
Testers must consider the following:
- Design consistency
- The logo is displaying correctly
- Images are displaying correctly
- All buttons and links are clickable
- Buttons are displaying correctly (same size, colour etc)
- Video files are working correctly
- Text is displaying correctly and the font design is consistent
Compatibility Testing:
This phase analyses how well and efficiently the website can perform when it runs on different operating systems. Some operating systems are more likely to have issues (bugs) than others.
The compatibility testing phase includes the following checks:
- Layout and alignments are consistent across screens of different sizes
- Font size is valid across multiple devices
- Scroll bar is working correctly across different screens and devices
Performance Testing:
This is a non-functional testing phase that is primarily about the client’s expectations. A successful site should have good speed, responsiveness and stability. QA during this phase should include the following tests:
- Load testing: Tests how the website performs under an increased load.
- Stress testing: Checks the performance of the site with a load beyond its capacity to handle.
- Spike testing: Checks how the website copes with a sudden increase and decrease of the load.
- Scalability testing: Tests the site’s ability to maintain constant user response times.
- Volume testing: Tests the site’s performance with a certain amount of data.
Security Testing:
This phase is used to confirm that the site will protect any confidential data, and will not be vulnerable to hacks and security breaches. Naturally, this is a critical part of the testing process. Any potential threats to the system must be analysed and addressed.
During security testing, developers doing QA must verify the following:
- SSL has been implemented correctly.
- Two-step verification has been implemented.
- reCAPTCHA has been implemented.
- Users are required to have unique usernames.
- The system requires users to enter a “strong” password.
- Users are restricted if they attempt to login with an invalid username, e-mail or password.
- The “Reset password” and “Remember my password” functionalities are correctly implemented.
- Any sensitive, confidential information is stored in the browser cache.
- All WordPress plugins and themes are up to date.
- Database and backup are correctly configured.
- Sessions on the website automatically expire after a specified time.
6. Site Launch
Each new website will have its own unique launch plan. Typically, the launch process includes the following steps:
- The lead developer steps up staging and production environments on the client’s host.
- The developers will request a content freeze in order to start the final data migration.
- Once the data migration and quality assurance tests have all been completed, the new site will go live.
7. Support
A good agency will also provide clients with a support phase for a specified period of time after launch. During this time, the client can bring any bugs or issues to the agency’s attention, and the developers can address them, making sure that the client is 100% happy with the way their site is working. Some clients will also opt for extended support and maintenance plans.
A WordPress website is an affordable, flexible and long-lasting way to establish an online presence for your business or brand. Speak to the Lilo team about starting your new WordPress project, and we’ll be happy to discuss your requirements.