How to pass dynamic values from PHP to CSS/JS in WordPress

There are situations when you have to use some values stored in DB or values being calculated in PHP script based upon different conditions in the java-script and css code. This can be achieved by writing the inline js/css code directly inside the php script. But in WordPress, this can be done very easily with help of functions built for that which is kind of more neat and clear way of doing the same.

Image: Flicker

Photo Credit: Dmitry

Pass dynamic values from PHP to JS in WordPress:

wp_localize_script( $handle, $name, $data ) : Makes any dynamic data available to your java-script that is available in the server side of WordPress.

Now in the JS code the above passed values can be accessed as: ajaxobject.ajaxurl, ajaxobject.ajaxnonce

 

Pass dynamic values from PHP to CSS in WordPress:

wp_add_inline_style( $handle, $data ) : Adds in-line style with dynamic data being passed from php.

It will add inline css into the header of your page like the below.

 

References:
http://codex.wordpress.org/Function_Reference/wp_localize_script
http://codex.wordpress.org/Function_Reference/wp_add_inline_style

ERROR: failed to mkdir C:\php\pear\tests\PHP_CodeSniffer\CodeSniffer\Core\File [Solved]

If your PHP installation has been done somewhere else other than the C:\ drive, then “pear install” command may throw errors.

Example: Here in my case, the xampp has been installed into E:\ drive and the “pear install” throws error.

Solution:
I get into the “pear” directory and checked config values set for different pear related directories. All were set to C:\ drive by default. So, we need to change those settings to correct path.

Now it works !! :)

Setup PHP CodeSniffer along with WordPress Coding Standards [ Windows, XAMPP ]

Image: Flicker

