Web & Graphic designer.

Based in Edinburgh, UK. Specializing in custom WordPress site development and graphic design.

If you are a business seeking a web presence or an employer looking to hire, you can get in touch with me here.

Server backup on Cloudways

Server backup on Cloudways - Header image

Cloudways allows you to set up a backup schedule for your server. The server backup will back up your application files and databases. In this small article, I am going to explain how the system works in case you had any doubts or concerns.

Scheduling your server backup

Click on the Servers tab from the top of the Cloudways Panel. Then, select your server and head over to the Backups tab in the Server Management area.
Cloudways server backup panel
Cloudways server backup panel

There, you will find various options for finetuning and set up the schedule:

Backup frequency

Here you can schedule a backup by selecting the exact time. You can select intervals from 1 Hour up to 7 Days.

Schedule time

Here you set the actual time in which the backup  is to be taken. You can set the time in hours and minutes from the dropdown fields.

Backup Retention

Here you can select how long the backups are going to be kept in storage and be available to you for restore.  You can select in multiple of one week intervals from 1 week up to 4 weeks.

Local Backups

Usually a backup will be kept in a remote Amazon bucket storage. If you activate local backups, the backups will also be saved in your local server disk. Please, bear in mind that if you activate that option, the backups WILL count towards your server storage quota.

On-demand backup

At the right side of the panel, you can select to to perform an on-demand backup of your server. This type of backup will be available on your server as a downloadable file ready for you to be downloaded through SFTP. The location of that backup would be inside a folder called local_backup at your rserver’s root folder once you connect to it through SFTP. Note that in order for the on-demand backup to work and for a copy to be stored on your server, you will need to have Local Backups activated from the previous step. If you don’t have the option activated, then the backup will only be taken remotely on the Amazon bucket.

Deleting local backups

In case you have any local backups saved in your server, you can delete them all by enabling the local backup functionality if it is not enabled, hit the SAVE button and then click the trash icon on the right. You can then disable local backups if you wish and hot the SAVE button again.

Cloudways - Local backup deletion
Local backup deletion

Restoring from backup

Once backups have been performed they can be restored individually for each application you host on your server. Select your application by clicking Applications from the top, select your Application and click the Restore tab under Application Management.

Cloudways - Restoring an application
Application restore panel

Just select a backup from the tehdropdown list and click the RESTORE APPLICATION NOW button underneath.

Conclusion

Backing up and restoring a server is a great practice for peace of mind knowing that your precious files are backed up and ready for recall in case of loss of data. What I like about the Cloudways backup is that it can backup remotely to an Amazon bucket storage and that could be a great thing if you lose access to the backend of your site for some reason. As always, I would suggest that you try the backup and restore process and see if it actually works for you and everything is restored correctly.

Take care and good luck!

If you liked the article and thinking of signing up with Cloudways managed hosting, you can click on my affiliate link and signup.

How to deal with the “503 Backend fetch failed” Varnish error on Cloudways

How to deal with the "Error 503 Backend fetch failed" Varnish error on Cloudways

Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. It can be installed in front of any server that speaks HTTP and can be configured to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 – 1000x, depending on your architecture.

Cloudways implement Varnish to their web technology stack along with other caching layers.

Varnish can be activated on your Cloudways server by clicking on the Servers link on top then click on your server name, select Manage Services form the Server Management menu on the left and activate Varnish from the MANAGE SERVICES panel on the right.

Cloudways - Manage Services panel image
Cloudways – Manage Services panel

As you can see, from there you can also purge your server’s cache or disable the cache altogether.

Apart from that, though, you can also enable/disable the Varnish cache for each of your applications. Just select the Applications link from the top of your Cloudways panelthen  select your application from the list that appears, click the Application Settings on the left from the Application Management panel and enable/disable accordingly.

Cloudways - Applications Settings
Cloudways – Applications Settings panel

Instead of having to go to your Cloudways panel Application Settings, Cloudways has developed a plugin called Breeze that can be installed on your WordPress installation so that cache can be cleared from there in a convenient way. The plugin can also be used to minify your HTML, CSS and JavaScript and adjust other settings related to Gzip compression and Browser Cache. There are also settings to optimize your database tables and use your CDN to offload your cache.

