CodeKhel

you can easily link your directory in wordpress. Example:- <?php bloginfo('template_url'); ?>/css/bootstrap.min.css

First install the ACF-option page plugin, then put the following code. <?php the_field('logo','options'); ?> or put in page template by following code. <?php the_field('logo'); ?>

<?php                while ( have_posts() ) : the_post();                the_content();                endwhile; ?>

<ul>      <?php if(get_field('email_repeater','options')): ?>              <?php while(has_sub_field('email_repeater','options')): ?>                     <li>                            <p><?php the_sub_field('email_head','options'); ?></p>                            <a href="mailto:<?php the_sub_field('email_id','options'); ?> ">    <?php the_sub_field('email_id','options'); ?>  </a>         ...

<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>

// First, Install acf repeater plugin for this <div class="container-fluid hbanner"> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <!-- <div class="overlay"></div> --> <!-- Indicators --> <ol class="carousel-indicators"> <?php $i=0; while( have_rows('slider_repeater') ): the_row(); if ($i == 0) { echo '<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>'; } else { echo '<li data-target="#bs-carousel" data-slide-to="'.$i.'"></li>'; } ...

// Replace Posts label as Articles in Admin Panel function change_post_menu_label() {    global $menu;    global $submenu;    $menu[5][0] = 'Articles';    $submenu['edit.php'][5][0] = 'Articles';    $submenu['edit.php'][10][0] = 'Add Articles';    echo ''; } function change_post_object_label() {        global $wp_post_types;        $labels = &$wp_post_types['post']->labels;        $labels->name = 'Articles';        $labels->singular_name = 'Article';        $labels->add_new = 'Add Article';        $labels->add_new_item = 'Add Article';        $labels->edit_item = 'Edit Article';    ...

<?php the_field($field_name, $post_id); ?> Eg.  <?php the_field('cta_btn_link',4);?>

Basically .map files are used in conjunction with css preprocessor like- Sass, Less. or Stylus.   Because the CSS files are generated, editing the CSS files directly is not as helpful. For pre processors that support CSS source maps, by inspecting element  lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file. So basically you can say they (.map files) exist so that the debugger can display compiled CSS (via LESS, SASS, etc.) in a readable format If you're not using a CSS preprocessor like Sass or LESS, you can just delete them.

The classes are used along with the Bootstrap grid classes of  .col-xs-# ,  .col-sm-# ,  .col-md-# ,  and   .col-lg-# . The  push  class will  move columns to the right  while the  pull  class will  move columns to the left . With this simple technique, we are able to rearrange columns without too much fuss. I've seen some developers use hide and show classes to show different grids on small to large devices but these column reordering classes take care of all that for us.

Insert the following code the functions.php file of your active theme. This code disables all the updates notifications regarding plugins, themes & WordPress completely. function remove_core_updates(){ global $wp_version;return(object) array('last_checked'=> time(),'version_checked'=> $wp_version,); } add_filter('pre_site_transient_update_core','remove_core_updates'); add_filter('pre_site_transient_update_plugins','remove_core_updates'); add_filter('pre_site_transient_update_themes','remove_core_updates');

This tag is useful to give a link preview with custom post featured image, when you share the link post with social sites like- Facebook, Whatsapp, Twitter etc. og refers to Open Graph meta tag, you have to add add following line with your image address in the header part of the page <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> This is the way to set a particular static image as an open graph meta tag, but if you want to change  image dynamically  or according to your post then you have to  follow below mentioned code. <meta property="og:image" content="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>" />

Problem : Sometimes you need to call a modal within another modal. Modal will open well, but when you close the inner modal both modals are closing. you want that only the inner modal should close. assume you are coding like below- <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Outer Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> <...