The other day, I had some problem setting up latest WordPress coding standard for PHP CodeSniffer on a Windows machine. It was throwing some errors/warnings like the below. There were some others, but eventually we had fixed some of those. However the WP coding standards were not getting listed in phpcs. :(

Here are the steps to fix the problems and setup PHP CodeSniffer along with WordPress Coding Standards namely WordPress, WordPress-Core, WordPress-Extra and WordPress-VIP. FYI, I am on a Windows 7 box with XAMPP setup for Apache, MySql & PHP.

Image: Flicker

Image: Flicker cc

Install PHP CodeSniffer on Windows through PEAR installer:
Uninstall the old CodeSniffer(if any):

Install the latest CodeSniffer using PEAR:

It failed, that means we need to clear the cache:

Again, try installing the latest version of the PHP_CodeSniffer package:

Update the channel as asked above:

Upgrade pear too. Incase if any things are old.

Do a cache clear again:

See the list of default coding standards in PHP CodeSniffer:

 

Install WordPress coding standard definitions for the CodeSniffer:
Navigate to the coding standards directory:

Fetch the WordPress coding standards into CodeSniffer’s standards directory. (if git command not working on your command prompt, you may use any gui for git clone)

As, all of the individual standards of WordPress namely WordPress, WordPress-Core, WordPress-Extra and WordPress-VIP are in one directory, for phpcs to be able to detect the standards we need to add the path to phpcs’s installed_paths.

Check if all the installed standards are listed now:

 

How to use PHP_CodeSniffer:
You can use command prompt to check your code, or you can also configure the same with different IDEs like NetBeans, PHPStrom etc.

You can write the output of code sniffer to a file:

How to install Xdebug and Webgrind on Mac OS X – [everything from terminal]

xdebug-profiling

Recently, I have been asked to help install and setup XDebug along with Webgrind in a Mac OS X system using SSH on one of my colleague’s system. All of this setup were done remotely from another system. Here are the steps/commands for achieving the same.

Steps for installing Xdebug:

xdebug-profiling

  1. Get the information about installed PHP on the system. This is needed to get the custom installation instructions from xdebug website here: http://xdebug.org/wizard.php
    Copy the whole output of the above command and paste it in the textarea provided here: http://xdebug.org/wizard.php
  2. Get the url for the latest xdebug script and download it to your mac.
  3. Compile and build the php extension from the source. Install the same.
  4. Enable Xdebug in the php.ini file.
    1. Find the complete path of the xdebug.so file prior to editing the php.ini file. The path looks something like this: /usr/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so Can be located using the command:
    2. Edit the php.ini file and add the following lines to the extreme end.
      Lines to be added:
    3. Restart Apache.

Setup Webgrind:

  1. Download and put Webgrind source into a folder in webserver. ( /Users/subharanjanm/Sites/webgrind/ in my case )
  2. Create a folder inside /private/var/tmp/ to store and read profiler files by Xdebug and Webgrind. This step can be skipped if you want to use the “tmp” directory directly to write files.
  3. Make changes needed in the Webgrind config file.
    Change the values of these two variables as per the path.
  4. Finally add following lines into php.ini below the xdebug settings to enable profiler and its related paths.

Now you can append ?XDEBUG_PROFILE=1 into the url of your php script to see the profiling data on Webgrind interface.

webgrind_xdebug

Selectively disable plugins on WordPress for a specific request

selective-loading-wp-plugins

For last few days, I have been working on a WordPress project where I am creating a set of APIs to be consumed by mobile apps. While writing these REST APIs I have tried to make the things work faster. While checking the REQUEST/RESPONSE time, I found that the WordPress initialization is taking much time then the API method processing. I looked into the time taken for the whole flow through xDebug Profiler and discovered that there are lots of plugins which are not needed for the API processing and are consuming most part of the loading and API response timing. Plugins like Backup WordPress, Contact Form 7, Simple Responsive Slider, Google Site-map, FancyBox, WordPress SEO etc. are required for the website front-end and don’t really play any role in the APIs.selective-loading-wp-plugins

Now, my intention was to selectively disable the plugins specifically for the API requests coming to the server. How to do that on WordPress ? Before jumping to the solution, below are some backgrounds:

Basic flow of WordPress init for loading the plugins.

WordPress loads it’s core environment –> Must Use plugins are loaded –> if you’re on multisite setup – Network activated plugins are loaded –> Registers a few initial post types –> Sets up the theme directory –> finally loads the currently active plugins.

The relative lines of wp-settings.php:

wp_get_active_and_valid_plugins() is the function which fetches all the active plugins and load them. This function gets these active plugins from the database where the list of active plugins are stored as an array in the wpdb_options table with option name as “active_plugins”. So, we can use the filter hook “option_active_plugins” to do modification to the list active plugins for temporary period.

Code for selectively disable plugins on WordPress for a specific request. This must be made a MU (Must Use) plugin to load and remove the plugins which are to be removed while initializing the WP.

How to compare files on Mac OS X

Questions those come into mind when someone switches from Windows to Mac OS X for web development and wants to compare files:

  • Which editor has support for file diff or file compare functionalities on Mac OS X ?
  • Which is the best tool for file comparison while developing on Mac OS X ?
  • How to use FileDiff package on Sublime Text editor ?
  • How to use File Compare functionality in Text Wrangler in mac OS X ?

Answer/Solutions:
After developing 4 complete years on Windows, I have recently moved into a MacBook Air. During development, one thing I was missing was the “File Compare” plug-in on Notepad++ which I was using for a long time while on Windows. Even though NotePad++ doesn’t have a Mac version, there are some alternatives to that on Mac OS X. Two editors which I find very useful are Text Wrangler and Sublime Text 3.

 

File Compare on Text Wrangler:

  • Open both the files on the TextWrangler editor. Did I mention, this is a free editor and best for editing text based files.
  • Now select both the files in “Opened Documents” sidebar. [ ⌘ + Click ]
  • Right click on the selected files and click on “Compare”.

How to compare two files on textWranglerCompared Differences TextWrangler

 

File diff on Sublime Text 3:

  • Install “Package Control” for Sublime if you haven’t yet. How to do that ? https://sublime.wbond.net/installation
  • Now open the package installer and install “FileDiffs“.
  • To diff. two files, open those two files in Sublime Text 3. Right click on that file tab and click on “Diff Tab”.
  • Now you can use the diff. file generated (unified) to see changes between two files.

Diff with TabUnified Diff Result

 

To know how to integrate DiffMerge(an application to visually compare and merge files) with Sublime Text read: http://subharanjan.com/integrate-diffmerge-with-sublime-text-comparing-files/

How to integrate DiffMerge with Sublime Text for comparing files

DiffMerge Window

The other day, I was searching for some ways to compare two files(one from production and another from the local development of the same file) in Sublime Text. I found that there is no default tool to compare two files, thats why I installed “FileDiffs“, a package which provides the above needed functionality. What this tool does is: it provides you a result file which contains unified differences from both the compared files with + (Plus) & (Minus) symbols. Even though it serves the purpose, but for someone who has been using compare tools like WinMerge, or the color-full GUI in Notepad++ editor on Windows, the experience will be horrible.

However a cool feature of this “FileDiffs” package is that, it can integrate with any external diff. tools through command line. So, I installed “DiffMerge“, an free application to visually compare and merge files. Below is the set of settings that integrates “DiffMerge” with “FileDiffs” on “Sublime Text 3″.

How and where to apply these settings ?

  • Go to: Sublime Text –> Preferences –> Package Settings –> FileDiffs –> Settings – User
  • Copy & paste the above code in the FileDiffs.sublime-settings file.
  • Restart Sublime and see the file diffs visually in a nice graphical way. :)