I have been using Cloudways Managed WordPress hosting for sometime now and I am more than happy. One of the few issues that bug me sometimes is an error I get usually after I clear my application Varnish cache and visit a page on the frontend. It doesn’t happen very often but when it does, I would get this page on the browser:

503 backend error image
Varnish 503 Backend error

A couple of page refreshes usually fix the issue but I wasn’t happy that this was happening in the first place and I wanted a resolution on this. Searching for a solution, I discovered that there were quite a few cases of users having the exact same problem but solution was vage at best and no official post was published by Cloudways, probably  due to the fact that each user case was unique.

I decided to initiate a ticket through the Cloudayws chat support. After a few moments an agent asked me to confirm my server IP and I was given a few things to try out that could potentially fix the issue. I decided to write this blog post while I was implementing a few of those changes so other users could potentially benefit from what I had done.

Excessive number of applications

The good thing about Cloudways is that you could install a number of applications on the same server. Of course, the higher the number of applications you install, the more strain you put on your server. You could potentially alleviate the Varnish error on your server by having a small amount of applications.

Server Execution Limit and Memory Limit

From your Server Management panel, under the Settings & Packages on the BASIC tab there are a couple of settings that could help. I was told that Execution Limit could be set to 1200 and Memory Limit to 512.

Cloudways - Server Management
Cloudways – Server Management panel

Execution Limit is the amount of time a request is allowed to run across the stack. Web servers set a time limit on how long a script can run. This is done to prevent the webserver from abuse. Since WordPress is made up of PHP scripts, each script has to run completely within the set time limit. On Cloudways this time limit is usually 60 seconds, and in most cases, this is more than enough time for a script to run. However, if a PHP script runs for longer than the set time limit, PHP cuts short the execution. It then returns the fatal error: maximum execution time exceeded message.

Memory Limit is the maximum amount of Memory in (MB) that a PHP request is allowed to allocate. That means that if multiple requests were to use more than your server’s memory, you could potentially run out of memory so it depends on your server’s resources and the number of applications currently running on your server. So if you were to modify that settings, remember to monitor performance if your server resources are minimal.

Disable WP-CRON on on all applications

A suggestion was made to disable WP-CRON on all applications to optimize memory consumption on the server. This is easy to do. Just open the wp-config.php file located on your WordPress installation root folder and add the following just before the /* That's all, stop editing! Happy blogging. */ line:

define('DISABLE_WP_CRON', 'true');

Then, save the file and reupload it on the server. You can then easily add a manual CRON job to your application by following this article. Alternatively, you can create your own CRON job on an external website such as this one that allows you to create CRON jobs from minute-by-minute to once a year, for free.

Checking your cache plugin settings

In case you have another caching plugin install, there might be some settings that need to be tweaked. You can experiment with some settings so that there are no conflicting issues. For example, I use Autoptimize to minify my scripts so I have minification deactivated in the Breeze plugin.

Disable Varnish on php stack applications

It is not recommended from Cloudways to have Varnish activated on custom PHP applications. You can easily disable it from your Application Settings console (see screenshot above).

Attacks on your login page

Usually malicious users or bots might be targeting your login pages and as a result, your server resources would be consumed and produce the 503 error. You could make use of your security plugin to apply a reCAPTCHA for all your login and registration page and also change your default login URL. For example, Wordfence has a function to enable reCAPTCHA on the login and user registration pages by going to Wordfence->Login Security, select the Settings tab and activate the Enable reCAPTCHA on the login and user registration pages checkbox. Various other security plugins can also do the job.

Attacks from WordPress XML-RPC

XML-RPC is a method that WordPress uses to communicate with external services and transmit data. With the introduction of the upcoming WordPress API we can expect XML-RPC to be eliminated entirely. Attackers could use brute force attacks through xmlrpc.php to gain access to your site. Hackers could also use the pingback feature in WordPress to send pingbacks to thousands of sites instantaneously. This feature in xmlrpc.php gives hackers a nearly endless supply of IP addresses to distribute a DDoS attack over. Those attacks could be easily overloading your server thus causing the 503 error.

