Experience [Markup Languages] By Aqib Raza

function is_woocommerce_page () {         if(  function_exists ( "is_woocommerce" ) && is_woocommerce()){                 return true;         }         $wc_keys   =   array (                                         "woocommerce_shop_page_id" ,                                         "woocommerce_terms_page_id" ,              ...

Adding Google Web Fonts in WordPress Themes We have mostly seen folks using the first two methods. The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this: @import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);     You can also combine multiple font requests into one.  Here is how you would do it:   @import url(http://fonts.googleapis.com/css?family=Lora|Oswald);   This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. If you MUST use @import, then at least combine multiple requests into one.    You will most likely have to edit your header.php file, and paste the followi...

The @media query is 1/3 of the recipe for responsive design. It is the key  ingredient that, in it's simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. The standard media queries for different devices: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /*** iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /*** iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /*** iPads (portrai...

You'll probably get a variety of different answers due to the fact that both UI and UX design have that distinct cross-disciplinary character that makes it hard to have a single, solid definition. Here's my perspective on it though. Some random thoughts on the process itself that would hopefully help you distinguish between the two. UX Design   UX architecture intelligently provides for the user's interactive experience via features and functionality of a software-based product or service. This is achieved through a UX process which includes user persona definition, user scenarios/task flows, primary and edge use cases, architecture hierarchy of content and user decision points, etc... The UX-er is known as the primary user-advocate on a team, thereby leading the efforts around understanding the user needs/desires along with balancing those of the business stakeholders. UX documentation informs (and is informed by) content and development requirements; UX informs cre...

The srcset Attribute The srcset attribute, allows us to specify a list of sources for an image, which will be delivered based on the pixel density or size of the user’s screen. So we can say that implementing the srcset attribute is a good way to provide to the browser a set of “suggestions” about the correct behavior it should have with a certain type of image. By doing so, we improve the loading of our page and the experience of our users. Example:  <img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w" />

What is target="_blank" Definition and usage:  _blank is used to open the document in the new window.This value does not require the use of any frames. "_blank" is popular in web pages which are devoted to links to "other resources on the net". By opening a new window for each resource, the user has a sense of a "main" page and "secondary" pages. Example : <a href="http://google.com/" target="_blank">Google</a>  

Zpingu Effect  Zpingu Effect is a gulri slider add-one. How to use Zpingu Effect: Go to WordPress admin panel setting menu and select "Gulri Slider" as shown in the figure. Select default for Gulri Slider's default effects or select Zpingu effects and save changes. Go to the page edit options where the slider is required.  Select add media. Create a gallery and insert it. Change gallery to gsp and update. All done. :)