WPML: Getting automatic updates while blocking external HTTP requests

Due to security reasons I’m blocking external HTTP requests on many of my sites through a setting in wp-config.php. See this article for further exploration on working security through wp-config.php. Here’s the setting:

define( 'WP_HTTP_BLOCK_EXTERNAL', true );

This measure prevents a couple of plugins – mainly premium plugins that are not available through the offical WordPress plugin repository – from fetching their updates.

This was the case as well for the popular WPML multi-language plugin.

The fix is easy – by allowing WordPress to call only certain servers. In this case it is the server d2salfytceyqoe.cloudfront.net – as detailed here in the WPML support forums. This is how it looks in the wp-config.php:

define( 'WP_ACCESSIBLE_HOSTS', 'd2salfytceyqoe.cloudfront.net' );

You probably want to add more servers here, like *.wordpress.org et al.

Advertisements

Implementing the Breadcrumbs from Yoast SEO into the Zuki theme by Elmastudio

I often work with themes by Elmastudio for client projects. Therefore, I put one of their themes, Zuki, into use for a website of a local hairdresser.

The themes by Elmastudio are pretty light-weight – which also means that they don’t have support for too many plugins out of the box.

For better SEO and an improved user experience I wanted to display breadcrumbs on the pages of my Zuki website. The popular Yoast SEO plugin has a breadcrumb functionality baked into the plugin – therefore was no need for an extra plugin or coding this by myself. There is just a little copy & paste needed in order to achieve this.

Continue reading “Implementing the Breadcrumbs from Yoast SEO into the Zuki theme by Elmastudio”

Removing Emoji & Emoticon Support from WordPress ;-)

Apparently, since its 4.2 update WordPress automatically converts text based smilies like “;-)” into emoji images like 😉

Besides being problematic regarding loading times (the script is loaded wether you use emojis or not) – the images might not fit the overall asthetics and design of the site while a text-only smiley might be preferred.

I started out by using WordPress hooks as described here:

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

…and amending this as described here:

function disable_wp_emojicons() {

  // all actions related to emojis
  remove_action( 'admin_print_styles', 'print_emoji_styles' );
  remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
  remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  remove_action( 'wp_print_styles', 'print_emoji_styles' );
  remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
  remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
  remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );

  // filter to remove TinyMCE emojis
  add_filter( 'tiny_mce_plugins', 'disable_emojicons_tinymce' );
}
add_action( 'init', 'disable_wp_emojicons' );

  // disable TinyMCE emojicons
function disable_emojicons_tinymce( $plugins ) {
  if ( is_array( $plugins ) ) {
    return array_diff( $plugins, array( 'wpemoji' ) );
  } else {
    return array();
  }
}

  // remove the DNS prefetch 	
add_filter( 'emoji_svg_url', '__return_false' );

But this did not turn my text smiley back into plain text.

Then I discovered the plugin “Keep Emoticons as Text” which does the trick with a single line of code:

add_filter( 'option_use_smilies', '__return_false' );

You can easily put all above and this last line in the functions.php of your child theme – or, even better, in your own functional plugin. And you’re done 😉

Salient Theme: Conflict in Safari with Bootstrap 3 styles in Caldera Forms

I recently detected a CSS conflict in Safari when using the popular Caldera Forms plugin.

While other Browsers work fine – in Safari (and Cliqz) the input that a frontend user enters into form fields is cut off so you only see the very bottom of the letters.

The problem is probably the same as described in this ticket: https://themenectar.ticksy.com/ticket/899910/

The CSS fix provided there by the theme author did not work for me though.

Caldera Forms adds Bootstrap 3 styles to its forms by default, but this can be deactivated. This leaves the from somewhat unpretty but fixes the problem.​

The CSS code in question seems to be the height defined by the Bootstrap styles:

.caldera-grid .form-control {

}

My workaround: I disabled the Bootstrap styling in the settings of Caldera Forms and extracted the styles that were necessary to get that nice styling and put them into my child theme CSS file.

