Step 1: Enable Debugging in WordPress

Enabling debugging is the first stage in debugging WordPress. WordPress does not show errors on the front end by default, making it difficult to diagnose problems. Enabling debugging, on the other hand, will display errors and alerts in real time. To activate debugging, open the wp-config.php file in your WordPress installation’s root directory and add the following code:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

The first line enables debugging, the second logs errors and warnings to a file, and the third line stops errors from being displayed on the front end. The final line prevents PHP errors from being visible on the front end.

Step 2: Check for Plugin Conflicts

Plugins are a great way to extend the functionality of WordPress. However, sometimes plugins can conflict with each other or the WordPress core. If you encounter an error, try disabling all of your plugins and re-enabling them one by one until you find the culprit.

To disable your plugins, connect to your WordPress site via FTP or the file manager in your hosting control panel. Navigate to the wp-content/plugins directory and rename the plugins folder to something like “plugins_backup”. This will disable all of your plugins. Then, log in to your WordPress site and see if the error persists. If the error goes away, re-enable your plugins one by one until you find the one causing the issue.

Step 3: Check for Theme Conflicts

Similar to plugins, themes can also cause conflicts and errors. If you’ve ruled out plugins as the cause of the issue, try switching to a default WordPress theme, such as Twenty Twenty-One. To switch themes, go to Appearance > Themes in your WordPress dashboard and activate the default theme. Then, see if the error still exists. If the error goes away, the issue is likely with your theme.

Step 4: Check for PHP errors

PHP errors can create problems in WordPress, so it’s critical to look for them. Examine the debug.log file in the wp-content area to do so. Any PHP errors that arise will be recorded in this file. You can also look for PHP errors in your hosting management panel’s error_log file.

Step 5: Check for Pending Updates

It is always a good idea to keep your software up to date. Please navigate to Updates from your WordPress dashboard and ensure that there is nothing pending over there.

Step 6: Check Server Errors on the Console

Simply open the browser console to rapidly find any error messages on your web page. This is accomplished by hitting Ctrl+Shift+J on a Windows/Linux computer or Cmd+Opt+J on a Mac. The console errors provide useful information about the source of the errors, which can be shared with the appropriate author to obtain a better understanding of the problem. Consider taking a screenshot of the console error message and sharing it with the appropriate person to help with issue resolution.

Step 7: Reinstall WordPress Core Files

If none of the options above have resolved the problem, it may be necessary to reinstall the WordPress core files. To do this, go to WordPress.org and obtain the latest version of WordPress, then extract the files to your computer. Then, browse to the root directory of your WordPress site using FTP or the file manager in your hosting control panel. Except for the wp-content folder and the wp-config.php file, remove all WordPress files and directories. Finally, update your WordPress files and send them to your server.

Conclusion

To conclude, WordPress debugging may appear to be a daunting job, but it does not have to be. Most problems can be diagnosed and fixed by using these fundamental techniques. Always make a backup of your files and database before making any adjustments. Best wishes!

This issue was immediately resolved in a hotfix released in version 3.1.26 of the Starter Templates/Premium Starter Templates plugin.

You can simply follow these steps to resolve the issue if you are below version 3.1.26:

Step 1: Please deactivate our Starter Templates plugin and update it to the latest version.

Step 2: In the meantime, Update other plugins that have pending updates and there shouldn’t be an issue with updates

Step 3: Reactivate the Starter Templates plugin as all the plugins are resolved and with Starter Templates updated to the latest version.

Note: In rare cases, if the above steps do not help. You can deactivate and delete the plugin temporarily and install the latest version from the Starter Templates plugins page or My Downloads page for the Premium Starter Templates plugin.

Why this happens?

The reason this error occurs is because of one of the following reasons:

1. The PHP memory limit is low.
2. The PHP version of your site is not up to date.
3. The cURL library version is not up to date.
4. Firewalls installed on the server of the hosting provider which might be blocking the starter template library.

How to fix this?

Before installing the starter templates, please ensure that your site meet the minimum system requirement. Here is an article that will help.

From the WordPress dashboard, navigate to the Tools>Site Health and click on the Info tab. Please ensure that you have the following updated:

• WordPress version 5.0 or above
• PHP 7 or above
• MySQL 5.6 or above/ MariaDB version 10.0 or above
• WP Memory limit of 128 MB or greater
• cURL version is 7.70 or above

If any of the above items are not updated, please reach out to the hosting provider and request to update them. The error is most likely to disappear once you update the PHP version and install the PHP modules.

Why this error occurs?

