Changing image size and responsive content alignment in the Divi Blurb Module

I’m using the popular Divi monster theme on a client site right now and I wanted to change the behaviour of the Blurb Module where you can combine an image or icon with a headline and some text.

While the module sections allow you to change the position of the image, it does not let you change the size of it – if you are using an image of your own instead of the provided icon font.

The following code changes the size of the image:

.et_pb_blurb_position_left .et_pb_main_blurb_image {
    width: 120px; /*put desired image width here+/

So far, so nice. The problem then was that the text content next to the image stayed inline even on mobile, which rendered the column really narrow. Therefore, I gave the image its own line and made the content items stack on top of each other with the following CSS, using the breakpoints provided here by Elegant Themes. I also removed the padding to the left of the text container as to have it align nicely with the side of the image.

/*** Applying styles only to screens up to 767px width ***/
@media all and (max-width: 767px) {

.et_pb_blurb_position_left .et_pb_main_blurb_image {
    display: block!important;
    width: 100%;

.et_pb_blurb_position_left .et_pb_blurb_container {
    padding-left: 0!important;

Styling the Collapse-O-Matic plugin for WordPress

I used the Collapse-O-Matic plugin for a recent project in order to display content with a so-called accordion effect: a visitor has to click on a headline or different element to reveal more content beneath.

The Collapse-O-Matic plugin stood out through its number of active installations (70,000) and by having a pretty large community around it that actively is supporting the plugin.

Just a few customizations were necessary.

I wanted to customize the arrows which let’s you open and close the “accordion”. As they are included as image files I made new ones in the format of 12×16px. In order to not having them overwritten when updating the plugin I uploaded them to an “/images” folder in my child theme and added the following to the style.css of my child theme (in order with the instructions by the plugin author here):

.collapseomatic {
    background-image: url(images/arrow-down.png) !important;
.colomat-close {
    background-image: url(images/arrow-up.png) !important;

I also wanted to move the arrows down a notch. As these are included as background images I used the CSS background-position property as detailed here on

.collapseomatic {
    background-position: 0 6px!important; 
.colomat-close {
    background-position: 0 6px!important; 

Further customizations included indenting the content a little bit from the left and making some room to the bottom of the expanded content:

.collapseomatic {
    padding: 0 0 10px 22px!important;

.collapseomatic_excerpt, .collapseomatic_content {
    margin-left: 22px!important;
    padding: 0 0 16px 0!important;

Overall, a pretty good experience with this plugin!

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 – as detailed here in the WPML support forums. This is how it looks in the wp-config.php:

define( 'WP_ACCESSIBLE_HOSTS', '' );

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

UPDATE NOV. 25, 2017:

In order to reveive updates for the popular Toolset plugin suite by the makers of WPML you need to whitelist the following two servers, according to their support:

define( 'WP_ACCESSIBLE_HOSTS', ',' );

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:

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;