Hide tabs in wordpress backend if user is not admin

This simple and easy script will hide the media tab in the backend of wordpress if the current user that is logged-in is not admin.
we use css to hide the tabs.

if ( !is_super_admin() ) {
 add_action('admin_head', 'hideElement');
 function hideElement() {
   echo '<style>
   #menu-media{
    display:none !important;
   }    
    </style>';
 }
}

note that this method is not the best way to hide the tabs in our wordpress backend. It is not bulletproof and secure.

Run a css depending on the current logged in username

This script will add custom css on our wordpress backend if the current logged in user name is "guest".

$current_user = wp_get_current_user();
if ( $current_user->user_login == "guest" ) {
 add_action('admin_head', 'hideMenus');
 function hideMenus() {
   echo '<style>
   #menu-media,#menu-comments,#menu-users,#menu-posts{
    display:none !important;
   }    
    </style>';
 } 
}

Get the width and height of a div using jquery

This code shows how to get the width and height of a container, We must know the css selector of the div in order to do this.

//get the class or id of the container
 $('.container').width();
 $('.container').height();

Add button next to add media in create post wordpress

PREVIEW:

// add button next to add media button
function add_my_media_button() {
    echo 'Custom button next to Add media';
}
add_action('media_buttons', 'add_my_media_button');

Social media sliding menu on hover using css only

This social media menu is purely css3.
Preview:
We used css3 for the transition and font awesome for the icons.
note: You can copy the css codes on the css tab of the live demo(js fiddle).

Sticky menu depending on the specified height

In this tutorial i will show you how to create a menu that will stick if a certain height is triggered using jquery.
We will also assume that we have a 1st layer that is dynamically changing its height.
HTML example

<div id='div1'> Scroll Down </div>
<div id='menuLayer'>Home , About us , Contact Us</div>
<div id='content'>
The quick brown pusa
</div>

CSS example

#div1{
    width:100%;
    height:800px;
    background:#333;  
    text-align:center;
    Color:#fff;
}

#menuLayer{
    width:100%;
    height:50px;
    background:#4679BD;    
    top:0px;
    text-align:center;
    line-height:50px;
}

#content{
    width:100%;
    min-height:2000px;
    background:#D8E5CE;    
}

First we will compute the 1st div

//get the height of div1 
firstLayer = $('#div1').height();

After that we will determine if a user is scrolling

$(window).on('scroll', function() {
    //get the current location of the page
    var y_scroll_pos = window.pageYOffset;
});

Then we will determine if it reaches the end of our first div, we will change the css of the menu making it relative to fixed

    //change to fixed if it reaches the bottom of #menuLayer
    if(y_scroll_pos > firstLayer) {
        $('#menuLayer').css( "position", "fixed" );         
    }
     //change to relative if it reaches the top most of #menuLayer
    if(y_scroll_pos < firstLayer) {
        $('#menuLayer').css( "position", "relative" );
    
    }

Check the demo to see all codes sum up.

LIVE DEMO

Youtube auto convert to embed code and thumbnail

I created an script that will auto generate all the links and the different types of thumbnail that is generated by youtube.
just simply copy and paste the youtube link in the input field.