When a browser detects that a text has a custom font applied, it waits for the font to download. Text will remain invisible till then. The customised font is immediately used after it has finished downloading. This normally doesn’t occur if you are using the default fonts; however, mostly occurs when you are using a custom font or using a plugin to insert the custom fonts.

When you test the speed of the website, this reaction of the browser is responsible for showing the error “Ensure text remains visible during web font loading”.

How to rectify this error?

To rectify this error, you will need to ensure that during the time that the browser loads your custom font, it should displaythe default fonts. Once the browser downloads the custom fonts, it should then swap the default fonts with the custom one.

Google Fonts

For Google fonts, you can simply use the plugin named “Swap Google Fonts Display” which can be downloaded from here. Once you have downloaded and install the plugin, it will automatically search for any Google Fonts script and will append display=swap to the URL. This will ensure that the browser loads the deafult fonts during the time any custom fonts are being downloaded.

Other Fonts

When you are using a plugin to insert custom fonts to your website, you will need to either contact the plugin creators or you can edit the plugin code . Here is an example on how to edit the plugin code. In this example, we are using a plugin developed by us named “Custom Font”.

Step 1: From your WordPress dashboard, navigate to the Plugins and select Plugin File Editor

Step 2: Select the plugin that is responsible for injecting custom fonts on your website.

Step 3: Locate the .css file inside the plugin code. In our case the CSS file is located inside the assets>CSS>bsf-custom-font.css. Please note the every plugin will have different paths for the CSS file. Please contact the plugin creators, if you are not sure where to find the css file of the custom font.

Step 4: Copy and paste the code below at the bottom of the .css file and click on the update file button.

@font-face{
	font-family: cambodian
	font-display: swap;
}

Once you have followed the steps, the error “Ensure text remains visinle during web font load” will be fixed.

How to Fix the upload_max_filesize Error

As you might have guessed, the solution involves increasing the default limit of upload_max_filesize. Let’s look closely at it and see what steps we can take to fix this error.

Method 1. Editing the .htaccess File

• Login to CPanel and navigate to File Manager under the Files section.
• Locate the .htaccess file and right-click to Edit.
• Add the following line at the bottom of the file and Save the changes.

php_value upload_max_filesize 256M

Method 2. Editing the wp-config.php File

Another way to fix the uploaded file exceeding the upload_max_filesize directive in php.ini error is by tweaking the wp-config.php file in your root directory.

For that, log in to the CPanel and access public_html to edit the wp_config. php file. Add the following line before the “That’s all, stop editing! Happy publishing” line:

@ini_set('upload_max_size' , '256M' );

Once you add the code, Save the file, refresh your web browser, and try uploading again!

Method 3. Updating php.ini to Fix the upload_max_filesize Error

If you wish, you can always modify your PHP settings through the PHP Configuration tool on CPanel.

If you’re using VPS or a different platform, you can try updating php.ini to fix the error. Here’s what you need to do:

• Navigate to your php.ini file and edit it. If you can’t find it, ask for assistance from your hosting providers.
• Locate the upload_max_filesize and increase it by changing its number. You can also boost a few other limitations, as shown below:

upload_max_filesize = 256M 
post_max_size = 256M 
memory_limit = 512M 
max_execution_time = 180

Save the file, and that’s it. The error should no longer occur.

Fortunately, there are a few ways to incorporate SVG files into your website. With a little reconfiguring, you’ll be able to optimize some of your logos and other graphics using this file type.

Make use of this article to know more about the SVG files and why you might want to use them. Also, go through two ways to enable their use on your website. We’ll also cover some important security precautions you may want to take.

What is an SVG?

An SVG file is a type of vector image which is composed differently than more common image file types. For example, a JPG is made up of thousands of pixels. Whereas vector images are more like a set of written instructions. They don’t contain pixels that form a larger image. Instead, they include a schema-like set of data that creates a two-dimensional image.

Why Use SVG?

SVG files are significantly smaller than other image types. This means your site won’t get bogged down by graphics. SVG files are indexed by Google. This can be a real boon for your site’s Search Engine Optimization (SEO).

How to Upload an SVG to WordPress

Since WordPress doesn’t include support for SVGs, you’ll have to work a little harder to include them on your website. Go through the following sections of this article to get more information regarding how to add SVG files to your website using a plugin and via a manual process.

Method 1: Using a Plugin

First, you’ll need to download and install an SVG Support Plugin.

Once you’ve installed and activated the plugin, you’ll have a new menu option in your WordPress dashboard under Settings > SVG Support. There, you will receive instructions on how to style SVG files for your website.

