Override locotranslate translation strings

If you want to override some loco translate strings, you might have noticed a warning stating that changes to the file might be lost after wordpress/plugin/template update.

Let’s see how to avoid losing all your customization during the next update.

In Loco Translate select the plugins/theme/etc that you want to customize.

Hover over the the language you want to make changes to and click on copy.

Loco Translate let you create a copy of a translation file.

Note that system, on the right end of the picture above indicates that this is a system file and prone to be overwritten during the next update.

Once you have clicked on copy you are brought to a screen to set a new language. Well, good news, it doesn’t have to be a new language at all and you can create a copy of a file for an existing language. Let’s have a look at the settings.

Loco translate “New language” screen.

1- Choose the target language, in our case this is the one of the file we copied.

2- For the location, the most sensible is the custom location. System and Author might be subject to changes from update.

3- For the templates option use the “Just copy English source strings” option and changes just what you need, the rest will fallback safely on the string in the original file. If you have already make your change directly in the original then you can choose the first option.

Once you are all set, click on start translating.

If you need to edit your custom copy. Click on “Languages” in the Loco Translate menu. Choose the languagefor which you have created the copy you want to modify. You will see all templates available under WordPress Core , Plugins and Themes for this language. Look for the name of the plugin or theme you have modified. The original file will be listed as system and your copy will be listed as custom. Click on edit.

Price Filter not working

Issue: the woocommerce price filter is not working.

Solution: The issue is likely due to a compatibility issue with your theme. To solve that, you will need to declare the theme woocommerce support and copy your page.php file content to a new file that you will call woocommerce.php. You will replace the loop by <?php woocommerce_content(); ?>.

You will also need to make sure woocommerce support is declared in your theme functions.php: add_theme_support( 'woocommerce' );

For more info on woocommerce theme development and support:

Integrate woocommerce in your theme

Add shortcode with WordPress new content editor interface Gutenberg

You might have add difficulties to and errors when trying to add shortcode to new WordPress articles and posts.

To add a short code in the new editor, hover at the top center of an unactive block and click on the circled + icon that appears at its top center .

Adding a block above another one.

You can also click on the circled + icon at the top left corner of the page.

In the search bar type: shortcode

Click on the shortcode option. A new block will be added.

The shortcode block can be found under widgets in the block type selection box.

Type in your shortcode as you would do in the classic view:

[ShortCodeTag]

Note: I did encounter an error that the page couldn’t be saved when trying to save the page with the square brackets in WordPress 5.2.4. It turned out that the page was actually saved. This issue was supposed to be fixed already since 3.9 see github repo for wordpress gutenberg.

Upload webp images to wordpress

wordpress and webp: “Sorry, this file type is not permitted for security reasons.”

Error message when uploading a webp image in wordpress media library

Certain image type like svg, jpeg2000 or webp raises an error when you try to upload them in wordpress as shown in the picture above.

We have already covered how to implement webp in wordpress but there might be some cases where you might want to upload this image manually and serve them to supporting browser via your own script if necessary (that’s not the case for svg though).

Add the following snippet of code to the functions.php file of your template. Comment out or delete the line for the mime type you are not interested in.

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

How to remove jquery.migrate.js in wordpress

Jquery.migrate is used to ensure compatibility with older jquery code using deprecated function.

In case your jquery is all shiny and new and you don’t use deprecated functions, then you can get the reed of jquery migrate and have one less file to load. As usual, we will do that by adding a function in the functions.php file of your theme:

function remove_jquery_migrate($scripts)
{
    if (!is_admin() && isset($scripts->registered['jquery'])) {
        $script = $scripts->registered['jquery'];
        if ($script->deps) { 
            // Check whether the script has any dependencies     
            $script->deps = array_diff($script->deps, array('jquery-migrate')); 
            }
      }
 } 
 add_action('wp_default_scripts', 'remove_jquery_migrate'); 

How to debug your wordpress function to the browser console

At time, it might be useful to debug some plugin or theme function directly in your browser console. It comes handy specially if you are sending some data live with jquery to a php function when you input something here and click some button there.

Add the following function to your theme functions.php:

//Send message to the web console

function debug_to_console( $data ) {
    $consoleLog = $data;
    if ( is_array( $consoleLog ) )
          $consoleLog = implode( ',', $consoleLog);
    echo '<script>console.log( "Debug Objects: ' . $consoleLog . '" );</script>';
 } 

Now you can add debug_to_console($data ) in your theme and plugins to check what value your variable take. Replace $data with whatever value you need to monitor.

Display wp plugins script and style handle

If you are serious about your site optimization, there will be a point where you want to control all these additional scripts and stylesheets your plugins are loading on your site.

To do so you will need to know the handle that is used to identified the said stylesheets and and scripts.

One easy way is to have it displayed front end in your test environment.