You can use the XML-RPC Validator to examine if your site has XML-RPC running. If the test fails that means that XML-RPC is deactivated. To deactivate it you can make use of the Disable XML-RPC plugin or manually by adding the following to your htaccess file:

# Block WordPress xmlrpc.php requests
<Files xmlrpc.php>
order deny,allow
deny from all
allow from 127.0.0.1
</Files>

Some security plugins like Wordfence also have the functionality to deactivate XML-RPC, built-in. Just head to WordFence->Login Security, select the Settings tab and enable the Disable XML-RPC authentication checkbox.

Analytics monitoring

The application motoring tool on the Cloudways console can be used to monitor incoming traffic to your website. From there, you can check which IP requests and URLs accessing your site. You can find them by going to Applications->Application management -> Monitoring -> Analytics -> Traffic.

Cloudways traffic monitoring
Cloudways traffic monitoring

And there you have it!

Please, bear in mind that the above settings are not guaranteed to fix the issue and I suggest you try any changes on a cloned server beforehand. There is some useful info here for sure, though, and it would be interesting to see if any of these work for you.

You can visit the Cloudways Managed Cloud Hosting Platform and see if they have any plans that interest you. If you liked the article and thinking of signing up with Cloudways managed hosting, you can click on my affiliate link and signup.

GeneratePress theme tutorial: Blog thumbnail image fixed height fix

GeneratePress theme tutorial: Blog thumbnail image fixed height fix

Today I would like to address an issue that seemed quite tricky in the beginning but I was able to find a solution though some thorough googling! GeneratePress Premium has a nice blog layout addon that allows blog archives to be displayed as a grid. On top of that Tom Osborne the creator of GeneratePress has created a WordPress plugin called WP Show Posts which allows you to display posts anywhere on your website using an easy to use shortcode. I have recently used both of those mentioned functionalities on my latest creation, a support community forum and resource repository for the WordPress Brizy page builder. You can view the community page at https://brizycommunity.com.

While building the website I run into an issue regarding the height of the blog thumbnail images on the blog archive. Depended on the size of the feature image uploaded for every single post, some thumbnails would appear with varied heights making the blog layout appearing a bit off.

Blog grid layout thumbnail variable height
Default blog grid layout – Note the thumbnail variable size.

I could set a fixed width and height by going to Layout->Blog and set width and height pixel values for the Archive featured image dimensions but then I would lose all responsive design functionality for various desktop and mobile device screen sizes since due to the fixed size nature of the thumbnails.

Blog grid layout thumbnail variable height - Mobile View
Default blog grid layout – Mobile View.

A better way I found out was to actually utilize some sweet CSS. I wanted that CSS to be applied only at a minimum size of 769px, my mobile breakpoint.

@media( min-width: 769px ) {
  
  .inside-article .post-image a img {
    height: 174px;
    object-fit: cover;
    object-position: center;
  }
  
}

In the above code, I set the thumbnail archive feature image to a set height of 174px. I also set the object-fit CSS property cover and the object-position property to center. That way the thumbnail dimensions would not stretch out of proportions but instead zoom into the image slightly to keep their aspect ratio intact.

Blog grid layout thumbnail equal heights

Also that way, I would still retain equal heights on a 2 column layout but switch to the default behaviour on a one column layout.

Blog Grid layout - 2 columns
Blog Grid layout – 2 columns.

Blog Grid layout - 1 column
Blog Grid layout – 1 column

The same issue was also present on the WP Show Posts shortcode on the homepage:

WP Show Posts - Latest News - Varied - thumbnail heights

Adding some CSS to the existing code fixed the variable thumbnail image height issue:

