Using CSS Variables

Introduction to CSS variables and how to use them.

WordPress Hack: Remove Width And Height Attributes From Images

Whenever you upload any image to your WordPress based website, and you use it in your post, automatically WordPress adds Width and Height attributes to all image elements. Here is small quick hack to stop WordPress from doing this.

Adding Guides In Photoshop: One Second Tip

Guides in Photoshop allows you to place images and elements precisely. Guides are nothing but non printable horizontal and vertical lines. Photoshop allows you to have as many as horizontal and vertical guides you want. Photoshop also allows you to move and remove guides.

To Add Guides

Adding New Guide In Photoshop
Adding New Guide In Photoshop

If you want to add guide on your Photoshop document then just go to View > New Guide  then just select horizontal or vertical and click on OK. No need to deal with position value since you can adjust your guide according to your need with move tool.

Guide In Photoshop
Guide In Photoshop

Once you added the guide, you just have to adjust it using move tool. Simply press ‘V’ and hover the cursor on guide and move it.

To Remove Guides

If you don’t want guide any more, then to remove them you can go to View > Clear GuidesThat’s all, and all the guides will be removed from your document. Alternatively if you want to remove specific guide then you can use move tool. Just select move tool and move that guide to outside of the image and it will be removed.

To Lock Guides

If you want to lock guide in order to avoid their accidental movement, you can use View > Lock Guides.

Displaying Posts From A Category In WordPress

It may happen that you are designing some sort of archive pages or a front page and you want to list all posts belonging to some specific category. In this case you can go for following code.

Turning Facebook Profile Pics Into Emoticons

Did you know, you can use profile pics as emoticons in your Facebook chat? No… then here is how to use them.

In Facebook chat, you can use profile pic of you or your friends as emoticons. You can even use profile pics of Facebook pages as emoticons. To make profile pic as emoticons just go to page or profile of your friend and then look out for personalized part of URL, generally id or sometimes custom name selected by your friend or page author. If you are still confused with the personalized part then here are few examples for you…

Personalized url for fb page

In case of page, as shown in above screenshot, look out for the page name in URL.

Personalized url

Personalized url

In case of Facebook profile, lookout for the profile id or personalized profile URL as shown above.

Once you got that personalized part then just put it between double square brackets like [[this]] and hit enter. Say if the personalized part is ‘ankur.mhatre‘ then type ‘[[ankur.mhatre]]‘ and hit enter. That’s all.

Profile pic as emoticon
Profile pic as emoticon

 

 

Git: Delete Last Commit

Many times like you, even professional programmers do mistakes. A lot of times it happens that you commit something junk in hurry and then you start looking out for reverting it back. Like you even I have done such mistakes many times and finally I thought to write down a few useful git commands which will help me to revert back to stable copy of project.

Using ‘git reset’

So, if you have committed something junk, not useful but you have not pushed it to remote repository then you can go with


git reset --soft HEAD~1

git reset‘ command will reset your current commit. The ‘HEAD~1‘ mentioned here is nothing but shorthand for your last commit and the ‘–soft’ option specified in the command will keep all the changes in working copy.

Consider we have following three commits,

Git Commits Screenshot

and now we want to delete our last commit i.e. commit 3. So if we use the git reset –soft HEAD~1 command then result will be,

Git reset commit result

Note, since we have done soft reset, all changes which we have done in commit 3 are now in working copy.

If you want to hard reset your repository then you can go for ‘–hard’ instead of ‘–soft‘. This option will delete your last commit and all changes made including working copy.

If you want to move back to specific commit then you can use SHA-1 id of the commit at place of the HEAD~1. Example if you want to move commit whose SHA-1 if is 3518a64 then you can use


git reset --soft 3518a64

Note here we are using –soft, so all the changes made will be preserved.

Using ‘git revert’

The ‘git reset’ command works only when you have committed something and it is not pushed to remote repository. But if you have committed something and pushed it to remote repository then rather than ‘git reset‘ you have to go for ‘git revert‘. simply use


git revert HEAD

and then push or sync your repository. You will see that a new commit is created which do not include anything introduced by accidental change.

Considering same example as above, we are having three commits as follows

Git Commits Screenshot

and consider we have pushed everything to remote repository. Now if we use ‘git revert HEAD‘ then the result will be…

Git revert commit result

Now if you go through your working copy, you will find that all the changes made in last junk commit are discarded.

Working With wp_register_script()

WordPress allows you to register your own script files with theme. This allows you to link the script file to WordPress generated page according to the dependencies and at right time. The traditional way of including scripts, i.e. by adding <script> tag in head or footer have some drawbacks. In traditional way, we hardcode the script and load it every time with page, even though it is not needed. But once you register the script with theme, it can be loaded dynamically. This allows you to improve your performance and make your website more faster.

So how to register a script?

Quite simple. Just use following syntax for registering your scripts.


<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Parameters:

$handle

‘handle’ is nothing but name of your script. You can give any name to your script but make sure that they are unique throughout your theme. No two scripts can have same name.

$scr

‘src’ is the url to your script. You can pass any url as parameter. Example: you can use “//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js” for registering Angular JS.

$deps

If your script depends on other scripts then you can specify all those other scripts in an array. This parameter will make sure that all the dependent scripts are loaded before this script.

$ver

‘ver’ specifies version number and it is added in your query string. If you have not specified the version number or specified it as ‘false’ then by default your current version number of WordPress will be added. If you set is as ‘null’ then no version number will be added to your query string. I would like to suggest you to set it as null which will help you to improve performance.

$in_footer

If you specifies this parameter as ‘true’ then script will be loaded in footer. For proper functioning of this parameter you will need wp_footer() hook in your theme at appropriate place. If you do not set this parameter then the script will be loaded in <head> of your theme.

How to use registered script in your theme?

To use your registered script in you have to use wp_enqueue_script(). Simply pass name of your script i.e. handle as parameter and WordPress will take care of rest.

Say we have ‘ankurcus‘ as handle for our registered script the we will use following line to load ‘ankurcus‘ with our theme.

<?php wp_enqueue_script('ankurcus'); ?>

That’s all. Now you have learned to register your custom scripts with WordPress and use them in your theme.

Reference:

You can visit following WordPress codex pages for more information.