Add the following code to your theme function.php:

function get_enqueued_scripts () {

    $scripts = wp_scripts();

    echo 'Enqueued scripts:
';

    foreach( $scripts->queue as $handle ) :

        echo $handle.' | ';

    endforeach;

    echo '
';

}
 add_action( 'wp_head', 'get_enqueued_scripts', 9999 ); 

And to get the handles of the enqueued style sheets:

function get_enqueued_styles () {

    $styles = wp_styles();

    echo 'Enqueued styles:
';

    foreach( $styles->queue as $handle ) :

        echo $handle.' | ';

    endforeach;

}
 add_action( 'wp_head', 'get_enqueued_styles', 9999); 

In case you don’t have a test environment (really?) you can display this info in the console, don’t forget to disable that after you are done optimizing your site.

Defer the execution of javascript and load js files in the footer

In a previous article we have seen how to manually concatenate scripts in your main theme to avoid loading multiple files.

In case you can’t concatenate some scripts here are two options to defer the exectution of the script until after the page has fully loaded or simply load a php script in the footer rather than in the header of your page.

Defer the execution of a script:

For your inline scripts:

<script defer> your script</script>

And it is exactly the same when the scripts are in an external file:

<script src="/path/to/your/script" defer></script>

Execute a function in the footer instead of the header.

In one of my plugn I had the case where I needed to fetch all the categories and product variation in jquery plugin that allow live display and filtering for a given search string. As such, the jquery is prepared in a php file that I then included in my theme header with and include function. Until I realize I can as easily load the script in the footer and avoid to overload my header.

In the index.php file of the plugin:

add_action('wp_header', 'PluginName::functionName);

simply becomes:

add_action('wp_footer', 'PluginName::functionName);

functionName is your plugin function that contains the include statement that should be loaded in the footer.

Control what javascript and css files your wordpress plugins load.

Javascript and css can heavily impact your page load time and the ability of google bots to render your page. The consequence on your ranking might be heavy in case the page to be marked as not mobile friendly due to this rendering issue.

A solution is to reduce the number of css and js files your wordpress site loading.

As you have noticed, many plugins load their own css and js in order to perform their function and nicely display the output, which is perfectly legitimate, although it might not be desirable for a web designer concern with performance, as you ought to be ;)

I am pretty sure I don’t need to make the matter clear, as you are reading this article but just in case, let’s recall here that on top of impacting your SEO as stated above, there is a 5% drop in sales for each 0.1 sec of load time (I am not sure I state that correctly but you got the idea).

So, what the solution you may ask, rightfully, so let’s dig into that without any further delay.

The strategy we will explore here is to dequeue the plugin css and js and concatenate it to your theme js and cs

Dequeue a plugins javascript file or css stylesheet:

To dequeue the script you want to concatenate add the following code
in your theme functions.php :


add_action('wp_print_styles', 'deregister_styles', 100);

function deregister_styles() {
  wp_deregister_style('name-of-style');
}

Merge Javascript and styling with your existing files

Locate the style or js you have deregistered and copy and paste it’s content in your theme css or js.

Test your site thoroughly to make sure there is no conflict. Paste the code in your stylesheet in the order they are loaded on your page. Once you are sure everything is displaying properly, you might merge the style rules and remove the duplicated one in case there are.

There are more advance technique to load css such as css preprocessing. which we will cover in further articles.

More info on this excellent article:
https://davidwalsh.name/remove-stylesheets

Tips:

In order to make sure you are removing the right css files from the queue, use the developper tool of your browser and inspect the element related to your plugin, you will which css rules affect them and from what file they come from. Once you have noted the name of the css file you know which one you need to copy to your own css rules and remove from the queue.

WP Plugins or Themes Update error: “Destination directory for file streaming does not exist or is not writable “

Check in wp-config.php which folder is assigned as the temporary directory. the line will start with

  
define('WP_TEMP_DIR', ABSPATH . '/path/to/temp');

Through ftp check the permission on the folder. It should be 755.

Even if all seems alright the update might still failed. In my case my wp-config.php is placed outside the public directory altogether. I decided to go with a temp folder also place outside of the public directoy, those I had to modify my wp-config.php (which is placed in its dedicated directory) as follow:

. I decided to go with a temp folder also place outside of the public directoy, those I had to modify my wp-config.php (which is placed in its dedicated directory) as follow:

define('WP_TEMP_DIR', ABSPATH . '/../temp/');

The path that was causing the error was as follow:

define('WP_TEMP_DIR',dirname(FILE).'/wp-content/uploads');

Placing the wp-config.php outside the public directory allow for an extra layer of security in case the php settings of the apache server get messed up and the php files are exposed instead of being executed. Even though this situation SHOULD NOT happen, there is a possibility that it does and that’s what security is about afterall: being prepared for the unlikely events.