How to get post thumbnail in wordpress?

<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail();
} 
?>
<?php the_content(); ?>

this is the default method to retrieve post thumbnail

<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail(array(150,150));
} 
?>
<?php the_content(); ?>
this is the method which is used to alter that thumbnail like size in array 150px & 150px

How to hide toggle div when clicking anywhere on the page?

HTML

<div id="theDiv">Some contents</div>
<div id="showDivBtn">Toggle link</div>

STYLE

<style>
#theDiv {
    width: 50px;
    height: 50px;
    background: #e9e9e9;
}
#showDivBtn {
    margin-top:100px;
    width: 100px;
    height: 50px;
    cursor: pointer;
}

</style>

SCRIPT

<script>

$('.dropdown').fadeOut();

$(document).on('click', function(e) {
    if ( $(e.target).closest('.gbtn').length ) {
        $(".dropdown").fadeIn();
    }else if ( ! $(e.target).closest('.dropdown').length ) {
        $('.dropdown').fadeOut();
    }
});

</script>

How to add css for custom pages

<?php if ( is_page(array('somepage1', 'somepage2', 'somepage3'))) {
echo ' class="myclass" '; } ?>


or

<?php 
if ( is_page (blog)){ 
?>

<style>
.wrapper
{
background:black !important;
}
</style>

<?php
}
?>

This is custom css for blog page only.

jQuery event when select option

<select id='list'>
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
</select>

<script>
$(document).ready(function(){
$('#list').change(function() {
    if ($(this).val() === '2') {
        // Do something for option "b"
    }
});
});
</script>

On click scroll to div

Jquery Smooth Scroll To DIV - Using ID value from Link

Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="searchbycharacter">
    <a class="searchbychar" href="#" data-target="numeric" onclick="return false">0-9 |</a> 
    <a class="searchbychar" href="#" data-target="A" onclick="return false"> A |</a> 
    <a class="searchbychar" href="#" data-target="B" onclick="return false"> B |</a> 
    <a class="searchbychar" href="#" data-target="C" onclick="return false"> C |</a> 
    ... Untill Z
</div>


/*-----where data-target="this is your div id name" ------*/ 

/*-----start making your divisions below --------*/

<div id="A">
    <p>some content</p>
</div>

<div id="B">
    <p>some content</p>
</div>

<div id="C">
    <p>some content</p>
</div>

... Untill Z

As for the jquery :

$( '.searchbychar' ).on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});