I think most of you have experience that when your client asks to show/hide any particular section from VirtueMart pages so that might be from sidebar or somewhere else and that was placed in default template file. Now in this case you have only 2 option so either to prepare a new template for VirtueMart pages or by preparing hidden menus for each product and category pages, which actually takes time and sometime not feasible in case of large number of products and categories.

So to eliminate such a situation you can place conditional statements to detect virtuemart pages, which is quite simple and easy to manage and for that you simply have to place the below code in you template’s index.php to show/hide any section, module or else very easily.

Condition to Detect – If Virtuemart Page

Below code will detect and condetion will return true for all virtuemart pages so for VirtueMart Category page, product page or cart page

<?php
/* getting value in “Option” variable */
$option = JRequest::getString('option', null);  
?> 

<?php
/* check if it is VirtueMart  page or grabbing  content using  com_virtuemart*/
if ($option == 'com_virtuemart')
{ ?>
  Yes this is a VirtueMart  page and you can place your module or else by replacing   this line
<?php } ?>

Condition to Detect – If Virtuemart Category Page

<?php 
/* getting value in “view” variable */ 
$view= JRequest::getString('view', null); 
?>

<?php 
/* check if it is VirtueMart  category page*/
if ($view == 'category') 
{ ? >
  Yes this is a VirtueMart  category page and you can place your module or else by replacing this line
<?php } ?>

Condition to Detect – If Virtuemart Product or product detail Page

<?php 
/* getting  value in “view” variable */
$view = JRequest::getString(view, null);   
?>

<?php 
/* check if  it is VirtueMart product detail page*/
if ($view == 'productdetails') 
{ ? >
  Yes this is a  virtueMart product detail page and you can place your module or else by  replacing this line
<?php } ?>

As in desktop version we can get much space to float our website main navigation but it mobile device it quite difficult to fit in, and either that requires to convert normal menu navigation to dropdown navigation or shrinking the menu to fit in device or something else that fits in your layout design.

So here I am sharing one of the best Joomla Module and plugin I experienced with is – Joomla Maxi Menu CK

Joomla Maxi Menu CK

You can download module for Joomla Maxi Menu CK, which is actually non-commercial and free to use.

Download Joomla Maxi Menu CK

Plugin Maximenu CK Mobile

After downloading and installing the module you have to buy its mobile plugin – Plugin Maximenu CK Mobile. This plugin will allow you to transform your normal navigation to responsive or mobile navigation.

Just publish the plugin and choose the module you want to use as main mobile menu in the options. Then you can choose the resolution limit to activate the mobile menu, and one of the two preinstalled themes.

After activating and configuring the plugin you will notice that on mobile devices standard Maximenu will be hidded and new control bar will appear at the top of the page with an icon to open the mobil menu.

Here in this post I am going to share the way to call Joomla module in category page so the one particular module get visible only when browsing categories and subcategories pages. So this will be something like including {loadposition module} inside Virtuemart template file

So let open the file to add the code – /components/com_virtuemart/views/category/tmpl/default.php and place the below code in to it.

<?php
      /*   Calling Joomla Module in Virtuemart category page */
           $modules =&  JModuleHelper::getModules('module-name');
           foreach ($modules as $module)
           {
              echo JModuleHelper::renderModule($module)
           }
  ?>

Just don’t forget to update the “module-name” with your actual module name

There was a time when web designers and developers were forced and restricted to use system fonts that were commonly found in most of the machines. But now the scenario has totally been changed and the use of Non System fonts is drastically increasing.

Adding Non System fonts using Google Web Fonts

Adding Non System fonts is quite easy, as you just have to follow very few steps mentioned below

1. Select a font of your choice from Google fonts library

2. Click to “Quick Use” link as shown below

   

3. Scroll down the Google font page to step 3, where you will find 3 ways to add Google fonts – Standard, import and JavaScript. Whereas I prefer the “Standard” one so adding <link> tag in <head> section.

   

4. If you like you can combine and use 2 or more fonts with pipe “|” sign

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji|Headland One" media="screen">

5. Finally it’s time to integrate the linked font in CSS. So for that scroll a bit more in Google Font page and copy the given CSS rule to your website style sheet.

   

Enjoy the Non System using Google Web Fonts.

Adaptive Images detects the device screen size and automatically scale, re-size and save the images in cache folder at run time. The best part about this is that it just not only reduce the image size to fit on different devices, instead it also reduces the images size in bites and kilo bites, so that they can quickly download and render on devices using low bandwidth internet.

Let’s start with downloading required resources form the Adaptive Images official website. Further after downloading the .zip you will get the directions to implement under the same zip file, but additionally here I am it sharing with you.

