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;
}
}
Advertisements

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!

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!

[New additions in March 2018]

    • “Worried about WordPress and GDPR? Start Here” – Pagely.com
    • “How GDPR Will Change The Way You Develop” – SmashingMagazine.com
    • “A Quick Guide to Data Protection Regulations in 2018″ – ElegantThemes.com
    • New Team Forms to Facilitate GDPR Compliance in WordPress Core – WP Tavern

     

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 😉