The best and simple way to write code into your wordpress post is to use <code></code> tags. You may use it with the <pre></pre> and <tt> </tt>tags. The   <code> ,  <tt>  and  <pre>  tags  will display the text in a monospaced font and use the font-size of <body> tag. If you want to give them different color or style then you have to change their style in style.css. For this 1.  Click on Editor option, dropdown of Appearance. 2.  Go to Style.css and 3.  change/Add following styles for <pre>and <code> tags. pre, code{ direction: ltr; text-align: left; } pre { color: #000; margin: 10px; padding:10px; background: #f9fbf0; max-height: 504px;} code {font-size:1.2em; color: #e8e8e8} If you want colorful code with some facility like highlighting, line number, Display Result etc., then you should use the wordpress plugins for that. There is a lot's of free...

In this Blog we will know that how to open bootstrap modal into a specific div. Sometimes you need that particular bootstrap modal need to be open into a particular div, so for that purpose you have to follow these step. Assume we have following code structure: <button id="btn">Open Modal</button> <div class="orange section"> </div> <div class="red section"> </div> Now we want that bootstrap modal need to open into red section div, on click of the button. so for the solution we need to follow the below steps. Insert bootstrap modal HTML into  red section <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close...

mostly persons confused about tags and keywords. But here we will know that what are their exactly use. The main role of the keyword and tag is to increase direct traffic to your site. Both the tags and keywords have identical or similar functionality, but the main difference is this that tags search content into your site or blogger but the keywords help the search engine to find out the content. keyword:-     The words by which user searches content in search engines are keywords. It helps your article to label it. keyword tells that actually what your content have or purpose of the post. So,when somebody search in various search engines by some words (keywords). your article will be there. Tags:-    They also describe the article but it works only internal. means it's search criteria is limited within your site. It helps organization to search their data. may be tag will be a part of the content or may be label of content to tell that w...

AAPT:- AAPT stands for Android Asset Packaging Tool. The Android Asset Packaging Tool (aapt) takes your application resource files, such as the AndroidManifest.xml file and the XML files for your Activities, and compiles them.This is a great tool which help you  to view, create, and update your APKs (as well as zip and jar files). It can also compile resources into binary assets. It is the base builder for Android aplications. This tool is a piece of the SDK (and assemble framework) and permits you to see, make, and redesign Zip-perfect chronicles (zip, jolt, apk). When your application is compiled, aapt generates the R class, which contains resource IDs for all the resources in your res/ directory. For each type of resource, there is an R subclass (for example, R.drawable for all drawable resources), and for each resource of that type, there is a static integer (for example, R.drawable.icon). This integer is the resource ID that you can use to retrie...

JQuery Toggle with Read More... :-     In the following example, we will use some tricks that tells how can we use JQuery Toggle() function in READ MORE option. Firstly you add JQuery library file (jquery-1.12.4.min.js), if already added then ignor it. <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> Thenafter just add the following JQUERY Script. <script type="text/javascript"> $(document).ready(function () { var showChar = 100; var ellipsestext = "..."; var moretext = "Show More"; var lesstext = "Show Less"; $('.more').each(function () { var content = $(this).html(); if (content.length > showChar) { var varA_1 = content.substr(0, showChar); var varA_2 = content.substr(showChar - 1, content.length - showChar); var html = varA_1 + '<span class="moreelipses">' + ellipsestext + '</s...

It's very irritating sometimes to Re-Type passwords, or we just want to be sure what we have written in password is correct or not for this we use on mouse hover password field text visible.  Hide/Show password makes you sure with JQuery that what you have typed. It can be used on various event handlers means onClick, onmouseover etc. Here in the below we described  password visibilty with only hover function. This type of pattern seen  IE 10+ and LinkedIn many more sites. hideShowPassword. So lets go through example. 1. Create a password input field <div class="form-group"> <label class="col-md-4 control-label" for="Password">Confirm New Password:</label> <div class="col-md-6"> <div class="input-group"> <form:input type="password" path="confirmPassword" id="confirmPassword" class="form-control" placeholder=...

This method remove a single class, multiple classes, or all classes from each element in the set of matched elements.

onclick on a button panel will slideDown  with animation effect speed of 5000 ms. with the help of simple div and JQuery script

WHAT IS SMART CITY? In India, the picture of a smart city contains a wish list of infrastructure and services that describes his level of aspiration. Accordingly, the purpose of the Smart Cities Mission is to drive economic growth and improve the quality of life of people by enabling local area development and harnessing technology, especially technology that leads to Smart outcomes. The objective (aim) of the smart cities : • Provide core infrastructure • Give a decent quality of life to its citizens • Clean and sustainable (long-life) environment • Application of smart solutions The core infrastructure (मूल अवसंरचना ) elements in a smart city would include: • Adequate (पर्याप्त ) water supply, • assured electricity supply, • sanitation(स्वच्छता), including solid waste management, • efficient urban mobility(चलना फिरना) and public transport, • affordable housing, especially for the poor, • robust (मजबूत ) IT connectivity and digitalization, • good governance, especially e...

sometime we have face issue related to that bean property is not readable in Spring MVC or you may also call bean  has invalid getter method. so our problem looks like below mentioned.This is an error which displays on your framework console. Problem- org.springframework.beans.NotReadablePropertyException: Invalid property 'loginId11111' of bean class [*.model.LoginForm]: Bean property 'loginId11111' is not readable or has an invalid getter method: Does the return type of the getter match the parameter type of the setter? at org.springframework.beans.AbstractNestablePropertyAccessor. getPropertyValue(AbstractNestablePropertyAccessor.java:619) at org.springframework.beans.AbstractNestablePropertyAccessor. getPropertyValue(AbstractNestablePropertyAccessor.java:610) at org.springframework.validation.AbstractPropertyBindingResult. getActualFieldValue(AbstractPropertyBindingResult.java:99) at org.springframework.validation.AbstractBindingResult. getFieldValue(Abstr...

First of all add "timer.jquery.js"  file. cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.1/timer.jquery.js If you want to count the time and after the count time if complete then it send the callback location which you are defined in the window location $('#').timer({ duration: '2m',              /*countdown time limit*/ countdown: true,          /*True-starts countdown timer  and False-starts count up timer from specific defined time*/ format: '%M:%S Seconds Remaining',          /*format of the timer*/ callback: function() { window.location = "http://test-portal:8080/cpProject/"; } });

<body> <div class="container" style="margin-top:20px;"> <div class="col-md-12 text-center"> <div class="panel panel-default"> <div class="panel-body"> <form action="#"> <div class=" col-md-4 col-md-offset-4"> <input type="text" id="F_name" class="form-control"> <br> <button id="SubmitName" class="btn-warning">Submit</button><br> </div><br> <br> </form> <div class="col-md-12 text-center " style="display:none;" id="msg1"> <p>Hi Mr. &nbsp; <span id="print1" > </span></p> </div> </div> </div> </div> <div id="alertModal" cl...

Script for window load: <script type="text/javascript"> $(window).on('load',function(){ $('#confrimModal').modal('show'); }); </script> HTML layout for modal: <div class="container" style="margin-top:20px;"> <!-- confirm Modal --> <div id="confrimModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body" > <p>Shuld we print the message?</p> ...

Many time you face that sometime either window.load function works properly and sometime window.on('load,function' ) works .Code syntax written here-: $(window).on('load', function(){ alert('window loaded'); }); $(window).on('load', function(){ alert('window loaded'); }); So, you want to know that what is the reason and what is the difference between these two .. Let me tell you that there is no identical difference between them. According to functionality both are same. We can say that they are alternative way to represent window load function. The difference is only this that  .load  as an event binding method has been removed or deprecated as of jquery 1.9. or above version.

var highlight = 'v_highlight'; var $cols = $('#vTable1 tr:not(:eq(0))').click(function() { $cols.removeClass(highlight); $(this).addClass(highlight); $('#v_LegalMoreView').fadeIn(); smoothScroll(document.getElementById('v_LegalMoreView')); }); 2nd Example==>  HTML-->     <div class="divs">         Thumb1     </div>         <div class="divs">         Thumb1     </div>         <div class="divs">         Thumb1     </div>         <div class="divs">         Thumb1     </div>              CSS--> .color {     background-color: yellow; } JS--> var Acolor = 'color'; var $cols = $('.divs').click(function(e) {     $cols....

1st Method:- $("#erd_content").text(function(index, currentText) { return currentText.substr(0, 60); }); 2nd Method:- var txt= $('.erd_content').text(); if(txt.length > 61) $('.erd_content').text(txt.substring(0,60) + '...');