My Monkey Do

A Log of Coding Solutions

Coding

Pseudo Selector First Child of Class

by

Problem

How do you apply a style to only the first element with a certain class?


.just-this-one {

background:blue;

}



<div class="top">

<div class="not-this-one">not this one</div>
<div class="just-this-one">just this one</div>
<div class="just-this-one">but not really</div>

</div>

:first-child does not do this, that just selects the very first child no matter what the class is.

:first-of-type doesn’t even do this.  but you would think it does, but “type” here implies the HTML element type like “div”, “p”, etc.

 

Solution

Use the tilde “~” to “undo” styles on elements where the class previously appeared.  So first apply the style you want to all .just-this-one elements.  Then apply “undo” that style for all subsequent elements.


.just-this-one {

background:blue;

}

.just-this-one ~ .just-this-one {

background:none;

}

This genius solution found on stack overflow (not the accepted answer):

http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class

 

Additional note:  If you have a pseudo selector like :before, use something like the code below to write content before all li elements except the first one.


.menu li:before {
content: '';
}

.menu li ~ li:before {
content: "\002F\0020\002F";
color: #aaaaaa;
}

 

 

Vertically Center Anything With Dimensions

by

One way to easily vertically center a div is to set it to be absolute, set the width, height and then the top, bottom, left and right all equal to 0.  Something like this:


.vertically-centered-box {

  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100px;
  height:100px;
  margin:auto;

}

From: http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally

WordPress Heartbeat API

by

I could not find any extensive documentation on the WordPress Heartbeat API, so I am writing here to remember what I have learned through various tutorials throughout the web.

The Heartbeat API is written in Javascript.  Think of it like a javascript function that gets run every 60 seconds (depending on the interval) which sends data via POST to the server and then the server returns a response.  All of which you can easily hook into.  It was introduced in WordPress 3.6.

Quick Examples

PHP


// server received whatever parameters from when javascript triggered the "heartbeat-send" event.
function myplugin_heartbeat_received( $response, $data ) {
if ( !empty( $data['myplugin_id'] ) ) {
$response['myplugin_got_it'] = true;
}
return $response;
}
add_filter( 'heartbeat_received', 'myplugin_heartbeat_received', 10, 2 );

Javascript


jQuery(document).ready(function($) {
wp.heartbeat.interval= 15;
// set some parameters when it's time to send data to the server
$(document).on('heartbeat-send.myplugin', function(e, data){
data['myplugin_id'] = my_id;
});

// do something when your page gets a response.
$(document).on('heartbeat-tick.myplugin', function(e, data){

if ( data.hasOwnProperty( 'myplugin_got_it' ) ) {
refreshPage();
}
});

});

Heartbeat Pulse Interval

The ‘heartbeat_settings’ filter gets applied in the ‘init’ hook, priority 0 in wp_default_scripts in wp-includes/script-loader.php.  So if you do use the hook on the server-side and want to only run it on certain pages, be prepared to parse the URL because a lot of WP functions aren’t available at that time.  Alternatively you can set the interval in javascript with wp.heartbeat.interval(15) where 15 is seconds.  Note some other tutorials say to use ‘fast’, ‘standard’, ‘slow’, but that didn’t work for me for some reason.

 

Tutorials

I found these tutorials to be the most helpful.

http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started–wp-32446

http://code.tutsplus.com/tutorials/the-heartbeat-api-changing-the-pulse–wp-32462

http://code.tutsplus.com/tutorials/heartbeat-api-using-heartbeat-in-a-plugin–wp-32496

 

edit_users capability on multisite

by

No matter how hard you try, if you add the edit_user capability to a user on multi-site and that user is not a super-admin, the user will not have the edit_user capability.  This is hard-coded into WP_User’s map_meta_cap.  There is a filter so after it’s all done, you can search for it and take it out if you want.