Download Image Re-size Script

Implementing Adaptive or Responsive Images

1. Copy adaptive-images.php and .htaccess into the root directory of your site. If you already have a htaccess file DO NOT OVERWRITE IT.

2. Copy the below Javascript code into the <head> of your site.

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+';  path=/';</script>

3. Prepare a folder on root to cache the images as per screen resolution. So as per default code written in PHP file, you can prepare a folder named as “ai-cache”. But if needed you can change the folder name as per your choice, just don’t forget to update the new name in CONFIG area of PHP file.

4. If you are already having the .htacces file in your website root folder and not using the file in zip folder, then simply add the below code in it. JUST DON’T FORGET TO BACKUP YOUR ORIGINAL .HTACCESS BEFORE ANY THING.

<IfModule  mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On
  # Adaptive-Images  --------------------------------------------------------------
  # Add any directories you wish to omit from  the Adaptive-Images process on a new line, as follows:
  # RewriteCond %{REQUEST_URI} !some-directory
  # RewriteCond %{REQUEST_URI}  !another-directory
  RewriteCond %{REQUEST_URI} !assets
  # Send any GIF, JPG, or PNG request that IS  NOT stored inside one of the above directories
  # to adaptive-images.php so we can select  appropriately sized versions
  RewriteRule \.(?:jpe?g|gif|png)$  adaptive-images.php
  # END Adaptive-Images  -----------------------------------------------------------
</IfModule>

5. In the above code there is code line – RewriteCond %{REQUEST_URI} !assets. You can update the folder name “assets” as per your choice, which actually mean that you want to restrict the mentioned folder images to get resize.

6. You can now open the PHP file and have a play with the settings that are in the CONFIG area. By default it looks like this:

/* CONFIG ----------------------------------------------------------------------------------- */
$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)

$cache_path  = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!

$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100

$sharpen     = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?

$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)

$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)

/* END CONFIG --------------------------------------------------------------------------------------

$resolutions are the screen widths we’ll work with. In the default it will store a re-sized image for large screens, normal screens, tablets, phones, and tiny phones.
In general, if you’re using a responsive design in CSS, these breakpoints will be exactly the same as the ones you use in your media queries.

$cache_path If you don’t like the cached images being written to that folder, you can put it somewhere else. Just put the path to the folder here and make sure you create it on the server if for some reason that couldn’t be done automatically by adaptive-images.php.

$sharpen Will perform a subtle sharpening on the rescaled images. Usually this is fine, but you may want to turn it off if your server is very very busy.

$watch_cache If your server gets very busy it may help performance to turn this to FALSE. It will mean however that you will have to manually clear out the cache directory if you change a resource file

What it just need a very few line of CSS code, CSS3 media queries, and JQuery. So let’s start the session.

HTML to prepare dropdown navigation

1. Adding Media viewport inside the <head> tag – :-  if you are already using a responsive layout structure, then no need to add Media viewport again as that will be already there in your page <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

2. Placing the navigation code inside <nav> tag – if you are using a WordPress site then simply place the navigation code inside the <nav> tag. So your navigation code will look something like this -

<nav><?php wp_nav_menu( array( 'theme_location' =>  'primary' ) ); ?></nav>

If you have a normal HTML or PHP site then your navigation code will look something like this –

<nav>
  <ul>
     <li><a  href="#">Home</a></li>
     <li><a href="#">About  Us</a></li>
     <li><a href="#">Our  Services</a>
        <ul>
           <li><a href="#">Web Designing</a></li>
           <li><a href="#">Web Development</a></li>
        </ul>
     </li>
     <li><a href="#">Contact  Us</a></li>
  </ul>
  </nav>

CSS

Now by default we are going to hide the dropdown navigation and instead we will force horizontal navigation (normal navigation of your website) to get displayed. So for that simply place the below CSS code inside your Style sheet –

nav select 
{
  display: none; /*= Force dropdown navigation to hide on desktop = */
}
@media (max-width: 960px)  
{
  nav ul     { display: none; } /*= Force normal horizontal navigation to hide mobile devices and ipad = */
  nav select { display: inline-block; } /*= Force dropdown navigation to get displayed on mobile devices and ipad = */
}

JQuery to prepare Dropdown Navigation using tag

Simply place the below code inside the < head > tag of your template file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
 $(function() {
$("<select />").appendTo("nav"); 

$("<option />", 
{ 
   "selected": "selected", 
   "value"   : "", 
   "text"    : "Site Menu" // default <option> to display in dropdown 

}).appendTo("nav select"); 

$("nav a").each(function()
{ 
 var el = $(this); 
 $("<option />", { 
     "value"   : el.attr("href"), 
     "text"    : el.text() 
 }).appendTo("nav select"); 
});

$("nav select").change(function() 
{ 
  window.location = $(this).find("option:selected").val(); 
}); });
</script>