Here’s the code I used:

.caldera-grid label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.caldera-grid .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.caldera-grid .form-control {
    width: 100%;
    /* height: 34px; commenting out the height definition */
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.caldera-grid textarea.form-control {
    padding-right: 4px;
    height: auto;
}

.caldera-grid .form-control, .caldera-grid output {
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    display: block;
}


.caldera-grid .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc!important;
}

.caldera-grid .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 2px;
    user-select: none;
}

Addition from August 01, 2017: A similar conflict appears when using the Toolset suite of plugins by OnTheGoSystems, with Types being its most popular plugin. Toolset is loading loading its own instance of Bootstrap styles, apparently. The fix is easy: Just change to Bootstrap loading presets in the WordPress Dashboard under Toolset > Settings. In my case, I selected “The theme or another plugin is already loading Bootstrap 3.0” in order to get Caldera Forms back to working.

Contact Form 7 & Lay Theme: Show Radio Buttons in Chrome & Safari

Apparantly, some WordPress theme authors (accidentally?) override the display of radio buttons and checkboxes of the popular Contact Form 7 plugin in Chrome and Safari browsers.

I recently encountered this problem with the rather extra-ordinary Lay Theme.

Thanks to these sources (1, 2) I found a solution that seems to be working across browsers.

.wpcf7 input[type="checkbox"]{
-webkit-appearance: checkbox;
-O-appearance: checkbox;
-moz-appearance: checkbox;
}

.wpcf7 input[type="radio"]{
-webkit-appearance: radio;
-O-appearance: radio;
-moz-appearance: radio;
}

User Avatars: Adding an Author’s Photo with a Plugin

I guess it’s due to the major role that Automattic plays for the WordPress community that WordPress out of the box still doesn’t support local user avatars. Instead, users have to register with Automattic’s Gravatar to have a profile image displayed on their website (as long as the theme in use supports this). This is weird and a hassle.

While this is most probably solved with a little coding of your own, it’s also a niche for plugins – especially if you want your users to upload their pictures themselves.

The plugin with the most active installations, WP User Avatar, seems to do the job pretty good. Not acceptable in my opinion though is the fact that the plugin adds a new top level menu item in the WordPress admin bar – instead nesting into “Settings”, where settings like these should go.

wpuseravatar-settings
The settings page of the plugin WP User Avatar (picture by wpbeginner.com)

This is really intrusive and displays a sense of entitlement by the developers that I can’t really understand. Of course, there are ways to clean up the WordPress dashboard – but why clutter it up in the first place? I really don’t get why this plugin is so widely recommended.

Enter the competition: The very similar named WP User Avatars has 10.000+ active installs and is actively maintained – by widely known WordPress core contributer John James Jacoby. This plugin may has less settings than the afore-mentioned one but it’s light-weight, fast and does the trick.

WPML: Translating a User Bio

Many themes display the biographical info about authors that can be entered through the User Management section in the WordPress Dashboard. Whenever you run a multi-lingual site you obviously want the author info to be translated as well.

The poplular multi-language plugin WPML (affiliate link) does support this – but you don’t only have to enable “String Translation”, you have to explicitly make WMPL scan the author info as well. Just follow the steps below and easily translate your user biographies. This thread from the WPML support forum brought me on the right track.

  • in the WordPress Dashboard, navigate to WPML > String translation
  • on the bottom right of the page there will be a box named “More Options”
    – click on the “edit” link next to “Translating users of types:” and select the checkbox for “Author” (or the user role you want the biography translated for), then click “Apply”
  • now to to WPML > Theme and plugins localization
  • (If you haven’t activated String Translation yet, select “Translate the theme and plugins using WPML’s String Translation”)
  • after the initial options and lists, find the button “Scan the theme for strings” and click it
  • go again to WPML -> String Translation
  • on the filter field “Select strings within domain”, select “Authors” (or the user role you previously selected to be scanned). The page will then refresh itself and the list will now contain all author’s fields available for translation, including the biography/description.