HOME / BLOG

How to insert code to header for a specific page only in wordpress?

/** * adding scripts for specific page/post with page id=17 (wpdevkt.in) */ function schemas_for_specifice_page(){ global $post; if($post->post_type == ‘page’ && $post->ID == ’17’){ echo ‘Your code here’; } } add_action(‘wp_head’,’schemas_for_specifice_page’);  

How to make a dynamic page loading bar with percentage using html, css, jquery ?

Make a dynamic page loading bar with percentage using html, css, jquery <div class=”preloader-wrap”> <div class=”percentage” id=”precent”></div> <div class=”loader”> <div class=”trackbar”> <div class=”loadbar”></div> </div> </div> </div> /** * preloader style */ .preloader-wrap { width: 100%; height: 100vh; position: fixed; top: 0; bottom: 0; background: #fff; z-index: 9999; } .percentage { height: auto; width: auto; border: […]

How to create a custom short code for getting data from database table in wordpress?

  // wordpress custom shortcode by wpdevkit.in function sdSlidesShortCode($attr){ $array = shortCodeAtts(array( ‘id’ => ”, ), $attr); global $wpdb; $table_name = $wpdb->prefix . “”; $id = $array[‘id’]; $results = $wpdb->get_results(“SELECT * FROM $table_name WEHERE ID = ‘$id'”); foreach($results as $result){ $slidesContent = $result->slidesContent; } $output = $slidesContent; return $output; } add_shortcode(‘SlideShortCode’,’sdSlidesShortCode’);  

Basic animated circular progress bar using svg, html, css, jquery

<svg id=”animated” viewbox=”0 0 100 100″> <circle cx=”50″ cy=”50″ r=”45″ fill=”#FDB900″/> <path id=”progress” stroke-linecap=”round” stroke-width=”5″ stroke=”#fff” fill=”none” d=”M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80″> </path> <text id=”count” x=”50″ y=”50″ text-anchor=”middle” dy=”7″ font-size=”20″>100%</text> </svg> body{text-align:center;font-family: ‘Open Sans’, sans-serif;} svg{width:30%;} var s = Snap(‘#animated’); var progress […]

How to design a custom scrollbar using html and css?

<style> /* width */ ::-webkit-scrollbar { width: 20px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; } </style>  

How to create a random color generator using javascript?

  <script> // paste this code to see magic var propmt = window.prompt(“Enter any number only: “); var test = isNaN(propmt); if (propmt == “”){ document.write(“<h2 class=’alert alert-danger’>Please enter a valid value!</h2>”); } else{ if (propmt == null){ document.write(“<h2 class=’alert alert-danger’>&times; You have cancelled the process!</h2>”); } else{ for(i=1; i<=propmt; i++){ document.write(“<div id='”+i+”‘>” + i […]