@media( min-width: 769px ) {
  
  .inside-article .post-image a img {
    height: 174px;
    object-fit: cover;
    object-position: center;
  }
  
  section.wp-show-posts article .wp-show-posts-image a img {
    height: 232px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
}

 

WP Show Posts - Latest News - Fixed thumbnail heights
Thumbnails with fixed heights.

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

Hope you find that useful. Till next time, then!

Set a custom category post type archive as your homepage

Set custom category post type archive as homepage - image

Sometimes you might have a custom category post type archive that you want to display as your homepage. Your blog page might already be “occupied” by a link that lists all your blog items possibly including the custom post type items as well. Surely, you can add a category menu item to your main navigation menu but you would have to add a redirect from that link to your homepage and that’s not a good idea for performance and SEO purposes. Just a clarification, by homepage, I mean the page that gets loaded when users first visit you website URL and can be set at Settings->Reading->Homepage, not to be mistaken by the blog page that can also be set on the same screen.

Reading settings

So the process to achieve the above would be to create a page that would act as your home page and then setting that page as your homepage like the screenshot above. In my case, I have created a Videos page for a video custom post type. Then you would add the following code inside your functions.php file or though a code snippet.

function prefix_downloads_front_page( $query ) {

    // Only filter the main query on the front-end
    if ( is_admin() || ! $query->is_main_query() ) {
    	return;
    }

    global $wp;
    $front = false;

  // If the latest posts are showing on the home page
    if ( ( is_home() && empty( $wp->query_string ) ) ) {
    	$front = true;
    }

  // If a static page is set as the home page
  
    if ( ( $query->get( 'page_id' ) == get_option( 'page_on_front' ) && get_option( 'page_on_front' ) ) || empty( $wp->query_string ) ) {
    	$front = true;  
    }

    if ( $front ) :
  
        $query->set( 'post_type', 'video' );
        $query->set( 'page_id', '' );

        // Set properties to match an archive
        $query->is_page = 0;
        $query->is_singular = 0;
        $query->is_post_type_archive = 1;
        $query->is_archive = 1;

    endif;
  
  //Fix pagination
  if ( get_query_var('paged') ) {
    	$paged = get_query_var('paged');
  } elseif ( get_query_var('page') ) {
    	$paged = get_query_var('page');
  } else {
    	$paged = 1;
  }

  $query->set( 'paged', $paged );

}
add_action( 'pre_get_posts', 'prefix_downloads_front_page' );

Just replace video with your custom post type slug in line 24. The archive is then going to be available as your homepage or from clicking your homepage website logo (if you have one).

TIP: To change the homepage archive layout to something else, let’s say a column layout style layout, you would use the below code inserted with the same method as previously:

add_filter( 'generate_blog_columns','gm_portfolio_columns' );
function gm_portfolio_columns( $columns ) {
    if ( is_category( 'videos' )  || is_archive('video') ) {
        return true;
    }
    return $columns;
}

add_filter( 'generate_blog_get_column_count','gm_search_column_count' );
function gm_search_column_count( $count ) {
    if ( is_category( 'videos' ) || is_archive('video') ) {
        return 20;
    }

    return $count;
}

In this case, I already had a column layout but with 4 columns. Inserting the code above would make my layout span 5 columns. I have assigned my video custom post type to a category of videos. The code above would look for a page where the category of videos is present, in this case if the video category was displayed is_category( 'videos' ). At the same time though, we are also looking for the custom post type archive which is loaded as our homepage is_archive('video'). Those two conditions would make sure that the correct layout would be loaded on both places. This solution works well for all kinds of paginated archives as well!

Have a look at this website here in which I have implemented the solution. I would also like to thank Tom Usborne from GeneratePress for corrections on the code!

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

That’s all for now, hope you find that useful!

GeneratePress theme tutorial: Convert the top widget bar into a notification window

GeneratePress theme tutorial: Convert the top widget bar into a notification window

A notification bar is useful if you want to show a site-wide message to your audience about certain news or a promotion that you offer in your online shop. There is a plethora of notification bars that can be found in the WordPress plugin repository or you can embed one yourself. GeneratePress has a top bar widget that can be activated from the Customizer so why not take advantage of what’s already available to us and save a few resources and HTTP requests? By going to Appearance->Customize->Widgets->Top Bar a of custom widgets can be added including custom menus, social icons, login information etc. But what if you wanted to add a notification bar that always needs to load at the top of the page but give the user the option to be able close it with the use of a close () button?

GeneratePress top bar widget area in the Customizer
GeneratePress top bar widget area in the Customizer

I recently asked that question in the GP Premium support forum and Tom Usborne (creator of GeneratePress) along with David gave me some great tips and code snippets (as always!) which I then applied to a test website with great results! First thing to do is to actually add a custom HTML widget to the top bar widget area. Just go to Appearance->Customize->Widgets->Top Bar and then click the Add a Widget button to add a Custom HTML widget. I used the following HTML code to add a paragraph and a Font Awesome icon inside the content custom HTML widget area:

<p>USE CODE: TE20 AND GET 10% DISCOUNT</p>
<i class="top-close-button fas fa-times-circle"></i>

Tip: Since GeneratePress 2.1 the Font Awesome library is not included by default anymore. Please, read this article to add the Font Awesome library to the theme.

In Appearance->Customize->Layout->Top Bar, I set the “Top Bar Width” to Full and “Top Bar Alignment” to Center. In Appearance->Customize->Colors->Top Bar, I chose a dark background color with white text.

Top bar layout options
Top bar layout options

Top bar color options
Top bar color options

Next we need to add some CSS and JavaScript code. CSS code can be added from the Customizer (Appearance->Customize->Additional CSS). JavaScript code is to be added to the wp_footer hook area (Appearance->GP Hooks, then select the wp_footer hook and paste the code). Alternatively, if you are not a GP Premium owner you should be able to enqueue the script yourselves. Make sure not to included the <script></script>tags if you are to create your own JavaScript file, though.

Hook element

CSS

/** Top bar **/
.top-bar {
    left: 0;
    right: 0;
    z-index: 1;
}

.top-bar p {
  margin-bottom: 0;
}

.top-close-button {
  float: right; 
  clear:right; 
  margin-top: -20px;
  cursor: pointer;
}

body, div#wpadminbar, .top-bar {
    transition: transform 500ms ease;
}

 

