Project Details

Goals

BTG Group had 2 websites initially before this re-development. One for common users(btg.com) which was very outdated and simple. Another one(my.btg.com) is specifically for their customers which is protected through Customer Login. The main goal of this website re-vamp is to build a new website by combining those 2 websites. The previous website had only a handful of pages but for this revamp they wanted to have new pages covering all their Products & Solutions. 

Website Features

The website had the following features.

Website Design & Development Process

Designing Process

As the main goal for this website redevelopment is to improve the look and feel of the website, our design team had multiple discussions with the client to understand their design preferences and expectations. As this is a multi-national corporate, we had to involve in the meeting with members from different teams. As the new website is supposed to have 240+ pages, we had to design 40+ unique design templates.

Along with designing these many templates, we also had to group the product pages/solution pages with their respective design template. After collecting the inputs from the client team, we designed these templates one by one and got approval from the client to proceed with the development process. In this process, our designing team had to closely with the development team in understanding how the template system works. Also, the development team’s input for necessary in certain areas to ensure the design is not impacting the website speed.

Theme Selection

As the website has so many features and a custom design for various page templates, we decided to go with Custom development using ACF from scratch. Also with these many features and multiple languages, for achieving good website speed, Custom theme development is the only way forward. 

Development Phase

Before starting the development, we listed all the modules that are to be developed from Scratch and the modules that can be developed using plugins. We used Advanced Custom Fields Pro as the core plugin for this development. 

As mentioned earlier, there were 40+ unique design templates designed, so decided to use ACF’s Flexible Content module to develop the website as sections oriented rather than template oriented. By developing this way, we can reuse any section in any of the pages which gives us many design options. 

Also, we decided to develop sections like Download Resources, Recent Articles, Recent Events, and Recent Press Releases sections as Global Reusable sections for a better way of handling content without content duplication.

Plugin Selection

Translation Plugin Selection

As the website is to be translated into 8 languages with Automatic translation, we had to choose the best translation plugin. After doing initial research, we narrowed it down to TRANSLATEPRESS & WPML as the suitable options for our requirements. We have previous work experience in both TranslatePress and WPML. 

So we were very well aware of what both these plugins can offer. After doing detailed research on various factors, we decided to go with TranslatePress plugin as it provides an easy user interface for managing translations.

User Management Plugin Selection

Another core requirement in this project is integrating the Document Download Management module which in short is allowing the customers to download various documents related to BTG’s solutions/products in various languages. 

All these documents are restricted for their customers. So, we had to choose a plugin for the Login, Register, and Profile options. With our previous experience in various user management plugins like PMPro, UMPro, UsersWP, Users Pro, etc, we decided to go with UsersWP plugin as their plugin is lightweight and does the job.

We used the below plugins for other purposes.

• ACF Pro
• Post SMTP for sending Emails
• Smush for Image Optimization
• Yoast SEO

Pages, News, Press Release, Event Module Development

We started the development process with the development of the pages using the Flexible content module. This made the development process a bit easier as we were able to use the developed section in newly added pages easily. 

Before starting the development, we went through all the 40+ design templates and noted down the sections which are similar and the ones which have the same content across pages. Based on this data, we designed those repetitive sections as global sections for better content management.

As the News, Press Release, Events, and Careers modules had a unique design, we created separate custom post types for News, Press Release, and Event modules and developed everything from scratch without using any plugins. 

Also, the News, Press Releases, and Events modules had “Load More” pagination and not the usual pagination. So, we developed this custom pagination.

Advanced Autocomplete Search 

With these many contents across various modules like Pages, News, Events, Press Releases, and Careers, the client wanted an easier and extended search feature that searches across all these modules. We developed a custom autocomplete advanced search which searches across all these modules and suggests results as soon as the user starts typing.

Offices & Contact List Module

This was another important module that was part of the requirement. As BTG Group is a multinational corporation, they have offices in various countries. So displaying the contact details of all the countries on the same page was not easy and it might not look good. 

So, we decided to develop a separate module for entering Office details based on Countries.

In the front end, we developed a country-based filter option to display Office contact details based on the selected country in the carousel view as a single country/location can have multiple offices too.

Login, Register & Edit Profile Development

As mentioned earlier, this new website is a combination of btg.com and my.btg.com websites. In the latter, there is document download management with Login and Register option. So the requirement was to develop that module with the same look and feel as it was in the previous version. 

This was quite challenging during development as we were using a plugin that comes with its own design and style. We achieved the same design by following the standard procedures to override the plugin’s styles by using CSS, and Template overriding, and by using hooks and actions wherever necessary. 

The client also requested a feature to restrict email addresses and certain domain email addresses to be blocked from registering on the website. For this functionality, the UsersWP plugin already had a premium extension called “Restrict User Signups” to restrict users from registering into the website based on various conditions like usernames, partially matched usernames, domain-based, etc. Using this extension, we blocked the list of domains provided by the client.

Document Download Management

As mentioned earlier, this new website is a combination of btg.com and my.btg.com websites. In the latter, there is document download management which had 1000s of PDFs and other documents grouped under different products and categories. We have to develop the exact same functionality in the new website. 

In the initial stage, we thought of a document management plugin for this functionality. But once we started analyzing more on this requirement, we understood that there won’t be a readymade solution available for such customer needs. 

So we had 2 options. One is to choose a plugin and do customizations on top of it and another option is to develop the entire module from scratch. As this is a core module, considering the scalability and a few other aspects, we decided to develop everything from scratch.

Another main reason for developing this document management system as a module inside this new website was to use the restricted files inside the necessary product/solution pages. So we developed a dynamic module in ACF Flexible content to pull the Files from the document download management which can be accessed only by the logged in users.

