Thursday, 22 September 2016

Change bootstrap active tab using jquery

1. Paste this html code
<div id="click-me-div">Click Me</div>

 <ul class="nav nav-tabs">
    <li class="active"><a href="#fruits" data-toggle="tab">I like Fruits</a></li>
    <li><a href="#veggies" data-toggle="tab">I like Veggies Too</a></li>
    <li><a href="#samosas" data-toggle="tab">But Samosa's Rock</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div>
    <div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div>
    <div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div>
</div>

2. Add below jquery
<script type="text/javascript">
$(document).ready(function() {
    $("#click-me-div").click(function() {
        alert('yes, the click actually happened');
        $('.nav-tabs a[href="#samosas"]').tab('show');
    });
});
</script>

Live Demo

Sunday, 11 September 2016

Remove Script & Stylesheet Versions in Wordpress

put below code in your themes function.php

add_filter( 'script_loader_src', 'remove_version' );
add_filter( 'style_loader_src', 'remove_version' );
function remove_version ( $src ) {
  global $wp_version;
  $version_str = '?ver='.$wp_version;
  $version_str_offset = strlen( $src ) - strlen( $version_str );
  if( substr( $src, $version_str_offset ) == $version_str )
    return substr( $src, 0, $version_str_offset );
  else
    return $src;
}

Saturday, 27 August 2016

Change the height of the Revolution Slider in wordpress

Please add this code in Customize -> Custom -> CSS:

.rev_slider_wrapper, .rev_slider, .tp-fullwidth-forcer, .rev_slider .tp-bgimg.defaultimg {
    max-height: 400px !important;

}

Hope it helps.

Monday, 22 August 2016

Wednesday, 17 August 2016

Get post data by id using AJAX in wordpress

Add below code on your theme's function.php

add_action('wp_ajax_nopriv_ajax_request', 'ajax_handle_request');
add_action('wp_ajax_ajax_request', 'ajax_handle_request');

function ajax_handle_request(){

    $postID = $_POST['id'];
    if (isset($_POST['id'])){
        $post_id = $_POST['id'];
    }else{
        $post_id = "";
    }

    global $post;
    $post = get_post($postID);

    $response = array( 
        'sucess' => true, 
        'post' => $post,
        'id' => $postID , 
    );

    // generate the response
    print json_encode($response);

    // IMPORTANT: don't forget to "exit"
    exit;
}
Using jQuery to retrieve the data and output.
jQuery(document).ready(function($) {

  $('.ajax a').click(function(event) {
    event.preventDefault();
    var id = $(this).data('id');

    $.ajax({
      type: 'POST',
      url: '<?php echo admin_url( 'admin-ajax.php'); ?>',
      data: {'action' : 'ajax_request', 'id': id},
      dataType: 'json',
      success: function(data) {
        console.log(data['post']);
      }
    });     

    return false;
  });
});

Wednesday, 3 August 2016

Featured image option not displaying in wordpress admin panel

Add this code to the functions.php file of your theme:
// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
If you getting this type of issue again please goto wp-admin->add new post-> screen options. At the top of your page you see this screen option open it and check the value featured image if not checked. Now you see the option of featured image in your post page admin side.

Saturday, 16 July 2016

get selected radio button value using jQuery

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()
Here's an example:
$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>