JS

<script>
jQuery( document ).ready( function( $ ) {
    $( '.top-close-button' ).on( 'click', function( e ) {
        e.preventDefault();
$( '.top-bar' ).css( 'transform', 'translate(0%, -100%)' );

if ($('div#wpadminbar')[0]) {
    $( 'body' ).css( 'transform', 'translate(0, -52px)' );
    $( 'div#wpadminbar' ).css( 'transform', 'translate(0%, 20px)' );
} else {
  $( 'body' ).css( 'transform', 'translate(0, -52px)' );
}

    } );
} );
</script>

If you are on the latest versions of GP Premium and make use of the Elements instead, you can also create a hook element type by heading to Appearance->Elements->Add New and choosing Hook from the dropdown selection box. Name the element, paste the javascript code, select wp_footer as a hook type then click on the Display Rules tab and for Location choose Entire Site. Then, publish the element and you should be good to go!

Hook element

As you can see the styling  repositions the bar at the center top, adjusts spacing, relocates the close button at the top right of the bar and sets a few CSS transition effects that will be used when the bar is dismissed by the user. The JavaScript code dynamically adds a few classes when the top bar close button is pressed and sets different Y axis transformations to cater for the admin bar being present. Meaning that when the WordPress admin bar is present at the top of the user’s browser, the notification bar would need to be moved up and out of the browser screen and at the same time the whole page would need to move up without pushing the admin bar out of the way! You might also need to tinker with the values according to the height of your own bar.

Top bar without the admin bar
Top bar without the admin bar

 

Top bar with the admin bar visible
Top bar with the admin bar visible

Possible Improvements

Currently the bar would appear on every page refresh but you could set up a JavaScript Cookie and set up a conditional to show/hide the bar depended on whether this Cookie was set or not. A great alternative method though, as Dave Smith suggested in the post comments, is to use the Widget Options plugin or similar to set the HTML widget to only show on certain pages. Finally, if you are a GP Premium member you can disable the top bar individually for a particular page or post by using the Disable Elements addon module. The disable functionality can thus be activated and deactivated from the bottom of each page or post.

GeneratePress is a very powerful theme! Grab your copy here.

I provide advanced customization work for GeneratePress, so please get in touch if you need any work done.

Hope you found the tutorial useful. Till next time, keep Generating!