WP-CLI – Manage WordPress Websites Better and Faster

WP-CLI – Manage WordPress Websites Better and Faster

WP-CLI allows you to manage websites using simple commands without needing to navigate trough many pages in WordPress admininstration. Whether you are a developer or administrator, WP-CLI can save you a lot of time and even get inaccessible website back to life.

What Is WP-CLI?

WP-CLI is command line interface for WordPress. That means that it defines commands, that you can execute on your server, that you can use to performs common actions. Tasks like managing posts, users, plugins, themes and website options can be achieved in the command line. We will have a look at some practical use cases in this article.

How Can You Use WP-CLI?

WP-CLI is not included in WordPress installation by default. Luckily a lot of WordPress hosting providers have already adopted this tool and made it accessible to its users. You can find out if this feature is included in details of your hosting plan or you can contact your hosting provider. WP-CLI is also included in Trellis that we use to manage servers for our clients at Zeni.

If you find out that you do not have access to WP-CLI on your server,  assuming you have SSH access to your server or you want play with WP-CLI locally on you computer, you can get it working using just few commands. On the OS X and Linux this can get you to fully working WP-CLI in no time:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

If you use Windows, or you are interested in different installing methods you can have a look at WordPress Documentation.

Speed up Time Consuming Tasks With WP-CLI

There are many administrative tasks in WordPress, that require you to perform multiple repetitive actions to get you to your goal. That might include a lot of page loads and clicks and take you couple of minutes in some case maybe hours. Thanks to WP-CLI, you can perform these tasks lot of easier. Especially bulk actions like for example managing multiple plugins or media can be speed up with WP-CLI.

Install Multiple Plugins at Once

Are you just starting with the fresh site and you want to install multiple plugins that you regularly use or you just received request to install few new plugins? Using WP-CLI this will only take you to write single command. Following command installs 2 plugins and activates them thanks to activate flag:

wp plugin install bbpress classic-editor --activate

This command also allows for passing zip archives with the plugins, for example here below. Local paths are supported too:

wp plugin install https://example.com/plugin.zip

Using wp plugin command can achieve much more, for example updating all the plugins on your website. I highly recommend to have a detailed look at the documentation of wp plugin command.

Bulk Import Media

You can easily import multiple media using simple command. Here we are going to import all JPG filesin the user pictures folder. This will copy the files from the original folder and automatically register them as attachments:

wp media import ~/Pictures/**\/*.jpg

 If you are interested in more media oriented commands you can have a look to command wp media.

Managing Users

wp user  command helps with all of tasks related to managing users. Here is an example for creating user daniel with mail address [email protected] and role administrator. I have used this exact command countless times when there was new project that i have worked on:

wp user create daniel [email protected] --role=administrator

Managing user passwords, roles, capabilities and more is very convenient thanks to WP-CLI. If you are interested in user management, here you can find more about command wp user.

WP-CLI and Dealing With Technical Issues

WP-CLI is great servant when you are trying to deal with technical issues as we are going to see in next few lines. 

Debugging Theme and Plugin Issues

Imagine you have just activated faulty plugin, which causes WordPress administration to be inaccessible. WP-CLI can rescue you in this situation using single command:

wp plugin deactivate faulty-plugin

Similarly you can activate different theme using WP-CLI if you believe that current theme is causing trouble. Following example activates chosen theme:

wp theme activate different-theme

Manipulating Options

Do you need to change values of some options? This can be useful when you want to debug an issue or when changing some options is not directly possible in the administration. In this example we are going to change current admin email:

wp option update admin_email [email protected]

You can find more about managing options in the documentation of wp option command.

Managing Database

WP-CLI is also great for managing database. You can easily create backup of current database and save it to current user directory using following command:

wp db export ~/backup.sql

This is extremely useful when you want to create export of the database for use on staging or local development environment or to create a backup before performing some risky action like updating database structure because of some plugin. If anything goes wrong, we can easilygo back using this command:

wp db import ~/backup.sql

If you are planning to experiment we highly recommend to not to do it on your customer facing production environment. That is what staging server can be used for. You can learn what staging environment is in our article Seven reasons to use staging environment for your project on WordPress. If you are interested in creating staging environment, you can learn about this in our article  How to create staging environment?

Another useful feature is ability to quickly enter yourdatabase command line interface to execute SQL using following command:

wp db cli

Replace All the Occurrences of Some Value

Imagine site moved to different URL, or you want to use your production database on the staging server. After you import database to new server you are quickly going to find out that some of the links are not working and that media files are not visible. That is because unfortunately WordPress uses absolute URLs in many cases. To fix this issue WP-CLI have very useful command known as wp search-replace. With this command you can replace all the old URLs with new ones very simple:

wp search-replace https://old-website.old https://new-website.new --dry-run

The dry-run flag on the end is very useful here because it runs the entire search/replace operation with showing the report, but no changes are saved into the database. It is definitely a good idea to run this command in dry run mode first and after reviewing the report running it without dry run mode.

Generate Dummy Content With WP-CLI

This one is very useful for developers, who need some mocked content on the site for development purposes. For example, you can generate tens of posts, users, terms and comments using just few commands. Here are few examples:

wp user generate --role=subscriber --count=50
wp post generate --count=200 --post_type=post
wp post generate --count=20 --post_type=page
wp term generate category --count=10
wp comment generate --count=10 --post_id=123

This will give you a site with 50 new users, 200 posts, 20 pages, 10 categories and our selected post already have 10 comments on it. This simulates active site, that have been around for some time and we did not need to do anything manually. We can start working on developing WordPress theme or plugin more easily.

There Is a Lot More to Achieve

We have introduced many use cases of the WP-CLI in this article, but that is far from all that is possible using this tool. To became familiar with all the possibilities, there is no better source than WordPress documentation. I hope that WP-CLI will help you to become better developer or administrator.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Improve WordPress Theme and Plugin Development Using Design Patterns

Improve WordPress Theme and Plugin Development Using Design Patterns

Do you want to create cleaner, more maintainable code, that is lot easier to change and build on in the WordPress environment? Giving some attention to concept of design patterns could make a massive difference here. If usage of design patterns is executed correctly during the development it can save you some time too.

What Are Design Patterns?

Design patterns help us to build our software (obviously including WordPress plugins and themes) on the knowledge of others before us. We don’t have to reinvent the wheel for solving some common problems that happened to many developers before us and we can focus on the specifics of our problem domain and customer requirements. 

Design pattern is repeatable solution to commonly reoccurring problem in the software design. It cannot be used directly, but it provides us with template for solving the problem that can be reused in many similar situations.

Studying design patterns and applying them when creating new code can drastically improve the structure and overall functionality and scalability

After studying them you can also try to refactor your older code using design patterns and you will see how much more managable code could be.

Demystifying the Design Patterns Using Hooks

Let’s start with something similar for most of the WordPress developers and that is the hooks, most specifically the actions and filters that are used in the WordPress a lot. 

This is specific implementation of something called publisher-subscriber(pub-sub) pattern. In this pattern we define publishers, subscribers and message broker:

The publishers publishes some specific event, in our case by executing do_action or apply_filters.

Subscribers can subscibe to specific events by calling add_action or add_filter and execute an action when the event they are subscribed occurs.

Message broker, in our case WordPress core make sure that all of the subscribers  are notified about the publishers events they are subscribed to.

Benefits of Publisher-Subscriber (pub-sub) Pattern

This gives us a lot of benefits. Publisher does not need to know anything about its subscriber and also subscribers does not need to know anything about publisher, as long as they can react to occurring event. Even if we deactivate the plugin that creates events or consumes the events, this will cause no errors

I think that it is very useful not just consume hooks from WordPress core or plugins but also create hooks in our code and build our code around them. You are not just going to make other developers life easier if they decide to build on your plugin or theme functionality but trust me your life will also be much easier when implementing new functionality to your plugin or theme.

There are many other smart design patterns that can be used in WordPress. They mostly require a bit more work to be applied then the hooks, but they can make a huge difference in design of your plugin or theme. Great example of the design pattern that can be used in the context of WordPress is singleton pattern.

Singleton Pattern

This pattern requires knowledge of object-oriented programing. If you are not familiar with that, please study that first, and then you could come back.

Singleton pattern restricts initiation of certain class, so only one instance of the class can be created. This can be achieved by creating the private constructor, static property to store the instance and static function getInstance().This functions responsibility is to instantiate the object if it is not already instantiated and stored in the variable $instance. You can see the example down bellow

class SingletonClass
{
    private static $instance = null;

    private function __construct() {}

    public static function getInstance()
    {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }
}

Every time some code tries to create new instance of this class, error is triggered, because the constructor is private (this better be documented to avoid confusion), so the only way to get the instance is trough our getInstance() function

Example usage for this would be to create a base class that responsibility is to instantiate all of our plugin functionality. We can bound for example configuration data to this instance, so this is accessible from anywhere in the plugin and it does not need to be fetched from database or config file multiple times, only on the single instantiation of this class.

Don’t Overuse Singleton Pattern

I think this pattern is a good example also because it can be very seductive to overuse it, as it is easy to see benefits of using it in many situations. I am not saying it should not be used but you have to consider drawbacks of the pattern too before using it. 

Main drawback of this pattern, in my opinion, is that every time we use this pattern we bound our functionality to direct knowledge about the singleton class. This is creating coupling of code and could cause that if we decide to change something in the singleton, we have to make many changes trough the project. 

So always think with caution before using this pattern or any other pattern, but if you are going to do a good job, this is going to be very rewarding to you.

More Patterns

We have described two design patterns in this article. These patterns can be used in many situations during the WordPress development and could improve your code and thinking. 

But this is just a very small showcase of what could be done thanks to the concept of design patterns. There is a lot more design patterns out there that could be applied during the development. Studying them and applying them could make a huge difference during the development and could have very positive impact on what you are developing. 

I encourage you to give this a try either using well-known and high-quality literature such as Design Patterns: Elements of Reusable Object-Oriented Softwareor Head First Design Patterns or on the websites such as refactoring.guru, where a lot of patterns are well described including examples in PHP.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Image Optimization And Compression In WordPress

Image Optimization And Compression In WordPress

Image optimization and compression is very important. It reduces the time it takes to load your website, which can help you increase its traffic. Like that, your website can become more successful.

Image Size

Always use images at the size you actually display them. It is unnecessary to load an image with a resolution of 1024×1024 px if you display it on your website in a size of 16×16 px. 

Don’t overdo it with lots of pictures. The more images, the more data is loading and the slower the page is loading. Decide whether the image has any added value for your page, such as when writing articles.

In WordPress, each image is reduced to 4 different sizes when uploaded and it is then possible to load the version that suits a page best. For example, a size of a thumbnail in a blog is different from a size of a full image in a blog.

  • Thumbnail – 150 x 150 px
  • Medium size – maximum of 300 x 300 px
  • Big size – maximum of 1024 x 1024 px
  • Full size – the original size of an uploaded image

For additional website optimization, you can also add custom image sizes to WordPress.

Image Format

Bitmap Images

  • Suitable for very detailed images such as photographs.
  • Bitmap images contain a map of individual pixels.
A bitmap image
A bitmap image
  • JPEG format supports a large number of colours, making images look more vivid. JPG is best suited for displaying photographs.
  • PNG supports fewer colours than JPEG, but unlike JPEG, it supports transparency and also handles text and illustrations better.

In this meme, you can see the difference between JPEG and PNG in displaying illustrations and texts:

The difference between JPEG and PNG
The difference between JPEG and PNG
  • WebP format can be used as a modern replacement for JPG and PNG formats. Files in this format are much smaller than competing formats, while preserving the same quality.
  • An interesting fact is that this format was developed by Google.
  • WebP is not yet natively supported for WordPress, but there are plugins that can fix this. We use the WordPress plugin WebP Converter for Media.

Vector Graphics

  • It can save a huge amount of data, it contains instructions in text form to create an image and not a pixel map, as in bitmap graphics. Therefore, a larger file is not required to display a larger image.
  • If applicable, it is good to prefer it to bitmap (pixel).
  • Most often used for logos and icons.
  • The file size increases with the amount of details in the image.

A suitable format for vector graphics on a website is SVG.

SVG images cannot be uploaded to media libraries in WordPress. We can display these images using code in a plugin or in a template when creating the HTML structure, either by additional loading or embedding in the HTML structure.

In WordPress, the possibility of using it directly in HTML is also useful in Gutenberg or the Classic editor. We can insert SVG images in the editor as own HTML

The advantage of SVG images is also the possibility of modifying their displaying using CSS styling, as they are a common part of HTML.

Scalability
Scalability

Image Compression

Image formats usually support multiple levels of compression. Thus, it is possible to save more data with stronger compression, but also worse quality.

Compression should be applied to every image uploaded to your website. More compressed images are smaller and will load faster. However, you must not forget that with compression, images lose quality, so it is necessary to choose a compression that will sufficiently preserve their details.

An overly compressed image
An overly compressed image

Here, you can see the very convenient WebP format, which provides the best file size to file quality ratio, compared with the JPEG format.

The difference between WebP and JPEG
The difference between WebP and JPEG

WordPress Plugins For Image Compression

A good WordPress plugin can help you with image compression. There are various plugins to choose from, but we will mention only few here.

  • EWWW Image Optimizer – this WordPress plugin is free and automatically compresses images when you upload them,
  • Smush – in addition to image compression, it offers other useful optimization techniques,
  • WebP Converter for Media – replaces JPG and PNG files with the WebP format, so you can save more than half the load without losing any quality. After installing the plugin, the images will be automatically converted to the new format.

Image optimization and compression is just one of many aspects that can help you speed up your website and increase its traffic. To learn more, read 6 Ways to Improve the Speed and Performance of Your WordPress Website or Speed Up WordPress Websites by Optimizing JavaScript and CSS.

If you are interested in more information or you need an advice or help concerning your website speed, contact us and we will be happy to help.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Speed Up WordPress Websites by Optimizing JavaScript and CSS

Speed Up WordPress Websites by Optimizing JavaScript and CSS

JavaScript and CSS slow down the page loading because they have to be loaded and executed. Additionally, a lot of JavaScript can have a very negative impact on the performance and responsiveness of the website. Learn how we optimize CSS and JavaScript in WordPress to help speed up your websites. 

Load Less JavaScript and CSS

Consider your choice of plugins and themes

Some plugins and themes in WordPress use a lot of JavaScript and load lots of CSS, so you should reconsider using them and try to find alternatives. Many of them load Javascript and CSS even on pages that are not affected by the plugin/theme at all, and thus increase the loading time even where it is not necessary.

Think About the Necessary Functionality

When working with WordPress, we always make sure to load only what is needed (CSS styles, JavaScript) to prepare the page for faster loading. For example, we remove unnecessary CSS and JS files.

Use CSS Instead of JS for Interactive Features

If you’re programming content for WordPress, it’s a good idea to think about whether JavaScript is really necessary for everything you’re using JavaScript for. A lot of functionality that used to require JavaScript can now be achieved with modern CSS with much less impact on performance. We took advantage of this for example when creating a page for i4comfort or when creating a Custom Menu For Engeto Without The Use Of JavaScript. The website contains a lot of visual effects, which we included so that they don’t slow down the page. You can read more in the article Creating a Website for i4comfort

Code Handling JS and CSS

Always think about where your CSS and JavaScript is needed. It’s a good idea to divide large CSS files into several smaller ones and load them as needed. We can do the same with JavaScript code.

We mostly use Sage to create themes, which makes such management easier and takes into consideration its importance. 

Read more about Why You Want a website created on Sage?

Optimize CSS and JavaScript With Minification

Minification removes everything that is not necessary from the files (linebreaks, spaces, shortens variable names, etc…). Text files with CSS and JS are modified to take up less space and load faster.

Difference between original and minified code
Difference between original and minified code

There are many good WordPress plugins and themes that minify the code. In our plugins and themes, we minify the code while keeping the original files, which are easier to modify

How To Do It?

Your JavaScript and CSS can be minified using online tools such as Closure Compiler or Minify Code. JavaScript and CSS that you create for your plugins or insert in customizer can also be minified in this way.

A better alternative for this is to configure the build of your plugin/theme.  It is possible to use and set up Webpack or tools like node-minify. This allows you to automatically minify your files, but it requires quite a lot of time and energy, especially if you choose Webpack. That’s why it’s better to go for a pre-made solution for your plugin or theme in the form of a starter project, such as Roots Sage for a theme. However, for large projects that you are already working on and it is not easy to migrate them, you need to get help from the tools mentioned above.

How to Use Minification Without Developer Experience?

To optimize all the CSS and JS files that your site uses, you can use the Fast Velocity Minify plugin. This plugin generates minified CSS and JS files on the first uncached loading of the page which are then loaded in place of the original files on upcoming requests. You can significantly speed up CSS and JavaScript loading this way for plugins and themes that don’t use minified JavaScript and CSS.

Less is More

To speed up your website and thus increase your traffic, remember that less is really more in this case. If your site is overloaded with a lot of unnecessary functionality, it’s clear that this will have an impact on performance. 

There are many ways to speed up your website and increase traffic. You can divide longer pages into smaller ones, reduce the amount of unnecessary images, or aim for simpler code. We’ve also written about this in a more detailed article, 6 Ways to Improve the Speed and Performance of Your WordPress Website.

If you have any questions or need help with speeding up or optimizing your site, we’re here for you, don’t hesitate to get in touch

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

6 Ways to Improve the Speed and Performance of Your WordPress Website

6 Ways to Improve the Speed and Performance of Your WordPress Website

Everything is speeding up. Many people want to have the most important information as quickly as possible and to get it without unnecessary waiting. Speed is especially expected these days when browsing websites. Poor performance and slow loading times lead to an increase in the bounce rate. In today’s article, you can learn how to help speed up your website in WordPress. 

Why Is Website Performance Important?

Google recommends 5 seconds or less as the most optimal loading speed for 3G connections. If your loading time goes from 1 second to 3, the likelihood of bounce rate increases by 32 %. If your site takes 1 second to load, it increases by up to 123 %! According to a Google analysis (2018), mobile sites take up to 15 seconds to load on average! Website speedaffects nearly 70 % of consumers. The probability of making a purchase increases with website performance. If your website is slow, you’re losing customers and lowering your conversion rate. Your website speed is also a very significant SEO factor. That’s why we always try to keep an eye on the speed and performance when creating a website in WordPress, and we do everything we can to optimize it properly without using too many plugins.You can get an objective overviewof your website speed using various tools. We recommend Google PageSpeed Insights, but there are many others such as GTmetrix or WebPageTest. Let’s take a look at some of the ways in which we improve website performance and optimize it.

1. Less Ads

A large number of ads can be detrimental to your website, as ads load JavaScript, CSS and media, which can greatly slow down the page and also degrade the user experience. 

2.  Divide Long Pages

Long pages slow down the loading of the site.

  • If one of your web pages has too much content, it might be better to divide it into several pages.
  • Also keep length in mind when writing articles for your blog. Sometimes it’s better to split an article into multiple articles, which will also help speed up your site.

3. Latest Versions of WordPress, Plugins and PHP

WordPress plugin developers are constantly working on improvements, so it’s a beneficial to update them regularly. The PHP version also has a big impact on the performance of a WordPress website. Cloudways published the results of their benchmarking test, which measured site performance improvement from PHP version 5.6 to 8.0. The graph below shows that performance is continuously improving. Compared to the current PHP 8.0 with the fastest load time of 164 ms, PHP 5.6 came out almost 3 times slower.

Zeni team - average response time
Zeni team – average response time

4. Caching

Preload and prepares page content to minimize calculating and loading from the database when accessing the page. The user receives a preloaded version when the page is loaded, which can increase the loading time of the site by up to several times. In order to be able to resolve data requests faster in the future, caching stores this data. A Caching plugin should definitely be partof every production site because it will give you a huge increase of site performance. For our WordPress clients, we set up Redis Cache, which enables caching using an in-memory database.

5. CDN (Content Delivery Network)

  • This is a specific group of servers that are geographically closer to your visitors, thus reducing the response time when the page loads. 
  • Once the CDN is set up, your content (images, videos…) is cached on proxy servers and loaded from a server closer to your visitor’s location, which reduces response time and increases the speed of loading.
  • For our clients, we use the Cloudfare CDN service, which we set up for them and which is standard for all the sites we manage.

6. Quality Hosting

If you think that you have tried everything to speed up your website, but you are still not getting the expected results, you should consider a new hosting provider. At Zeni, we can offer you hosting that will make your website faster. We can also help with speeding up your site and increasing your traffic. Get in touch and we’ll be happy to help

SOURCES

  1. Page Speed Report
  2. New Industry Benchmarsk
  3. Mobile site speed statistics
  4. Performance Benchmarks for WordPress

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Creating a Website for i4comfort

Creating a Website for i4comfort

The i4comfort application by A-technology brings complex yet simple solutions for a remote control of technology in your house. The idea of reducing heating costs, and thus also reducingthe CO2 footprint thanks to an intelligent technology control, attracted us and we were pleased to be involved in creating of a website for this application.

Why And How It Was Created

We created the website for i4comfort in CMS WordPress of an already existing client, for whom we launched a completely new production website this year. The company A-TECHNOLOGY s.r.o. has its presentation website a-technology.cz, so it was not only important to design the i4comfort website in a similar way as the parent one, but also to create a new identity for the new website at the same time.

A Comparison Between the Old And the New Website

The old i4comfort website had several drawbacks:

  • It did not meet the security criteria.
  • There was no development environment in the form of staging.
  • Its logo and appearance were outdated.
  • It was not responsive.
Old website

The new website:

  • It is fully responsive.
  • In multiple places, it has a CTA button calling for action, making it more likely to gain a customer.
  • We created a new logo and a new website design.
Home page of i4comfort

The Website Graphics

  • The website graphics correspond to the graphics of the mentioned parent website.
  • However, the new website has a unique and memorable design.
  • Its unique website identity makes it clear that it is a separate website.
  • At the same time, it feels familiar to customers of a-technology.
  • Information is not only communicated through text, but is also displayed graphically in many places, making it more memorable and clear.

Technical Functions

A Modern Experience

The website contains many visual effects which do not slow it down thanks to their careful integration. The website is also responsive on any device.

  • Many animations and interactive parts use only styling options (css).
  • There is no need to load JavaScript because of some clickable interactive sections where it is used very often on other websites.
  • Thus, the website is much faster, and yet provides the same quality experience, such as here:
Visual effects of website

The Website Responds to the User

The symbols of each technology change according to what the user is currently reading. The CTA button, icons, or navigation elements (top menu, dots on the right) also change according to the positions on the website. You can see everything on website „Jak funguje i4comfort“.

The Website Responds to the User

On page ,,Možnosti využití”, the images change interactively according to what the user reads. Thus, the reader can easily imagine what exactly they read about and also remember it better. This creates a unique, fast and interactive experience that will attract users.

Benefits of the New Website

Theme Built on Sage

Easy Configurability

  • The theme programmed by us for WordPress allows easy configurability.
  • The behaviour and style of the page header are separately configurable.
  • All content is easily editable without the need of developer’s intervention.

Mobile/Desktop Usability

The desktop environment is far from being just an enlarged mobile environment.  A good experience for every user is important to us.

  • All of the desktop space is used. Thus, as much information as possible is displayed on the screen and the website does not seem empty even on larger screens.
  • The mobile environment is adjusted for being used with a finger and also on smaller screens.
  • On a mobile, everything is easily clickable, simply and quickly accessible.
  • Many sections look significantly different on a mobile and a desktop.
  • For a better experience, many parts were simplified for a mobile. Some visual aspects used for a desktop were removed, because they had no added value for the mobile user.
Website is responsible

For i4comfort, we have created a new fast and clear website with a plenty of improvements. If you need help with creating of your website and want to provide your customers with a quality experience, do not hesitate to contact us, we will be happy to help you.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR

Website speed and reliability for A-technology

Website speed and reliability for A-technology

One of our satisfied customers is A-technology. We have built a completely new website for them – from a graphic design, through a theme and a custom plugin, to a fully functional website. Learn how we dit it, which functionalities we created and how we achieved speed and reliability on their website.

A-technology 

A-technology has been implementing solutions for heating and cooling systems for the constructions and service of commercial and residential buildings since 2006. They also offer technological heating and cooling systems, such as solar systems, air conditioning or underfloor heating.

We created a new website design for them and incorporated various interesting functionalities into it according to the client’s requirements.

Website creation

  1. Communication with our client is vital for us. Firstly, we helped our client define their exact requirements.
  2. Our graphic designer Jarda created wireframes in which he defined the specific elements the website will contain. Then, he presented the graphic design draft, which we discussed together with the client.
  3. Our developers Daniel (me) and Zbyněk then created the theme and the plugin, once again tailored to the client needs.
  4. The client’s old website was replaced with a new one – faster and more reliable one.
  5. We were then gradually adding new functionalities and described every new change to our client.

Which functionalities did we create for A-technology?

  • Communication with the external service for service requests

We assured immediate resolving of clients’ requests by connecting the form directly to the supplier. The supplier will receive a filled form directly into its internal HELIOS system and will be able to immediately provide the required service to the client, without unnecessary idle time. Also, the service worker can effectively plan his working day.

  • Automatic address filling

The form also includes an automatic address filling functionality based on a selected place on the map. It saves time.

  • Calculation of article reading time

Each new article contains information about how long it will take to read it. Thus, the reader can expect the approximate reading time and they will less likely leave the website.

  • Presentation pages

These are traditional but very important functionalities, such as references, used technologies, information pages or a blog.

  • Calculator

According to the customer’s chosen technologies, it calculates the preliminary price of the order in € and CZK. This functionality is currently being prepared for the client.

Fast and reliable website

Speed

  • We use only the necessary minimum amount of JavaScript.
  • Styling (css) loads only the needed data for the specific page.
  • Lazy loading of media – loading images, etc. are not blocking the browser and they are gradually being loaded so that the website is interactive as soon as possible.
  • We create code with an emphasis on website performance.
  • We use as few third-party plugins (running during page loading) as possible.
  • We use caching that significantly speeds up page loading.
fast website

Reliability

  • We use only well supported and tested plugins. Most functionalities are taken care of by our developers, which limits dependence on third-parties. Therefore, we can solve potential problems directly.
  • All plugins are regularly updated for bug fixes and security holes.
  • We always test everything on staging before deploying it to the production (live) server.
  • We regularly monitor the server.

Possibility to add functions on client’s request

We think of possibility of modifiability and extensibility in all new functionalities. We created a custom plugin and a Sage theme, which have a clean structure allowing us to continue with the development. We can easily add new features and fulfill our client‘s requests at any time.

Website accessibility

The website for A-Technology met all of the client’s criteria. We have made the website as accessible as possible, which is mobile-optimized, fast, secure and reliable. If you are also interested in such a website, do not hesitate to contact us.

Share on:

More articles:

Don’t miss anything!

Subscribe to the Newsletter to receive the most interesting tips about successful websites.

GDPR