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 w3schools.com:

.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!

Advertisements

Complying with the new EU data privacy law GDPR / EU-DSGVO when using WordPress

As of May 2018, there will be a new European data privacy law in effect. The so-called “General Data Protection Regulation”, or short GDPR, will be applicable not only to any website running on servers within the European Union but also to any websites with visitors from the EU. This post will mainly cover the German perspective where the GDPR is also know as “EU-Datenschutz-Grundverordnung” or EU-DSGVO.

As of now there seems to be some insecurity and confusion about how to prepare for this new regulation. As non-compliance can result in hefty fines – and at least in Germany, fishy lawyers quickly throw around pricey cease-and-desist-letters (“Abmahnungen”) – compliance seems to be inevitable.

To my surprise there aren’t that many ressources about WordPress-specific solutions available yet. This post will be an on-going collection of links to respective ressources and will subsequently be updated in the future.

I’m happy about any suggestions in the comments!

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.

***
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', 'api.wp-types.com, d7j863fr5jhrr.cloudfront.net' );

Premium WordPress plugins from CodeCanyon: Leaping into the dark

My aim was to create a grid that is automatically generated from a custom post type (CPT), and having the CPT content displayed in a modal window/popup/lightbox.

I searched thoroughly through the usual blog posts and plugin recommendation lists. One plugin I came across again and again was “Media Grid“. This premium plugin that is sold through CodeCanyon.net by Envato seemed to have the respective functionality aboard – among many more features.

Maybe I missed this in the item description and I didn’t search through the comments before buying (like this one)…

But, as I found out after buying and installing the plugin and working my way through the rather unusual user interface – the grid created by “Media Grid” can not be automatically populated. As far as I can see, all grid items must be created one by one, manually. Which makes sense if you are building a non-dynamic portfolio-type grid with many different item types.

In my case thought the plugin is useless as I need my grid to filled up dynamically with around 35 items the least. By the way, I could not get my custom fields to be displayed in the lightbox, too. But that might be another story.

The plugin functionality seems pretty far reaching and well thought through but documentation needs an update as I could only find a few narrated videos that show an outdated UI. The plugin does not have a free version in the WordPress repository I wasn’t able to test it out beforehand. Therefore: Money down the drain in my case as Envato’s refund policy is, well, rather off-putting.

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.