PHP Kishan: March 2016

Saturday 26 March 2016

How to Add New Field in General Settings Page? And how to use this Field's Value in WordPress Admin or Frontend.

1] Add this below code in active theme's => functions.php file :-

$new_general_setting = new new_general_setting();

class new_general_setting {
function new_general_setting( ) {
add_filter( 'admin_init' , array( &$this , 'register_fields' ) );
}
function register_fields() {
register_setting( 'general', 'favorite_color', 'esc_attr' );
add_settings_field('fav_color', '<label for="favorite_color">'.__('Favorite Color?' , 'favorite_color' ).'</label>' , array(&$this, 'fields_html') , 'general' );
}
function fields_html() {
$value = get_option( 'favorite_color', '' );
echo '<input type="text" id="favorite_color" name="favorite_color" value="' . $value . '" />';
}
}

2] Add this below code where you want to display above Field's Value :-

echo $PriorityPoints = get_option( 'favorite_color' ); // Field Name

Monday 14 March 2016

Set Equal Height Div Rows

Equal Height
Equal Height

Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height
Equal Height

Equal Height
Equal Height
Equal Height

Equal Height
Equal Height
Equal Height
Equal Height
Equal Height

<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: -webkit-linear-gradient(top, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…N0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…N0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
overflow-x: hidden;
}

.blocks {
float: left;
width: 100%;
}
.block {
float: left;
width: 20%;
background: #ffa;
padding: 10px;
margin: 10px;
text-align:center;
color:#000 !important;

}
</style>
<script type="text/javascript">
function heightsEqualizer(selector) {
var elements = document.querySelectorAll(selector),
max_height = 0,
len = 0,
i;

if ( (elements) && (elements.length > 0) ) {
len = elements.length;

for (i = 0; i < len; i++) { // get max height
elements[i].style.height = ''; // reset height attr
if (elements[i].clientHeight > max_height) {
max_height = elements[i].clientHeight;
}
}

for (i = 0; i < len; i++) { // set max height to all elements
elements[i].style.height = max_height + 'px';
}
}
}

if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
heightsEqualizer('.js-equal-height');
});
window.addEventListener('resize', function(){
heightsEqualizer('.js-equal-height');
});
}

setTimeout(function () { // set 1 second timeout for having all fonts loaded
heightsEqualizer('.js-equal-height');
}, 1000);
</script>
</head>
<body>
<div class="blocks">
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
</div>
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
<div class="block js-equal-height">
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
Equal Height<br />
</div>
</div>
</body>
</html>

Wednesday 9 March 2016

Card Flip In HTML

<html>
<head>
<style>
/*Card Flip*/

.card-container {
width: 150px;
height: 150px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
float: left;
margin: 50px 50px 50px 50px;
cursor: pointer;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 150px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: #FFE202;
}
.card .back {
background: red;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipped:hover {
-webkit-transform: rotateY(-0deg);
-moz-transform: rotateY(-0deg);
-o-transform: rotateY(-0deg);
transform: rotateY(-0deg);
}
/*Card Flip*/
</style>

</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="card-container">
<div class="card" id="card1">
<div class="front">K</div>
<div class="back">R</div>
</div>
</section>
</body>
<script>
jQuery(".card").click(function() {
var id = jQuery(this).attr('id');
jQuery('#' + id).toggleClass('flipped');
});
</script>
</html>

HTML to Image

Display:

The tiger is the largest member of the felid (cat) family.

Canvas:

Image:

Download this Script Click Here

Friday 4 March 2016

Detect Mobile or PC Browsers

PHP Kishan