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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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:
1 2 3 |
$(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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(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
1 2 3 4 5 6 7 8 |
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.
1 2 3 4 5 6 7 |
(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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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:
1 2 3 4 5 |
// 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!
1 2 3 4 5 |
<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> |
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) ).
Next, to use it you have to paste it in Terminal.
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:
1 2 3 4 |
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.
On my gmail address I got a score of 7/10 and below I can see why. That helps!
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.
1 2 3 |
.clipped-text { text-overflow: ellipsis; } |
It has to be applied to block container elements (or inline-block).
How does it look?
To make it work you have to add also white-space: nowrap;
and overflow: hidden;