Skip to content

Instantly share code, notes, and snippets.


Shahidul Islam DevShahidul

View GitHub Profile
View Include theme css and js with functions in wordpress
// Begin Include theme css and js function
function add_theme_css_js(){
// Include css
wp_register_style( 'foonts', ',500,600,700', array(), '1.0', 'all' );
wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css', array(), '2.0', 'all' );
wp_register_style( 'stylesheet', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all' );
View Nave Menu Register
1. Register menu in function
// Register navigation
function register_theme_menu(){
register_nav_menus(array( // Using array to specify more menus if needed
'main_menu' => 'Main menu',
'footer_menu' => 'Footer Menu'
add_action('init', 'register_theme_menu');
View Create Feature image with background image
if ( have_posts() ) : while ( have_posts() ) : the_post();
if ( has_post_thumbnail() ) {
$feat_image_url = wp_get_attachment_url( get_post_thumbnail_id() );
echo '<div style="background-image:url('.$feat_image_url.');"></div>';
View jquery.rwdImageMaps.min.js
// Calling script
if( $('').length){
* rwdImageMaps jQuery plugin v1.5
View Scroll top with definite section.js
var contentNav = $('section.hero-section').height()
if($(window).scrollTop() > contentNav ){
DevShahidul / Input field focus and blur advance function.js
Created Jun 3, 2017
This function for input active state on focus with value added and value removed state.
View Input field focus and blur advance function.js
// Begin input common focus and blur for value.
View Expand Search box with click submit btn function.html
/* Search box style */
.search-wrap{position: absolute; right: 0; top: 15px; z-index: 1;}{z-index: 3;}
.search-form-warp{float: left; width: 100%; position: relative;}
.expand-btn{position: absolute; right: 0; width: 35px; height: 35px; background: transparent; z-index: 5; cursor: pointer;}
.value-added .expand-btn{z-index: 2;}
.input-field{position: absolute; top: 0; right: 45px; width: 200px; height: 35px; z-index: 5; overflow: hidden;}
.search-wrap input[type="text"]{float: left; border: 1px solid #dfded8; color: #dfded8; padding: 0 10px; display: block; position: absolute; top: 0; right: -200px; width: 200px; height: 35px; margin: 0; padding: 0 10px; font-size: 18px; -webkit-backface-visibility: none; -moz-backface-visibility: none; -ms-backface-visibility: none; backface-visibility: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; -ms-transition: r
View FlexSlider.html
<!DOCTYPE html>
<style type="text/css">
File name ===>> flexslider.css
View Textarea Auto expand script.js
var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize(){
var el = this;
setTimeout(function(){ = 'height:auto; padding:0';
View Animate scroll body html function.js
$('html, body').stop(true, true).animate({
scrollTop: $('#cape-colonial').offset().top - 54
}, 1500, 'easeInOutCubic' );