Here you are all set, just go and check the out on your mobile device and ipad.

Before moving to the core code I would like to share that basically Widgets are the small application that can be installed/coded and executed within a web page, they are derived from the idea to re use the code and allow users to turn personal content into dynamic web applications.

Here in my example I am sharing the base to create custom widget in WordPress. But you can place your own code as per your requirement just by replacing “// CUSTOM WIDGET CODE GOES HERE” in the below code. So might be you can prepare a widget to display latest 5 blog posts, random posts or else.

So what you simply have to do is – Place the bellow code in function.php of you activated theme folder

<?php
class mycustomwidget extends WP_Widget
{
  function mycustomwidget()
  {
    $widget_ops = array('classname' => 'mycustomwidget', 'description' => 'This is my own customized widget' );
    $this->WP_Widget('mycustomwidget', 'My Custom Widget', $widget_ops);
  }
 
  function form($instance)
  {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
  }
 
  function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }
 
  function widget($args, $instance)
  {
    extract($args, EXTR_SKIP);
 
    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
 
    if (!empty($title))
      echo $before_title . $title . $after_title;;
 
    // CUSTOM WIDGET CODE GOES HERE
    echo "<h1>This is my new widget!</h1>";
 
    echo $after_widget;
  }
 
}
add_action( 'widgets_init', create_function('', 'return register_widget("mycustomwidget");') );?>

Just don’t forget to add your own code in place of // CUSTOM WIDGET CODE GOES HERE and if you like you can also change the class name from “mycustomwidget” to what you like.

Enjoy you wordpress custom widget.

That was a very shocking moment for me when I was continuously receiving the malware infection alert from our hosting company. As they told us that our websites hosted on their sever were compromised by Malware attack and that were injected through direct FTP access, so that was either by my machine or any of our collogues having the FTP access.

Malwares Symptoms and Malicious Code

In my case I noticed the front end of WordPress sites were completely get un-styled and was looking wearied as a UI point of view. Then I noticed a malicious code in header.php of theme folder that was looking something like this.