Additionally, you’ll be able to configure a few important administrative settings. This includes restricting SVG uploading privileges to administrators only. After that, you’ll be able to upload SVG files directly to your Media Library.

Method 2: Manually Enable SVG File Uploads

To get started, you’ll need to edit your website’s functions.php file. To do this, you can go to Appearance > Edit Themes in your dashboard, and select the functions.php file. Alternatively, you can access your site’s files using a File Transfer Protocol (FTP) application such as FileZilla.

Either way, it’s best to create a child theme or switch to a development environment before doing any major work on your website. This will keep your live site safe from harm while you’re making changes.

Next, you’ll need to add the following snippet of code to your functions.php file.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

After that, you’ll be able to upload SVG images to your Media Library. There, you can view and interact with them just like with other image file types.

When users install an SSL certificate on their site, the entire content should automatically move to HTTPS instead of HTTP; however, sometimes the site still runs on HTTP/HTTPS instead of only HTTPS. This might result in loading the asset properly on the site. This is one of the most common SSL certificate errors while working with WordPress sites. In this document, you will find the most common ways to fix this issue.

Contact the Hosting Providers

The very first option is to contact your hosting providers and inquire about the SSL if it was properly installed. In most of the cases, the hosting provider fails to install the SSL certificate properly which results in this issue. If the hosting provider confirms that the SSL certificate is properly installed, you can follow the steps below to perform a quick fix.

Take a backup

Before you make any changes to your website, it is recommended to take a backup of the site; so that if things go south, you can always restore the settings from the backup. Here is an article that will guide you through on taking a backup of your website.

Next Step

Once you have successfully taken a backup of your website, please follow these steps.

• Step 1 : Login at your WordPress Dashboard
• Step 2: Download and install the plugin called Better Search & Replace

Step 3: Run Better Search by navigating to Tools>Better Search and Replace

Step 4: Replace on the old site URL for the new site URL

• Step 5: Delete the site_url constant you may have added to wp-config.php
• Step 6: You may also need to regenerate your .htaccess by going to Settings > Permalinks and saving the settings

Note: It is also recommended that you run the plugin at first as a Dry Run, to then Live.

If you see anything in the red lines, these are some javascript conflicts that might be causing the issue you might be facing. From the error, you can try to analyze if some other plugin or theme is causing it.

Check JavaScript errors / conflicts in Chrome:

• Right-click anywhere on the page. Choose Inspect. 
• The developer panel will open. Click on the Console tab.
• In the left panel, click on Errors.
• If there are any, you will see them in red. You will also see a red indicator at the top right side of the panel:

Check JavaScript errors / conflicts in Firefox:

• Right-click anywhere on the page. 
• Choose Inspect Element. 
• The developer panel will open. Click on the Console tab.
• Make sure Errors are selected. 
• If there are any, you will see them in red:

Check JavaScript errors/conflicts in Internet Explorer:

• Right-click anywhere on the page. Choose Inspect Element. 
• The developer panel will open in a new window. Click on the Console tab.
• Refresh the website page for the errors to be logged.
• Alternatively, at the top right corner of the screen, go to Tools > F12 Developer Tools.
• Make sure Errors are selected. 
• If there are any, you will see them in red:

Check JavaScript errors/conflicts in Safari:

• Go to Safari > Preferences > Advanced and enable the Show Develop menu in the menu bar:
• Right-click anywhere on the page and choose Inspect Element
• The developer panel will open.
• Click on the Console tab.
• Errors will be displayed at the bottom of the panel.

Due to this, you might have noticed the repeater fields not being displayed as expected in the Widgets area.

To resolve the same, the Astra Widgets update v1.2.10 you will find a notice as shown below, mentioning to Save/Update the widgets and refresh the page once.

Why Did This Happen? 

Astra Pro WooCommerce and EDD Modules bring the option to change the default mini cart icon. You can set one of the Astra Pro icons by navigating to the Mini Cart Header element (General tab).

By default, the font color for the number of items in the cart (Product Count) is white. Setting your Cart color to white too will create a situation that the number of items becomes invisible though the number is still actually there (white color on white color).

This is easily solved by setting product Count Color to any color other than white.

How To Set Product Count Color?

In this case, you should additionally set another color for the number of items using the “Count Color” option.

The “Count Color” is available with Astra Pro Addon since version 3.5.9. You can set it up by following these steps:

Step 1 – Login to your website and make sure that your Astra Pro Addon plugin is active;

Step 2 – Navigate to Appearance > Customize > Header Builder > Cart > Design;

Step 3 – Set “Count Color” to another color. Click “Publish” to save changes.