how to apply settings for FileDiffs

how to apply settings for FileDiffs

Diff with Tab - FileDiffs on Sublime Text

Diff with Tab – FileDiffs on Sublime Text

DiffMerge Window

DiffMerge Window

List of useful tools for WordPress development

wpgear

When a developer starts WordPress development and tries to make the process easier and faster, generally he searches for best tools and various boiler plates which can alleviate the manual task of starting the development from scratch.

wpgearWordPress Gear (WPgear.org) is a website which lists out lots of useful tools those are free and GPL(OpenSource). The list includes tools and its related information for all aspects of WordPress development. Starting from WordPress base tools to Debug tools, PHP boiler plates, Meta fields frameworks, Theme development tools and lot more..

New and latest tools are being added constantly into this list as this is a community driven site. Whole of the code for this page resides in Github and anybody can add any free tool into the list. Just fork the project, add/edit your tool with a link, submit a pull request.

Visit WPGear.org to browse the complete list of tools. Happy WP Coding :)
1) http://wpgear.org/
2) https://github.com/wycks/WordPress-Gear

Get your website on https and get ranked higher on Google

HTTPS as Google's ranking signal

In a recent blog, Google has announced that TLS, SSL enabled websites(https://) will be getting added advantages in SEO ranking. In order to make the Internet more safe and secure, Google has started using HTTPS as a ranking signal, that means if you site is HTTPS enabled you will get ranked higher. However they have also cleared that this ranking signal weighs less than signals like high-quality content etc.HTTPS as Google's ranking signal

Even though, some may think it as hypocritical of Google who has products which doesn’t follow HTTPS( like the BlogSpot), but Google has made this a part of SEO and may increase the weight of this ranking signal in near future. The whole purpose of this initiative is to keep everyone safe on the web. Website owners !! its time to switch from http to https. Encryption is going to be the key to SEO !! So, Get your website on https and get ranked higher on Google.

For more details visit the official Google Webmaster Central blog: http://googlewebmastercentral.blogspot.in/2014/08/https-as-ranking-signal.html

How to block the USSD notification/balance update messages on Android smart-phones ? [Solved]

Problem description:
In India, whatever internet plans you take for your smartphones, be it 3G, 2G Internet, GPRS etc. it always keeps randomly disconnecting. Sometimes it reconnects automatically, sometimes it takes a while. So, during this process we keep getting a remaining balance message or notification for the data usage which is nothing but a USSD.

What is USSD ?
USSD (Unstructured Supplementary Service Data) is a Global System for Mobile(GSM) communication technology that is used to send text between a mobile phone and an application program in the network. USSD is similar to Short Messaging Service (SMS), but,unlike SMS, USSD transactions occur during the session only. USSD is commonly used by prepaid GSM cellular phones to query the available balance.

These USSD messages for remaining balance and used balance are such that: these will asks the user to press the “OK” button and unless you press that, it stays like that on the screen and prevents you from performing any other task on the phone. It creates an overlay kind of screen which doesn’t allow the user to touch anything else unless you click ok button for each popup. Each time you send a sms, each time your internet gets disconnected etc. a notification popup will be displayed to be read by the user. These are so much in numbers that some one gets irritated.

There are times when you keep your smart-phone unused for more than one hour, and when you get a call, you have to press the “Ok” button 20-25 times on these popups to receive the call. Its really annoying !! Now, how to block those type of messages ? These frequent balance updates, data usage status are of no use/very less use.

Solution:
There is a nice app called Quiet Balance. Named as Balance Update / USSD blocker on Google Play. This app specializes in blocking USSD messages.

  • It provides ways you can block only specific type of messages. It has three types of matching methods for blocking USSD messages.
    1. Substring match: You may choose to block messages that contain a specific text.
    2. Keyword list: a list of keywords (comma separated keyword list)
    3. Regular expression: for advanced users by writing regular expression.
    When these conditions are matched, it triggers a block of that ussd message.
  • You can also choose to show the balance update message once per day (or week/month). This will cause the first balance update message to show up, and all other messages will be blocked for the rest of the day.
  • Last 25 messages are saved in the message log, along with indication if the message was blocked or allowed.

Go get the app and install on your Android phone and make it Smart :) :)
Get it on Google Play

 

 

Slide to see all the screen shots of the App: