WordPress Skeleton Theme

Like any theme developer, I too keep a stash of a skeleton WordPress theme that i use to start my project wihtout the hassle of repeating code and work all over again. I recently lost it all in a hard-disk crash and had to do it all over again. But this time i learned and now have created a git – https://github.com/alihs/wordpress-bootstrap-skeleton

If you guys too want to start off WordPress like me or even better out what i do please head over, fork, contribute and enjoy.

YTPak Chrome Extension


As you all may know, Youtube is banned in Pakistan. Now we do have many alternatives starting to popout like PlayIt and YTPak.

My personal preference is YTPak, simply it is faster and better. Now it was a total headache for me to copy the youtube URL, open YTPak.com and paste the URL. So me being a chrome user, had to do something about it. So I created a nifty small chrome extension that looks for all youtube links in a page and replaces them YTPak.

After creating the extension, I thought why not do a favor to the user out there going through the same frustration as me. So without further nag, download the plugin below.

YTPak Chrome Extension

The How to.
1. Step 1: Extract the folder on your desktop
2. Open up chrome and type in chrome://extensions/
3. Drag the extension yt_links_chrome_ext.crx on your tab from above.
4. You are done.

1. Doesnot work on Gmail
2. If a site uses Ajax or content is loaded through some script, the plugin won’t work.

Features Coming soon
1. On click of the plugin icon, change all links instead of being automatically.
2. Any other things you may suggest.

NOTE Playit.pk fans, if you guys need such a plugin do contact me and i’ll create one for free 😉

Strip Shortcode Tags and NOT the content

I use a lot of shortcodes on my sites when the user has a lot of requirements for me in design. One issue you have is when the content is displayed in a slider or any other specific area while strip_tags is being used, it looks pretty weird. Something like the following

[shortcode] some paragraph text here [/shortcode]

So the solution is preg_match.

echo substr(preg_replace( '/\[[^\]]+\]/', '', get_the_content() )


How to make the Get The Image WordPress plugin to work with BFI Thumb

I regularly use “Get the Image” WordPress plguin in my themes (thanks to Justin for developing such a wonderful plugin), which does a super fantastic job for searching through posts and getting the images I want.

Then usually all these images have to be resized, cropped and given some nifty effects which aren’t quite easy with the default WordPress Thumbnail function, so I use a php script to resize the images. In the past I have used “timthumb” but now since the ever dominant ThemeForest has asked NOT TO use timthumb and shift to BFI Thumb.

Bfi_thumb resizes image on the fly using WordPress’ Image Editor classes, thus supports both Imagick and GD and switches automatically depending on what’s available. The default Image Editors only have a handful of basic functions (crop, resize, rotate, etc), bfi_thumb also extends these classes to include these new functions:

So, I have been working out with this nifty script and find it quite amazing just like timthumb. Even though it is pretty easy to use, this tutorial is dedicated to make use of “Get the Image” and “BFI Thumb” together.

Step 1: Getting BFI Thumb setup

Yes, setting up BFI thumb is as easy as cake. Just download the BFI Thumb code from Github.

Next is placing a simple code in your functions.php file, that is below and you are done



Step 2: Get the Image URL

Okay so once we have installed the plugin “Get the Image” it is time to get the image url which will later be used with BFI thumb script. Now this could have been tricky but fortunately, a simple PHP code and use of some array’s help us get the image url in a giffy. The code follows.

if ( function_exists( 'get_the_image' ) ) {
$image = get_the_image( array( 'image_scan' => true, 'format' => 'array', 'size' => 'full' ) );
if( ! empty ( $image ) ) { ?>
	//Image found do your stuff (BFI thumb)
<?php } else { ?>
	//No Image found, default image?
<?php }} ?>

Right, i’ll explain the code above. First we have checked if the plugin exists so we don’t break the theme in any case. Then we scan the image, pull the image into an array and call the size which would be full width, giving us more control on the resize function. Also there is an if/else statement that we could use in the cases where an image is found and when there is no image.

Step 3: Use the extracted Image and apply BFI thumb

Right, this tutorial is for simple integration so if you need to use any advance features by BFI Thumb , just go ahead and read the “readme“. Now we will be using the following code.

  $params = array( 'width' => 960, 'height' => 380, 'crop' => true );
  echo "<img src='" . bfi_thumb( $image[url], $params ) . "'/>";

What we have done above is combined the BFI Thumb along with the image we extracted using the above code. See the “width”, “height” and “crop” i used which is quite basic and easy to understand and edit.


So our final code looks like something below

if ( function_exists( 'get_the_image' ) ) {
$image = get_the_image( array( 'image_scan' => true, 'format' => 'array', 'size' => 'full' ) );
if( ! empty ( $image ) ) { ?>              
  <div class="feat-img"> 
      $params = array( 'width' => 960, 'height' => 380, 'crop' => true );
      echo "<img src='" . bfi_thumb( $image[url], $params ) . "'/>";
<?php } else { ?>
	<img src="http://placehold.it/200x200" />
<?php }} ?>


‘Get the image’ doesnt seem to have any methods to reduse the stress on the server. That means that every time you list 5 posts like I do, you have to scan the posts again and again and again, every time someone visits your blog, and if you use the plugin in many places in combination with BFI Thumb, chances are that you have to scale the thumbnails over and over again as well. Good News is that I know a fix to this as well which I’ll share in a couple of days.

WooCommerce – Get Product Prices, Simple or Variation

Hey guys,

These few months have been quite busy and was not able to share snippets or codes along the way, nor was able to write for the personal blog. But for the last week I have been working on a WooCommerce theme that has been totally customized.

People usually want to get the pricing of products and want to wrap it in their own html and styles. So the basic code (below) does not work.

<?php echo $product->get_price_html(); ?>

So I am sharing with you guys a code that can be used for WooCommerce product pricing display. This code has been tested upto Version 2.0.14. I’ll explain the code below.


//get the sale price of the product whether it be simple, grouped or variable
echo $sale_price = get_post_meta( get_the_ID(), '_price', true);

//get the regular price of the product, but of a simple product
$regular_price = get_post_meta( get_the_ID(), '_regular_price', true);

//oh, the product is variable to $sale_price is empty? Lets get a variation price

if ($regular_price == ""){
#Step 1: Get product varations
$available_variations = $product->get_available_variations();

#Step 2: Get product variation id
$variation_id=$available_variations[0]['variation_id']; // Getting the variable id of just the 1st product. You can loop $available_variations to get info about each variation.

#Step 3: Create the variable product object
$variable_product1= new WC_Product_Variation( $variation_id );

#Step 4: You have the data. Have fun :)
$regular_price = $variable_product1 ->regular_price;

echo $regular_price;

So, what you see above is we have printed/echoed he sale and the regular price and if you can read between the lines the code is pretty self-explanatory.

Good Luck

Widgitize the Sidebar

Right, I have been working with wordPress for a long time now. I was recently working on a WordPress theme and working on the sidebar. You know that Sidebar’s are widgitized so if you are looking for a quick way to add a sidebar widget follow this quick method.


if (function_exists("register_sidebar")) {
    'name' => 'left-sidebar',
    'before_widget' => '<div class="side-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',

Right, this code goes into the functions.php file of your active theme. This function adds a Widget in your theme.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left-sidebar') ) : ?>
<!-- Add your stuff here -->
<?php endif; ?>

The code above goes in your sidebar or your where you want to add the sidebar.




My First Share

Right, I wanted to make the blog kick off right and with something that would benefit all. I have already started to publish my portfolio stuff on behance (after a major data loss). While searching through archives I found this design, I did for a client and was not accepted.

So, instead of going through the trouble of selling it, I thought why not give it for free :) . So here you go with a download link at the very bottom.

Purpil Free Theme
Purpil Free Theme

P.S. This theme was made for Object Synergy.

Oh the Download Link



A Blog!

Yup, finally decided to install a Blog, again.

This time there is going to be one theme (Twenty Thirteen, Yup! Already in Love <3), and yes, currently I am using WP 3.6 Beta 2 :)

I’ll be sharing some stuff that I work on a daily basis along with free stuff as well.