:)

Searching through my swag stash just found this letter from @per_esbensen Isn't it cool? pic.twitter.com/DMUZsFSzfC

— Bogdan Dragomir (@BogdanDragomir) February 8, 2018

Hide administrator users in from non admin users in user list using pre_user_query

<?php
add_action( 'pre_user_query','hide_admin_users_from_non_admin' );

function hide_admin_users_from_non_admin( $user_query ) {

	global $current_user;

	if ( ! user_can( $current_user, 'administrator' ) ) {
		global $wpdb;
		$user_query->query_where = str_replace(
			'WHERE 1=1',
			"WHERE 1=1 AND {$wpdb->users}.ID IN (
              SELECT {$wpdb->usermeta}.user_id FROM $wpdb->usermeta
              WHERE {$wpdb->usermeta}.meta_key = '{$wpdb->prefix}capabilities'
              AND {$wpdb->usermeta}.meta_value NOT LIKE '%administrator%' )",
			$user_query->query_where );
	}
}
?>

<?php

add_action( 'pre_user_query','hide_admin_users_from_non_admin' );

function hide_admin_users_from_non_admin( $user_query ) {

global $current_user;

if ( ! user_can( $current_user, 'administrator' ) ) {

global $wpdb;

$user_query->query_where = str_replace(

'WHERE 1=1',

"WHERE 1=1 AND {$wpdb->users}.ID IN (

SELECT {$wpdb->usermeta}.user_id FROM $wpdb->usermeta

WHERE {$wpdb->usermeta}.meta_key = '{$wpdb->prefix}capabilities'

AND {$wpdb->usermeta}.meta_value NOT LIKE '%administrator%' )",

$user_query->query_where );

}

Trigger “Changes you made may not be saved” message in WordPress edit post

If you add custom content in admin using ajax you probably want to trigger an alert when user wants to reload page or navigate on other page.

This is an event beforeunload bind to $(window)

If you use plain beforeunload you will have issues on WordPress because in edit post WordPress uses beforeunload.edit-post and when you press update or publish it will not unbind that event. To make it work use the code below.

Add this to your trigger in jQuery:

$(window).on( 'beforeunload.edit-post', function() {
    return true;
})

$(window).on( 'beforeunload.edit-post', function() {

return true;

})

How to add target _blank attribute to all external anchors in page with JavaScript and JQuery in one single line

(function($) {

jQuery( document ).ready(function() {
    add_target_blank_to_external_links();
});

////////////////////////////////////////////////////////////////////////
//
//  @function - Adds target _blank to all external links
//
////////////////////////////////////////////////////////////////////////

function add_target_blank_to_external_links(){
    // This is the single line advertised in title ;) 
    $('a[href^="http://"], a[href^="https://"]').not('a[href*="'+location.hostname+'"]').attr('target','_blank');
}

})(jQuery);

(function($) {

jQuery( document ).ready(function() {

add_target_blank_to_external_links();

});

////////////////////////////////////////////////////////////////////////

// @function - Adds target _blank to all external links

////////////////////////////////////////////////////////////////////////

function add_target_blank_to_external_links(){

// This is the single line advertised in title ;)

$('a[href^="http://"], a[href^="https://"]').not('a[href*="'+location.hostname+'"]').attr('target','_blank');

}

})(jQuery);

What I have learned today 2016.10.14

#1 A simple method to test if is touch device in JavaScript

function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}

