2015 ~ d-koder - Web Developer | Security Specialist

Thursday, 15 October 2015

PHP - RAND Function to generate Random String

PHP Code for the Random String Generation

<?php

function generateRandomString($length = 10) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
}
echo generateRandomString();

?>

html - Darken the image with hover

Live Demo Link - Click Me

Darken the image on mouse hover

HTML -

<button class="view_new">
    <div class="a">
    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" />
    </div>
</button>

CSS -

.view_new {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: white;
}
.view_new .a {
    margin: 10px;
}

.view_new img {
    display: block;
}

.view_new:hover .a {
    background-color: black;
}

.view_new:hover img {
    opacity: 0.4;
}

WordPress Theme Development

WordPress Theme Development - Download Default File of WordPress Themes

Download Here

How to get category name from the product id in woocommerce

How to get category name from the product id in woocommerce.

// Get the product id from the order id -

<?php
$order = new WC_Order( $order->id );

$items = $order->get_items();

foreach ( $items as $itemty ) {
$product_id = $itemty['product_id'];
}

// then from product id get the category name

$cat_id=get_the_terms( $product_id, 'product_cat' );

foreach ( $cat_id as $ite ) {
echo $cat = $ite->name."<br>";
}

?>

How to remove Malware From Website and Server via SSH

Websites & Server are infected with the Malwares for Spamming Purpose - SEO SPAM or SPAM EMAILS

If one Website on the Server has Vulnerability and hacker's get access to it. then its will be easy for them to infect all other websites hosted on the server.

Website Hacking Shell is used by them as a backdoor to the server which has the root privileges to make changes or upload new files on server.

Most of the malwares are BASE64 Encoded or Eval() or FilesMan.

How to locate the Malwares via SSH

Use Command -

grep -lr --include=*.php "eval(base64_decode" /var/www/

grep -lr --include=*.php "FilesMan" /home

Login/Sign Up Design with social login

Download Source Code - Click here

JQuery Scroll to Top effect

HTML -

<a href="#" title="Back to top">^Top</a>

JQuery -

jQuery(document).ready(function($){
        $(window).scroll(function(){
            if ($(this).scrollTop() < 200) {
                $('#smoothup') .fadeOut();
            } else {
                $('#smoothup') .fadeIn();
            }
        });
        $('#smoothup').on('click', function(){
            $('html, body').animate({scrollTop:0}, 'fast');
            return false;
            });
    });

Complete -

<html>
<head>
<script>
jQuery(document).ready(function($){
        $(window).scroll(function(){
            if ($(this).scrollTop() < 200) {
                $('#smoothup') .fadeOut();
            } else {
                $('#smoothup') .fadeIn();
            }
        });
        $('#smoothup').on('click', function(){
            $('html, body').animate({scrollTop:0}, 'fast');
            return false;
            });
    });
<script>
</head>
<body>
    <a href="#" title="Back to top">^Top</a>
</body>
</html>

Script - Now Connect to database via FTP

Now its possible to connect to database and do modification in it via FTP

Sometimes we don't have access to the cpanel from where we can access the phpmyadmin for the database.

Simply upload the script and run it via URL. Enter the credentials for the database and do changes.

Download - Click Here

WordPress - Masonary Responsive Look for Blog Post

Create a page template like - "page-blog.php" post this file inside the theme files. "/wp-content/theme/yourtheme/page-blog.php"

<?php
/**
* Template Name: Masonry Blog
*
* Blog Template
*
*/
?>
<?php include_once( 'header.php' ); ?>

<div class="masonry">

