Frameworks

Recommended local Google Font hosting plugin for WordPress

I tested different local Google Fonts (GPDR) plugins and for some websites especially with Elementor/WPBakery etc, out of all plugins tested, only the OMGF (optimize my google fonts) plugin really worked in removing all fonts for GPDR compliance.

Therefore, I can recommend installing OMGF specifically, even though most other plugins like Self hosted Google Fonts will work for most websites.

You can installing it by opening the WordPress admin panel, clicking Plugins, clicking Install, and then entering OMGF in the search field.

Posted by Uli Köhler in Wordpress

How to fix WordPress docker image upload size 2M limit

Problem:

You are running your WordPress instance using the official WordPress Apache image.

However, the WordPress Media page has a maximum upload size of 2 Megabytes.

Solution:

This setting is configured in the php.ini used by the WordPress docker image internally. While it is possible to use a custom php.ini, it’s much easier to edit .htaccess . Just edit .htaccess in the wordpress directory where wp-config.php is located and append this after # END WordPress to set the upload limit to 256 Megabytes:

php_value upload_max_filesize 256M
php_value post_max_size 256M
php_value max_execution_time 300
php_value max_input_time 300

The change should be effective immediately after reloading the page. Note that you still might need to configure your reverse proxy (if any) to allow larger uploads. My recommendation is to just try it out as is and if large uploads fail, it’s likely that your reverse proxy is at fault.

Full .htaccess example:

# BEGIN WordPress
# Die Anweisungen (Zeilen) zwischen „BEGIN WordPress“ und „END WordPress“ sind
# dynamisch generiert und sollten nur über WordPress-Filter geändert werden.
# Alle Änderungen an den Anweisungen zwischen diesen Markierungen werden überschrieben.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteRule ^en/wp-login.php /wp-login.php [QSA,L]
RewriteRule ^de/wp-login.php /wp-login.php [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

php_value upload_max_filesize 256M
php_value post_max_size 256M
php_value max_execution_time 300
php_value max_input_time 300

 

Posted by Uli Köhler in Container, Docker, Wordpress

How to set X-Forwarded-Proto header in nginx

Directly after any proxy_pass line add

proxy_set_header X-Forwarded-Proto $scheme;

Typically X-Forwarded-Proto is used together with X-Forwarded-Host like this:

proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;

 

Posted by Uli Köhler in Networking, nginx, Wordpress

How to allow ALL filetypes for Media upload in WordPress

On your own blog or website, you often don’t care about the WordPress upload restriction and just want to be able to upload all filetypes, to just upload any filetype.

In order to do that, append this line to wp-config.php:

define('ALLOW_UNFILTERED_UPLOADS', true);

and then, log out from WordPress and log back in again.

After that, you should be able to upload any file, no matter its file type.

Posted by Uli Köhler in Wordpress

How to grep for WordPress DB_NAME, DB_USER, DB_PASSWORD and DB_HOST in wp-config.php

This grep statement filters out the DB_NAME, DB_USER, DB_PASSWORD and DB_HOST contents from a wp-config.php:

grep -oP "define\(['\"]DB_NAME['\"],\s*['\"]\K[^'\"]+(?=[\'\"]\s*\)\s*;)" wp-config.php

For example, from the wp-config.php line

define('DB_NAME', 'techoverflow');

it will extract techoverflow.

Here are the statements for DB_NAME, DB_USER, DB_PASSWORD and DB_HOST:

DB_NAME=$(grep -oP "define\(['\"]DB_NAME['\"],\s*['\"]\K[^'\"]+(?=[\'\"]\s*\)\s*;)" wp-config.php)
DB_USER=$(grep -oP "define\(['\"]DB_USER['\"],\s*['\"]\K[^'\"]+(?=[\'\"]\s*\)\s*;)" wp-config.php)
DB_PASSWORD=$(grep -oP "define\(['\"]DB_PASSWORD['\"],\s*['\"]\K[^'\"]+(?=[\'\"]\s*\)\s*;)" wp-config.php)
DB_HOST=$(grep -oP "define\(['\"]DB_HOST['\"],\s*['\"]\K[^'\"]+(?=[\'\"]\s*\)\s*;)" wp-config.php)

You can use this, for example, in automatic backup scripts without manually copying the password to the backup script

Posted by Uli Köhler in PHP, Wordpress

How to fix “OTGS Installer, responsible for receiving automated updates for WPML and Toolset, requires the following PHP component(s) in order to function:cURL” on Ubuntu 20.04

 Problem:

Your WordPress installation running on Ubuntu 20.04 shows you this error message:

OTGS Installer, responsible for receiving automated updates for WPML and Toolset, requires the following PHP component(s) in order to function:cURL

Learn more: Minimum WPML requirements

Solution:

You need to install the curl package for your PHP version.

Typically you can use

sudo apt -y install php7.4-curl

Doing this should immediately fix the issue (just reload your WordPress dashboard). In case you’re using PHP 7.2 you need to sudo apt -y install php7.2-curl instead.

In case the issue is still not fixed after doing this, try restarting your webserver (e.g. sudo service apache restart or sudo service nginx restart), try restarting PHP-FPM by using sudo service php7.4-fpm restart or sudo service php7.2-fpm restart or try rebooting your server. In case that doesn’t help either, you need to manually check which PHP instance the wordpress site is using and install the curl package for that PHP instance.

 

Posted by Uli Köhler in PHP, Wordpress

How to remove dashicons CSS from WordPress

WordPress uses dashicons as its primary icon font. However, many themes do not require dashicons on the frontend and hence it’s only used in the admin frontend, i.e. when a user is logged in.

I made a simple plugin to make WordPress load the dashicons CSS only if the user is logged in. For non-logged-in users, the dashicons CSS is removed from the frontend (hence improving the loading speed of your website).

<?php 
/*
Plugin Name: TechOverflow remove dashicons
*/

/**
 * Remove dashicons CSS from the page, only load if user is logged in
 */
function dashicons_admin_only() {
    if(!is_user_logged_in()) {
        global $wp_styles;
        wp_dequeue_style('dashicons');
        // wp_deregister_style('dashicons') causes internal PHP errors in WordPress !
        $wp_styles->registered['dashicons']->src = '';
    }
}
    
add_action( 'wp_print_styles', 'dashicons_admin_only' );

Just create an new folder called techoverflow-no-dashicons inside your wp-content/plugins directory, and save the source code listed above as wp-content/plugins/techoverflow-no-dashicons/functions.php inside. After that, you can modify the code to fit your specific needs.

Note that using this plugin might make your site appear differently if you are logged in. Hence it’s important to check your site when not logged in, e.g. using incognito mode.

Posted by Uli Köhler in PHP, Wordpress

WordPress: How to move script to footer if plugin doesn’t support it

Many WordPress plugins provide you with an option to configure whether scripts are loaded in the header or the footer of the page.

If you want to move a script to the footer for performance reasons, and the plugin doesn’t support it, one option is to just edit the wp_enqueue_script() call in the plugin’s source code and set $in_footer = true.

However, these change won’t survive plugin updates and hence are not recommended for security reasons.

A better option is to write a custom plugin that removes the <script> tag from the head and moves it to the footer. The following file is the functions.php of my custom plugin that moves the <script> tag from the cookie-law-info plugin to the bottom of the page.

<?php 
/*
Plugin Name: TechOverflow Cookie Law to footer
*/

function postpone_script($name) {
    global $wp_scripts;
    // Get attributes from original script
    $thesrc = $wp_scripts->registered[$name]->src;
    $theversion = $wp_scripts->registered[$name]->ver;
    // Remove script from the header
    wp_dequeue_script($name);
    wp_deregister_script($name);
    // Add script to the bottom
    wp_enqueue_script($name, $thesrc, false /* no deps */, $theversion, true /* bottom */);
}

/**
 * Move cookie law javascript to the bottom
 */
function postpone_cookie_law() {
    postpone_script('cookie-law-info');
}
    
add_action( 'wp_print_scripts', 'postpone_cookie_law' );

Just create an new folder called techoverflow-cookie-law-footer inside your wp-content/plugins directory, and save the source code listed above as wp-content/plugins/techoverflow-cookie-law-footer/functions.php inside. After that, you can modify the code to fit your specific needs.

Remember to check your page for issues (javascript errors, delayed rendering of some elements) that appear when you move the javascript to the footer, since some plugins may not be compatible with the script being placed in the footer. Also, you might need to call postpone_script() multiple scripts with different $name argument. Check the original plugin’s wp_enqueue_script() calls for the correct $name (first argument). In case it’s not obvious which wp_enqueue_script() call relates to a specific script, you can also check the version in the src of the original <script> tag (e.g. 1.8.2 in ...?ver=1.8.2 ) and search for that version in the plugin’s folder to find the matching wp_enqueue_script() call.

Posted by Uli Köhler in PHP, Wordpress

WordPress: Enqueue script only if user is logged in

Use this snippet in your wordpress plugin to load a script only if a user is logged in:

function enqueue_my_script() {
    if(is_user_logged_in()) {
        wp_enqueue_script( 'my-script', plugins_url('/my-script.js', __FILE__), false, '1.0', 'all');
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_script');

It does not matter how exactly you use wp_enqueue_script(), just wrap it in a

if(is_user_logged_in()) {
    // Call wp_enqueue_script() here !
}

 

Posted by Uli Köhler in PHP, Wordpress

Minimal WordPress JS plugin example

Also see:
Minimal WordPress CSS plugin example
Minimal WordPress Shortcode plugin example

This plugin adds a static Javascript .js file to WordPress which is loaded in the client.

First, create a directory for your plugin in wp-content/plugins/, e.g. wp-content/plugins/my-js-plugin

Save the following code as functions.php in the plugin folder, e.g. wp-content/plugins/my-js-plugin/functions.php

<?php
/*
Plugin Name: My JS plugin
*/

function my_plugin_enqueue_js(){
    wp_enqueue_script('my-plugin-js', plugins_url('/script.js', __FILE__), false, '1.0.0', true /* in footer */);
}
add_action('wp_enqueue_scripts', "my_plugin_enqueue_js");

Next, save your desired JS file in script.js in the plugin folder, e.g. wp-content/plugins/my-js-plugin/script.js. Example script:

jQuery(document).ready(function() {
    console.info("Your JS plugin works!");
});

Now activate your plugin your WordPress admin area.

Your Javascript will be loaded on each WordPress page until you deactivate the plugin.

Note that if you are using a JS-optimizing plugin like Autoptimize, you might not actually see your JS file as separately loaded script file as it is compiled into the single Autoptimize JS. You javascript will still be loaded on the client!

Posted by Uli Köhler in PHP, Wordpress

Minimal WordPress CSS plugin example

Also see:
Minimal WordPress JS plugin example
Minimal WordPress Shortcode plugin example

This plugin adds a static CSS file to WordPress.

First, create a directory for your plugin in wp-content/plugins/, e.g. wp-content/plugins/my-css-plugin

Save the following code as functions.php in the plugin folder, e.g. wp-content/plugins/my-css-plugin/functions.php

<?php
/*
Plugin Name: My CSS plugin
*/

function my_plugin_enqueue_css(){
    wp_enqueue_style('my-plugin-stylesheet', plugins_url('/style.css', __FILE__), false, '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', "my_plugin_enqueue_css");

Next, save your desired CSS file in style.css in the plugin folder, e.g. wp-content/plugins/my-css-plugin/style.css. Example for a stylesheet:

/* This is just an example CSS and does not have any specific meaning! */
.my-plugin-class {
    font-weight: bold;
}

Now activate your plugin your WordPress admin area.

Your CSS will be loaded for each WordPress page until you deactivate the plugin.

Note that if you are using a CSS-optimizing plugin like Autoptimize, you might not actually see your CSS file as separately loaded stylesheet as it is compiled into the single Autoptimize CSS. You style will still be loaded!

Posted by Uli Köhler in PHP, Wordpress

Minimal WordPress Shortcode plugin example

Also see:
Minimal WordPress JS plugin example
Minimal WordPress CSS plugin example

This plugin creates a simple (static – no parameters) shortcode in WordPress

First, create a directory for your plugin in wp-content/plugins/, e.g. wp-content/plugins/my-shortcode-plugin

Save the following code as functions.php in the plugin folder, e.g. wp-content/plugins/my-shortcode-plugin/functions.php

<?php 
/*
Plugin Name: My shortcode plugin
*/

function my_shortcode( $atts , $content = null ) {
   return '<h2>Shortcode works</h2>';
}
 
add_shortcode( 'my-shortcode', 'my_shortcode' );

Now activate your plugin your WordPress admin area.

You can now create a post or page containing this code:

[my-shortcode][/my-shortcode]

which will be rendered like this:

Shortcode works

Posted by Uli Köhler in PHP, Wordpress

Minimal wordpress plugin example

Also see:
Minimal WordPress JS plugin example
Minimal WordPress CSS plugin example
Minimal WordPress Shortcode plugin example

This is the minimal wordpress plugin – it does not do anything at all, but you can activate it and use it as a basis for your plugins.

First, create a directory for your plugin in wp-content/plugins/, e.g. wp-content/plugins/my-plugin

Save the following code as functions.php in the plugin folder, e.g. wp-content/plugins/my-plugin/functions.php

<?php 
/*
Plugin Name: My plugin
*/

Now you can activate your plugin your WordPress admin area:

Posted by Uli Köhler in PHP, Wordpress

How to force the_date() / get_the_date() to a specific locale

The WordPress function the_date() and get_the_date() always return the date / time in the locale format defined by the language setting of the current WordPress installation.

What if you need to get the date in a specific locale, e.g. english?

Setting the wordpress language to the target locale will successfully achieve this, but will also change the language of other parts of WordPress and is therefore often not an option.

In case you can’t do that and you have to find a programmatic solution, this is my way to force

<?php the_date('r', '', '', TRUE); ?>

to a specific locale ("C" i.e. plain english in this case)

<?php
    setlocale(LC_TIME, "C"); // Set to target locale (in which you want the date to be formatted
    echo strftime("%a, %d %b %Y %H:%M:%S %z", get_post_time('U', TRUE)); // Parse wordpress time and format it again
    setlocale(LC_TIME, "de_DE"); // Set back to the original locale!
?>

Since the_date() ignores setlocale() calls, we use PHP’s strftime() to work around this.

First, we set the target tocale (the locale for the date to be formatted in) using setlocale(LC_TIME, "C"); Replace "C" by your target locale! "C" is a good choice if you want plain english.

Then, we get the post date & time (the same date & time that is used / returned by the_date() & get_the_date()) using get_post_time('U', TRUE); . "U" means return as Unix timestamp. TRUE is very important here since it tells get_post_time() to return the timestamp as UTC. If you don’t use TRUE here, your dates will be offset by several hours (depending on your timezone) in case they are not UTC already.

After that, we run strftime() to format the timestamp. You need to insert your desired format string here. In my case, the format string is "%a, %d %b %Y %H:%M:%S %z" which is a RFC2822 date. Note that using this method, the timezone (%z) will always be +0000 since it’s formatted as a UTC date. However, the timezone offset will be correctly accounted for.

As a last step, we re-set the original locale using setlocale(LC_TIME, "de_DE"); . This avoids affecting other function, e.g. in other plugins. You need to insert the correct (original) locale here. In my case, I know the correct locale is "de_DE", but in your case this may differ.

Posted by Uli Köhler in PHP, Wordpress

How to get path to the wp_content directory in WordPress plugin

Problem:

You are writing a wordpress plugin in which you need the path to the wp-content directory on the filesystem.

Solution:

Use the WP_CONTENT_DIR constant.

$path_to_wp_content = WP_CONTENT_DIR; // e.g. "/var/sites/techoverflow.net/wp-content"

Note that WP_CONTENT_DIR has no trailing slash.

Use WP_CONTENT_DIR . "/" like this

$path_to_wp_content = WP_CONTENT_DIR . "/"; // e.g. "/var/sites/techoverflow.net/wp-content/"

to get the path to wp_content including a trailing slash.

Posted by Uli Köhler in PHP, Wordpress

How to fix WP_Query not listing any posts

Problem:

In your custom WordPress plugin or theme you have code like

$query = new WP_Query( );
while ( $query->have_posts() ) {
        $query->the_post();
        // ... your code to process the post ...
}

But $query->have_posts() is always false and the loop is never executed.

Solution:

WP_Query works only if you use an appropriate query. Using no query at all is not equivalent to list all posts!

This is likely what you want to do:

$query = new WP_Query(array('post_type' => 'post'));
Posted by Uli Köhler in PHP, Wordpress

How to recover WordPress admin access if you only have FTP access

There are well-documented solutions to recover the wordpress admin access if you have MySQL, phpMyAdmin or shell access.

This solution shows you how to create a new admin user if you don’t know the admin username or password and you don’t have any form of MySQL or shell access (only FTP access is required).

Step 1: Identify your currently active theme

This can be done by looking at the source code of your homepage (go to your domain, then Ctrl+U to show the source) and then Ctrl+F-search for wp-content/themes. It will show hits like https://mydomain.de/wp-content/themes/twentyfifteen/style.css. This means the currently active theme is twentyfifteen.

Step 2: Create a new admin user using functions.php

Now open your FTP software (I recommend FileZilla) and find your wp-content folder. Inside wp-content, go to themes and then open the folder of your currently active theme.

If the currently active theme is not listed in your wp-content/themes folder, you might have the wrong wp-content folder. Check if there are any other folders around.

When you have found your theme folder, edit functions.php and, just after the first <?php, add this block of code:

function wpb_admin_account(){
    $user = 'newadmin';
    $pass = 'saiquae9shahZus6eeri3feNae8gie';
    $email = '[email protected]';
    if ( !username_exists( $user )  && !email_exists( $email ) ) {
        $user_id = wp_create_user( $user, $pass, $email );
        $user = new WP_User( $user_id );
        $user->set_role( 'administrator' );
    }
}
add_action('init','wpb_admin_account');

Be sure to replace the username, password and email! I recommend to use a new random password and a non-generic username! The username you enter here must.

Save the file and upload it to the server.

After that, goto your homepage and reload once (this will create the new user).

Then, try to login using your newly created user (go to e.g. https://my-domain.com/wp-admin to do so!). If it doesn’t work, check if you edited the functions.php for the correct theme and try to use a different username!

Step 3: Delete the code we just created

If you just leave in the code, this will create a potential security risk. So I recommend deleting it right away!

Also, be sure to delete any admin users you don’t need afterwards.

 

Posted by Uli Köhler in PHP, Wordpress

How to use the old ‘classic’ editor in WordPress 5.0

TL;DR: Install & activate the Classic Editor plugin.

WordPress 5.0 introduced the new Gutenberg editor as the new default editor.

In order to activate the old or classic editor by default again, go to Plugins -> Install and enter classic editor in the search bar at the top right.

The first result at the top left should be this plugin:

Click Install now in the top right of that plugin to install the plugin. After it is done installing, click Activate. After doing that, the classic editor will be active by default.

Posted by Uli Köhler in Wordpress

Find WordPress category ID by category name using SQL

Problem:

You need the wordpress category ID for a given category name (e.g. My category), e.g. for a shortcode filter.

Solution:

You can use a SQL statement to find the correct category for your term (i.e. the category name, My category). Run this statement in your database administration interface, e.g. phpmyadmin.

SELECT termtax.term_taxonomy_id FROM wp_terms AS terms JOIN wp_term_taxonomy AS termtax ON terms.term_id = termtax.term_id WHERE terms.name = "My category"

Replace My category at the end by the category name you’re looking for.

Posted by Uli Köhler in Wordpress

Get the original language post ID for WPML-translated posts

Problem:

You have a post that has been translated into multiple languages using WPML.
You want to find out the ID of the original post, i.e. the equivalent post in the source langugae.

Solution:

As far as I know, there is no WPML API for this. You can, however, use $wpdb in order to query the database directly.

Here’s the SQL statement:

SELECT trans2.element_id
FROM wp_icl_translations AS trans1
INNER JOIN wp_icl_translations AS trans2
ON trans2.trid = trans1.trid
WHERE trans1.element_id = #myid#
AND trans2.source_language_code IS NULLs

where #myid# is the ID of your current (possibly translated) post.

The algorithm works like this:

  1. Find out the  translation ID (column trid) for the current post by selecting the row for the given post ID (column element_id)
  2. Find all rows with the same translation ID
  3. Select only the row where the source language is NULL – this is the original post.

You can use it like this:

global $wpdb;
$orig_lang_id = $wpdb->get_var("SELECT trans2.element_id FROM wp_icl_translations AS trans1 INNER JOIN wp_icl_translations AS trans2 ON trans2.trid = trans1.trid WHERE trans1.element_id = ".get_the_ID()." AND trans2.source_language_code IS NULL");

and then use $orig_lang_id where required. Note that $orig_lang_id is NULL if the query fails. The main reason for the query to fail is if there is no entry for the given post ID in the wp_icl_translations table.

If the current post is the source post, $orig_lang_id is the same as get_the_ID(), i.e. the current ID of the post.

In my test, the code still works (i.e. returns the correct post ID) even when creating brand-new entry without any translations being present.

Posted by Uli Köhler in Wordpress