function is_touch_device() {

try {

document.createEvent("TouchEvent");

return true;

} catch (e) {

return false;

}

And if you combine that with a simple screen width conditional it can become something useful.

(function($) {
    jQuery( document ).ready(function($) {
        if ( $(window).width() > 768 && is_touch_device() ) {
            //JQUERY, DO SOMETHING COOL!
        }
    });
})(jQuery);

(function($) {

jQuery( document ).ready(function($) {

if ( $(window).width() > 768 && is_touch_device() ) {

//JQUERY, DO SOMETHING COOL!

}

});

})(jQuery);

Has anyone a better idea? Post it in the comments. I would love to hear it.

#2 Have you wondered what WordPress script localization does?

The cleanest method to pass variables from Php to JavaScript in WordPress is by using localization function.

Something like this used in your functions.php file:

<?php

/**

* Pass php to javascript.

function custom_scripts() {

$firstname = "John";

$lastname = "Doe";

$website = "johndoe.com";

wp_register_script( 'custom-actions', get_stylesheet_directory_uri() . '/js/actions.js', array(), '20160920', true );

$translation_array = array(

'firstname' => $firstname,

'lastname' => $lastname,

'website' => $website,

'ajaxurl' => admin_url('admin-ajax.php')

);

wp_localize_script( 'custom-actions', 'settings', $translation_array );

wp_enqueue_script( 'custom-actions' );

}

add_action( 'wp_enqueue_scripts', 'custom_scripts' );

In JavaScript you would call them like this:

// VARIABLES FROM PHP

var firstname = settings.firstname;

var lastnmae = settings.lastname;

var website = settings.website;

var ajaxurl = settings.ajaxurl;

The above technique simply works and it’s really useful but have you ever wondered what happens under the hood?

Behold!

<script type='text/javascript'>
/* <![CDATA[ */
var settings = {"firstname":"John","lastname":"Doe","website":"johndoe.com","ajaxurl":"http:\/\/www.johndoe.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>

/* <![CDATA[ */

var settings = {"firstname":"John","lastname":"Doe","website":"johndoe.com","ajaxurl":"http:\/\/www.johndoe.com\/wp-admin\/admin-ajax.php"};

/* ]]> */

</script>

Pfff, no magic here 🤔

What I have learned today 2016.10.13

#1 Copy XMLHttpRequest as cURL command

It comes a day in a developer’s life when he needs to replicate a cURL command that runs in the browser. The reasons can be numerous and I’m not here to judge anyone. Anyway, I find it useful for prototyping purposes when working with API’s.

So you know some magic is running in the background and you want to take a look “under the hood”.

You can try this in Chrome or Firefox (mine was Version 53.0.2785.143 (64-bit) ).

save-as-curl

Next, to use it you have to paste it in Terminal.

execute-curl

That’s just a basic example but imagine how helpful it can be!

What I have learned today 2016.10.11

#1 Global variables / objects in JavaScript

In a website page, you can see all global variables available by running Object.keys(window); in console.

What I have learned today 2016.10.09

#1 WordPress in a subfolder on Nginx

I’ve tried to install my blog as a WordPress install in a subfolder called /blog and I found that Nginx doesn’t do it automatically so in your /etc/nginx/sites-available/yoursite.com you have to add the following:

location /blog {
    index index.html index.htm index.php;
    try_files $uri $uri/ /blog/index.php?$args
}

location /blog {

index index.html index.htm index.php;

try_files $uri $uri/ /blog/index.php?$args

}

What I have learned today 2016.09.30

#1 Test the Spammyness of your Emails with mail-tester.com

A nice tool to get your email spam score. It works super simple, when you first open the site you see a random email address and you’re requested to send a test email from the email address you want to test to that @mail-tester.com email.

After you do that you check your score by clicking the big button on the screen.

Mail-tester.com website | Bogdan Dragomir - WordPress Consultant

On my gmail address I got a score of 7/10 and below I can see why. That helps!

Spam score results on Mail-tester.com | Bogdan Dragomir - WordPress Consultant

Check it here www.Mail-tester.com

What I have learned today 2016.09.29

#1 The text-overflow CSS property

This is super useful when you don’t have enough space for some content. For example a title, a description, an excerpt.

What does it do? It determines how overflowed content that is not displayed is clipped and it adds this nice ... at the end.

.clipped-text {
    text-overflow: ellipsis;
}

.clipped-text {

text-overflow: ellipsis;

}

It has to be applied to block container elements (or inline-block).

How does it look?

This is my clipped text content which is bigger than the container where it is added and using text-overflow:ellipsis it make this nice clipping

To make it work you have to add also white-space: nowrap; and overflow: hidden;

Published

February 8, 2018

:)