<?php eval(base64_decode("aWYoZnVuY3Rpb25fZXhpc3R.......

And luckily I was aware of a website to scan Malware that is http://sitecheck.sucuri.net, so with the help of this sucuri I scanned my all websites and get to know the infected files, and by luck that was only header.php and no any other file get infected.

How to remove Malwares form WordPress Websites

Here are very basic steps to remove malware from WordPress sites.

1. Scan you website with http://sitecheck.sucuri.net
2. After knowing the infection and infected files either you can manually remove the malicious code directly accessing you FTP and files or you can let the sucuri magical file to do this. For that you simply have to
   1. download wordpress-fix.txt
   2. Rename it to wordpress-fix.php and upload it to the root of infected domain using any FTP Client.
   3. Navigate to http://yoursite.com/wordpress-fix.php
   4. And just wait for the magic.

   In my case I gone through the manual process as that was bit late when i get aware of sucuri magical file (but this really works well). And if you like you can read more about sucuri malware fixing file

3. After cleaning the malwares it’s time to secure your website by reinjection of malwares and unauthorized access and for that you have to follow these simple steps –
   1. Reset your FTP and WP Admin account password
   2. Update the Files and Folder permissions on FTP so as general it should be –
      • Folders (directories): chmod 755
      • Files: chmod 644
      • Your wp-config.php file: chmod 400

      But in my case I updated the header.php to 444 i.e read only. I did this just to prevent from reinjection in between cleaning up the other websites on same hosting account.

4.  Then at the top of anything else –
   1. Always choose strong password
   2. Keep up to date with latest WordPress and Plugins
   3. Change the WordPress Table Prefix (use WP Security Scan)
   4. Change WordPress Secret Keys (use WP Security Scan)
   5. Always scan your computer for virus, malwares, spywares, trojans and other infections and loopholes with licensed Antivirus.

After following the above steps all manual work, the next step is to install few of the best working WordPress security plugins, that will going to steel shield your website and hack proof up to a very good extend.

Best of all WorpPress Security Plugins and Tips to make you WordPress site more secure

1. Wordfence – scans your site for viruses, malware, trojans, malicious links, protects your site against scrapers, aggressive robots, fake Googlebots, protects against brute force attacks, It Constantly scans your posts, pages, comments and plugins for malware URL’s, Send email alerts and notification while detecting any loop hole, plugin update, code change in FTP file and much much more.
   Download Wordfence
2. Exploit Scanner – This plugin searches the files on your website, and the posts and comments tables of your database for anything suspicious. It also examines your list of active plugins for unusual filenames.
   Download Exploit Scanner
3. Sucuri Scanner – Official Plugin by  Sucuri SiteCheck that scan results directly in your WordPress dashboard. The best way to know if your site is infected with malware or blacklist.
   Download Sucuri Scanner
4. WP Security Scan – WP Security Scan checks your WordPress website/blog for security vulnerabilities and suggests corrective actions such as:
   1. Passwords
   2. File permissions
   3. Database security
   4. Version hiding
   5. WordPress admin protection/security
   6. Removes WP Generator META tag from core code
5. Install Perishable Press 3G Blacklist – A great and effective .htacces security developed by Perishable Press. That simply requires some code to be pated in .htaccess file.

Then I have already shared few more best plugins to secure  WordPress website and few tips to secure WordPress website, so you can also refer this.

And I hope following the above steps you will make your websites a bit healthy and infection free.

So for example if your Virtuemart is configured to add 10% tax for Toronto, 20% for Alberta, 15 % for British Columbia and say if product sales price is $50. Now on checkout page buyer will ask to pay $ 72.5 as a total amount, bifurcating $(50 as sales price + 5(10% Toronto tax) + 10(20% Alberta tax) +7.5(BC 15% tax)).

Now as soon the buyer get logged in and confirm for the check out, all the added tax will get cut off and final tax will get applied on the basis state/province displaying on his/her shipping address.

Solution to resolve multiple tax issue

Here we have a trick, so by adding a condition to check that whether user is logged in or not, we can show/hide or add/remove the unwanted taxes.

1.0. Locate the file – \components\com_virtuemart\views\cart\tmpl\default_pricelist.php
and search for the below lines of code

<td colspan="4" align="right"><?php echo $rule['calc_name'] ?> </td>
  <?php if ( VmConfig::get('show_tax')) { ?>
     <td align="right"> </td> 
  <?php } ?>

<td colspan="4" align="right"><?php echo $rule['calc_name'] ?> </td>
  <?php if ( VmConfig::get('show_tax') && $user->id >0) { ?> 
   { ?>
     <td align="right"> </td> 
   <?php } ?>

<td colspan="4"  align="right"><?php echo JText::_('COM_VIRTUEMART_CART_TOTAL')  ?>: </td>

  <?php if ( VmConfig::get('show_tax'))  { ?>

   <td align="right">

     <?php echo "<span class='priceColor2'>".$this->cart->prices['billTaxAmount']."</span>"  ?> 

   </td>

  <?php } ?>

<td colspan="4"  align="right"><?php echo JText::_('COM_VIRTUEMART_CART_TOTAL')  ?>: </td>

  <?php if ( VmConfig::get('show_tax'))  { ?>

    if($user->id  >0) {  ?>

     <td align="right">

         <?php echo "<span class='priceColor2'>".$this->cart->prices['billTaxAmount']."</span>"  ?> 

     </td>

     <?php 

     } else  { echo "<td align='right'>  $0.00</td>"; } }

<tr  class="sectiontableentry<?php $i ?>">

 <td colspan="4"  align="right"><?php echo $rule['calc_name'] ?> </td>

   <?php if (  VmConfig::get('show_tax')) { ?>

    <td align="right">  </td>

   <?php } ?>

 <td align="right">  <?php echo  $this->cart->prices[$rule['virtuemart_calc_id'].'Diff'];  ?></td>

 <td  align="right"><?php echo  $this->cart->prices[$rule['virtuemart_calc_id'].'Diff'];   ?> </td>

</tr>

<?php

if($i) $i=1; else $i=0;

} ?>

<?php

if($user->id  >0){ ?>

 <tr  class="sectiontableentry<?php $i ?>">

   <td colspan="4"  align="right"><?php echo $rule['calc_name'] ?> </td>

    <?php if (  VmConfig::get('show_tax')) { ?>

      <td align="right">  </td>

    <?php } ?>

  <td align="right">  <?php echo  $this->cart->prices[$rule['virtuemart_calc_id'].'Diff'];  ?></td>

  <td  align="right"><?php echo  $this->cart->prices[$rule['virtuemart_calc_id'].'Diff'];   ?> </td>

 </tr>

  <?php

  if($i) $i=1; else $i=0;

  }

  }

<td  align="right"><strong><?php echo  $this->cart->prices['billTotal'] ?></strong></td>

<td  align="right"><strong>

  <?php  if($user->id >0)

  {

  echo $this->cart->prices['billTotal'] ;

  }

  else

  {

  echo $this->cart->prices['salesPrice'];

  }

  ?></strong>
</td>