How to make a simple child theme In wordpress

WordPress has a nice templating system. This is one good reason for it’s great publicity. Anyway we can start working now.

Why we need child theme?

Good question, suppose you have bought a wordpress theme/template and started a site, after some days you will get notification that the theme provider provided an update. You can’t update the theme because you have already applied modification on it. This is why child theme rocks. You can update your main theme anytime without breaking your modification.

 

How to make a child theme?

First of all, we need to declare a new theme. For example our theme name is “theonepager”. Now we need to make a new directory name “theonepager-child” (you can use any name actually) beside the main theme folder. You can do it from cpanel file manager.

Here is one screenshot of the main theme and child theme position,

child-theme-cpanel-file-manager

 

Now enter in the  child theme folder and make a new file from New File navigation button (at top left) and file name should be “style.css”. Select the file (style.css) and click on “code editor” (on nav), a dialog box will appear click on edit button.

See below which text should be added at the very top of the blank css file. Actually we are going to add some info in the stylesheet as comment and a css importing statement.

/*———————————————————–

Theme Name: theonepager child theme Template: theonepager Author: asifsaho Author URI: http://asifsaho.me Designed & Developed by asifsaho Theme URI: http://asifsaho.me License: GNU General Public License version 3.0 /* =================================== */

@import url(../theonepager/style.css);

Carefully add the main theme css file in the @import css tag.  Actually all info is not mandatory without the info are showing in the below screenshot.

 

child-theme-stylesheet

 

Yes we are almost done. now to to Wp Admin Panel and then you will see a new theme, name “theonepager-child” as below screenshot.

 

 

Now activate the Child theme and write your all modification CSS which will override the main theme CSS. Also you can copy any theme file from from main theme folder to the child theme folder if you want to customize it as your need.

The files will get most priority which you will put in the child theme folder. That’s it!

Cool! now update your the main theme anytime without any data loss ;)

Photography At Mirpur DOHS April 2013

Sorry to say I am not a pro photographer, if you are here to see some awesome pics then I should say “You will be disappointed!” Normally I take pics with my “Nokia 2700 c” camera but these pics was taken using Canon Rable T3i. This is not my camera sometimes I use iBabars’ camera and like to think me as a photographer lol….

 

bady girl in the DOHS playground

 

A Car
A Car

 

 

from running bike
from running bike

 

from running bike 2
from running bike 2

 

Moon From Office Window
Moon From Office Window

 

 

bady boy at dohs playground
bady boy at dohs playground

 

photography-mirput-dohs (26) photography-mirput-dohs (30)

 

 

photography-mirput-dohs (31)

 

 

photography-mirput-dohs (32)

 

 

briffing in office
briffing in office

 

prohor at office
prohor at office

 

photography-mirput-dohs (54)

 

photography-mirput-dohs (55)

photography-mirput-dohs (59)

photography-mirput-dohs (60)

photography-mirput-dohs (63)

photography-mirput-dohs (68)

photography-mirput-dohs (70)

photography-mirput-dohs (73)

photography-mirput-dohs (83)

photography-mirput-dohs (88)

photography-mirput-dohs (90)

playground-at-dohs

Its me
Its me, Photo Credit: Mehedee 83

Social Buttons with Transition CSS Sprite

CSS Sprites is actually for making less request to server. Think your site load with 30 small images when it open in a browser. For this small 30 images (png/jpg) your hosting server will receive 30 requests. Here css sprite rocks, we will put all images in a file and just add the file url in background css with background position. The background file can be like below,

This is a example of background file, tuteplus is using this background.

I have created a background image, this below

I have create the button with CSS Sprites and transition effect.

  • Just create a navigation with basic css
  • Set the background image for each navigation item
  • Now add an extra statement for positioning background

[css]background-position: 0 37px;[/css]

  • Make hover event for the nav items and when user hover on it then the background will be changed as hover item.
  • Now we will see that the background is changing while hovering on the social nav but it is changing at once not smoth as the preview!
  • Lets apply a transition css property to make it smooth. on hover and normal event add transition delay time like below.

[css] .social:hover { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; }

.social { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; } [/css]

  • Now you are done adjust the delay time while changing background of the social nav.

My Creation is below and it’s live,

[button link=”http://asifsaho.me-content/uploads/download/social-icon/socialbtn.zip” size=”large” color=”teal”]Download Source[/button]

Droplr Quick Image sharing program for all

As a freelancer I always seeking for good tools and now I have got a new tools for sharing files. We know about dropbox, skydrive, box and many other program but droplr is highlight for a good advantage. Not for file sharing it is very fast for image and screenshot sharing. If we compare this tools with dropbox then see how many step we need to share a screenshoot. Continue reading Droplr Quick Image sharing program for all

A File Renamer

Batch File Rename is a great File Rename Utility. This is a product of ronsplace.me.uk, It is an easy to use files and folders renaming tool. It can replace characters, remove/add numbers, remove/add text, changing case, split names, and many more. The software provides an instant preview that allows you to check the renaming results without actually changing any of your files.

Continue reading A File Renamer