<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('posts_per_page=100'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div class="item">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
<?php the_title(); ?></a>

<?php if ( has_post_thumbnail() ) {
$size=75;
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
<?php the_post_thumbnail( $size ); } ?>
</a>

<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a>
</div>
<?php endwhile;?>
<?php $wp_query = null; $wp_query = $temp;?>

</div>
<?php get_footer(); ?>

CSS Code - Put this below code in themes "Style.css"

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

HTML Code -

<html>
<body>
<center><h1>Best Footer Design</h1></center>
<div class="socials">
<div class="container">
    <aside class="footer_widget">
<ul class="socialicons">
    <li><a target="_blank" href="https://www.facebook.com/756dk"><img alt="Facebook" src="https://tunedballoondemo.files.wordpress.com/2014/02/facebook.png"></a></li>
      <li><a target="_blank" href="https://twitter.com/kapoordeepanshu"><img alt="Twitter" src="https://tunedballoondemo.files.wordpress.com/2014/02/twitter.png"></a></li>
      <li><a target="_blank" href="https://plus.google.com/+DeepanshuKapoorcybersecurity"><img alt="Google" src="https://tunedballoondemo.files.wordpress.com/2014/02/google.png"></a></li>
      <li><a target="_blank" href="https://www.youtube.com/channel/UC27t7pR8bt7HQVBEniIj39g"><img alt="YouTube" src="https://tunedballoondemo.files.wordpress.com/2014/02/youtube.png"></a></li>
      <li><a target="_blank" href="https://instagram.com/kapoordeepanshu/"><img alt="Instagram" src="https://tunedballoondemo.files.wordpress.com/2014/02/instagram.png"></a></li>
</ul>
</aside> </div>

</div>
</body>
</html>

CSS Code -

.socials {
    background: none repeat scroll 0 0 #110614;
    color: #fff;
    margin-top: 50px;
    padding: 15px 0 5px;
    text-align: center;
}

.container:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
.container {
    width: 1280px;
}
.container {
    margin: 0 auto;
    position: relative;
    width: 960px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ul.socialicons {
    padding: 8px 0;
    text-align: center;
}
ol, ul {
    list-style: outside none none;
}
aside.footer_widget ul li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding: 0;
}
.socials ul li {
    color: #fff;
    display: inline-block;
}
ul.socialicons li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding: 5px 0;
}
aside ul li {
    font-size: 1em;
    padding: 5px 0;
}

Create Responsive Menu

HTML CODE

<!Doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Responsive Navigation Menu</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <label for="show-menu" class="show-menu">Show Menu</label>
 <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
  <li><a href="#">Home</a></li>
  <li>
   <a href="#">About ￬</a>
   <ul class="hidden">
    <li><a href="#">Who I am</a></li>
    <li><a href="#">What I Do</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Portfolio ￬</a>
   <ul class="hidden">
    <li><a href="#">Web</a></li>
    <li><a href="#">Security</a></li>
    <li><a href="#">SEO</a></li>
   </ul>
  </li>
  <li><a href="#">Designing</a></li>
  <li><a href="#">Development</a></li>
 </ul>
</body>
</html>

Corresponding CSS

/*Strip the ul of padding and list styling*/
ul {
 list-style-type:none;
 margin:0;
 padding:0;
 position: absolute;
}

/*Create a horizontal list with spacing*/
li {
 display:inline-block;
 float: left;
 margin-right: 1px;
}

/*Style for menu links*/
li a {
 display:block;
 min-width:140px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: #fff;
 background: #2f3036;
 text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
 background: #19c589;
}

/*Style for dropdown links*/
li:hover ul a {
 background: #f3f3f3;
 color: #2f3036;
 height: 40px;
 line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
 background: #19c589;
 color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
 display: none;
}

/*Make dropdown links vertical*/
li ul li {
 display: block;
 float: none;
}

/*Prevent text wrapping*/
li ul li a {
 width: auto;
 min-width: 100px;
 padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
 display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-decoration: none;
 color: #fff;
 background: #19c589;
 text-align: center;
 padding: 10px 0;
 display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/

@media screen and (max-width : 760px){
 /*Make dropdown links appear inline*/
 ul {
  position: static;
  display: none;
 }
 /*Create vertical spacing*/
 li {
  margin-bottom: 1px;
 }
 /*Make all menu links full width*/
 ul li, li a {
  width: 100%;
 }
 /*Display 'show menu' link*/
 .show-menu {
  display:block;
 }
}

1) Create New Sidebar

Open Function.php of your theme files and Add below code -

if ( function_exists('register_sidebar') ) {

    register_sidebar(array(

        'name' => 'Custom Sidebar',

        'id' => 'custom-sidebar',

        'description' => 'Sidebar below Header image',

        'before_widget' => '<li id="%1$s">',

        'after_widget' => '</li>',

        'before_title' => '<h2>',

        'after_title' => '</h2>',

    ));

}

2) Add Sidebar to theme

As we create the side bar in previous step now, we need to call it to the theme files.

So its upto you Where you want it to call like - Sidebar, Footer etc.

Open Page.php of your theme files and Add below code.

<div id="custom-sidebar">

   <ul>

      <?php

      if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom-sidebar') ) :

      endif; ?>

   </ul>

   <div style="clear:both"></div>

</div>

3) Styling your CSS

Put below code in Style.css of your theme files.

div#custom-sidebar ul {

    line-height: 20px;

}

div#custom-sidebar li.widget {

    width: 300px;

    margin:0 0 15px 20px;

    float:left;

}

div#custom-sidebar li.widget h2 {

    margin-bottom: 15px;

}