Planning took more time for this module as we had to consider so many use cases provided by the client. Also, we had a hard time figuring out a way to set up this module and how to group these documents/files under different categories, sub-categories, etc. 

For example, Each Product will be categorized under either of 3 main categories. And for each product, there will be documents/files further categorized under multiple categories called Safety, Manuals, Drawings, Product Sheets, Software, etc. Additionally, each document/file might be available in multiple languages(24 languages). 

Another major thing to address here was the restriction of file access to non-logged-in users. Only the logged-in users should be able to access and download the files. In WordPress, it’s pretty much easy to restrict access to pages and posts based on the user’s logged-in status. But to restrict access to files was something very different and there was no straightforward way to do this. As the filetypes vary from PDF, DOC, XLSS, and MP4, restrictions based on filetypes also were not possible. Also restricting the access based on file types will also affect the other normal files which are used in the website. So we developed a custom workaround by uploading these files in a separate folder outside of WordPress’s default UPLOADS folder and added restrictions to the entire folder by writing custom code in the HTACCESS file to overcome this. With these many various use cases to address, developing this module was a huge challenge and we had a great learning experience after developing this module.

Development Server

The live website was hosted in Microsoft Azure Server. As this project was supposed to be a website that is a combination of 2 different websites, website migration was a discussion point right from the project discussion. Azure servers are very different from the other hosting services and their documentation is very limited and support is quite expensive. So, we decided it would be better to develop directly in the Azure server(development server) and migrate it to live after completing the development. So, we got the necessary access from the client and created a WordPress instance in a new development server, and started the development.

Switching to the Nginx server

We were developing this website using a WordPress instance that runs using an Apache server. During the development, we got informed that upgrading to PHP 8 is mandatory and we were forced to upgrade the PHP version. In Azure, They don’t have PHP 8 running on an Apache server and they only have PHP 8 with the Nginx server. This was a huge and critical change as the development was done on the Apache server and we knew there would be problems if we move this website to the Nginx server.

As expected, all the custom redirections & file restriction works done on the Apache server via the HTACCESS file were not working in the NGINX server as the NGINX server doesn’t support HTACCESS.

The main difference between Apache and NGINX servers is the way configuration files are set up. NGINX server configuration file is the equivalent of Apache’s HTACCESS file. We can create separate HTACCESS files for each folder in the Apache server to control that specific folder but in the NGINX server, there will be only 1 configuration file for the entire server. So this was a tedious process to work on the server configuration file.

We had to work closely with the Azure technical support team to set up the server configuration file and to configure those File restrictions from the beginning in the NGINX server. As this WordPress instance on PHP 8 with NGINX is recently launched, even the server support team didn’t have proper documentation in place to assist us with these queries. After various attempts, the server support team helped us configure the Server Configuration file and they were not able to assist us in setting up the File restrictions. So, we had to do a lot of analysis and configure those file restrictions in the NGINX server on our own.

Multilingual Translation Process

As mentioned earlier, we decided to go with TranslatePress for the multilingual translation feature. The TranslatePress plugin configuration was straightforward and pretty much simple. On top the Manual translation feature, TranslatePress provides automatic translation using Google Translation API and DeepL translation API. We choose Google Translation API over DeepL API because DeepL supports translation options for only 29 languages whereas Google Translation API supports 135 languages. 

Google Translation API pricing is based on the number of characters translated. Google Translation API provides free translation for the First 500,000 characters* per month. After that, they charge for translations based on the number of characters translated.

As there were 240+ pages on the website, content for all these pages were not readily available when we started the development. So we started the development with the Lorem Ipsum content as per the design. So enabling the automatic translation will waste all the free translation credits on the Lorem Ipsum dummy content which is of no use. So, disabled the automatic translation feature initially and progressed with the development. After completing the development and updating content for most pages, we enabled the automatic translation feature and translated the content across the website in 8 languages.

After doing automatic translations, we had to work on areas where design changes were needed due to content length differences in the other languages.

Redirections

As this newly developed website is a combination of 2 websites(btg.com and my.btg.com). In this, Document download management was previously working in a subdomain of the main website and we have now included this inside the main website as a module. The main thing which we had to address here was the redirection of the URLS from the old domain to the new domain. Because most of the User Manual File’s URLs were coded as a QR code in their machines. So, we had to make sure that the clients using the old QR code are not redirected to a removed URL. For that, we have to set redirections for all the Product URLs which has the Files. But for this, we have to host that subdomain to set up redirections. Just for configuring these redirections, setting up a hosting space is not a cost-effective solution. So, we had to come up with a cost-effective solution. After doing some analysis, we found a URL redirect service provider called SiteDeTour (https://sitedetour.com/) which allows setting up 301 and 302 redirects for the domain without setting up a hosting space. We proposed this to the client and got confirmation from the client for the same and completed the setup and configured the necessary redirects for the URLs.

Website Migration Process

As mentioned earlier, the website was hosted in Azure Portal. Also the development of newly developed website is directly developed in the Azure portal by creating a new server to make the migration process bit easier. As the website had multiple features, modules, and 240+ pages with multiple languages, testing everything on a single instance is not possible and it’s very time-consuming. So we planned to provide regular progress updates based on module completion and also planned weekly updates as well. So that client can test the progress and give feedback. 

After completing the entire development, content updates, and translations, we gave a complete demo to the client team for testing. The client team shared the website with their internal team to do final testing before launch. 

To provide a complete overview of the backend(ACF Flexible content-based) and translation management, we arranged for a meeting with the client team and gave a complete walkthrough. We also recorded the call to use this as a reference point and can be shared across the team.

As expected client found it very easy to manage. Once the content is updated, the client gave us the approval to migrate the website to live.

After launching the website, we followed our post-launch checklist and ensured everything is working properly.

A few of the items in our post-launch checklist are mentioned below

Result