Skip to content

Instantly share code, notes, and snippets.

View DevShahidul's full-sized avatar

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>';
DevShahidul / jquery.rwdImageMaps.min.js
Last active May 31, 2017 10:55
Responsive maping
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 June 3, 2017 05:10
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' );