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

How to disable responsiveness in the admin theme of WordPress 3.8

How to disable responsiveness in the admin theme of WordPress 3.8 ? How do I disable responsiveness of WP 3.8 admin ? Is there any way to disable responsiveness ? I want to disable the responsive hiding feature for tablets and mobile for the newly introduced WordPress 3.8 admin back end.

The question comes, Why do you need to disable the responsiveness ? So, here is a problem/situation that describes WHY ?
Stop Responsiveness WordPress 3.8
Problem/Situation:
I just updated my WordPress setup to WP 3.8 and most of my custom functionality are either inaccessible or very hard to manage on mobile devices. There are some things which doesn’t even get displayed on mobile devices. Earlier, I was able to manage my site’s functionality from backend on a mobile device too. Even though it was not responsive and not so cool. The problem is that I have installed some custom made plugins which were made keeping an eye on the old style admin theme and it provides me some custom made interface on the admin side. Obviously these were not made responsive. Now, with this new WordPress admin theme, all those custom interfaces are completely messed up. So I have two options:

  • Either revert back to WP 3.6/3.7 ( but I really like the look and feel of the new WP 3.8 theme yet I don’t need the responsive property 🙁 )
  • Or make changes to all the custom made screens/interfaces in the admin side to be responsive. ( I can do that, but it would take much time to accomplish. Also, does it worth doing just for the sake of a new responsive admin theme in mobile devices ? 😕 )

How can I keep the new, super cool, awesome theme of WordPress 3.8 yet disable responsiveness of the theme ? ❓ ❓ ❓

Solution:
I tried to search for any solution but didn’t find any. Here is a quick solution that I have done to get back my custom functionality in the admin screen.

  1. Create a plugin to add custom code.
  2. Take the css file that is responsible for the wp-admin side styling and responsiveness. Make changes to remove the responsive property out of it. Basically remove all the media queries written for mobile devices.
  3. De-register the default admin styling that comes with WordPress.
  4. Register and enqueue the changed css file again to apply the custom styling.

Download the code as a plugin: disable-responsive-admin

Code for disabling responsiveness:

Download the above code as a plugin: Plugin to disable responsiveness in WP 3.8 admin

Note: This never a proper/good way of doing changes to admin styling. Still, as I have upgraded and would like to keep the theme and remove responsiveness, I am using the above quick solution. If you are facing the same problem as I am, use the above procedure or download and install the plugin. You can modify the css file present inside the plugin directory too. Caution: Use with your own risk. 🙂 🙂

Lightweight and better responsive navigation menu with “responsive-nav.js”

Responsive Nav is a tiny JavaScript plugin which weighs only 1.7 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

http://responsive-nav.com/

Mashable changed its platform from WordPress to Ruby on Rails

Mashable New Look

Mashable New LookMashable, the latest in social media, tech, world news, business, entertainment related blog was based upon wordpress cms. Recently it has changed its look and feel with completely new style and fully responsive layout. Ruby on Rails with Backbone JS and Handlebarsare the platforms used to built the new site. Features like Adaptive Design, “Next Big Thing” and “Velocity” sections, Infinite scroll features inplace of old pagination and Microcontent facilty to share thing on the socual web have been added.

To see the design and layout of Mashable visit: Masahable

From Quora:
Read Quote of Chris Heald’s answer to Mashable: Is Mashable still using WordPress as the cms/platform ? What are the technologies behind this new look and feel? on Quora

Mashable is now running on a custom technology stack. The public-facing bits are a Ruby on Rails backend, with a lot of the templating work pushed to the front-end with Handlebars and Backbone. We’ll be doing a full writeup on the build in the near future.

http://qr.ae/pWOHf

Loading facebook social plugin into AJAX generated dynamic content. [Solved]

To include Facebook social plugins(ex: Facebook Comments http://developers.facebook.com/docs/reference/plugins/comments/) into our site, we use some java-script and some HTML structure provided by facebook. It works fine until you have AJAXified your pages. If your site refreshes each page on each request then facebook social plugins work perfect.
Problem occurs when the HTML structure is loaded via AJAX and the script used for FB is not called again after the ajax response. This happens because Facebook parses the page only on initial load and so doesn’t pick up the dynamic content. To make it work on AJAXified content, we need to explicitly tell it to re-parse the entire page, or just the new content.

Recently, I used a plugin called “Ajaxify WordPress Site” which makes a wordpress website completly AJAXified semlessly. Really nice plugin to ajaxify WP sites without any hassel, but one problem I faced with this was Facebook Comments not being rendered after AJAX response for which the answer is “FB.XFBML.parse()” function call.

Example:

1. JavaScript SDK which needs to be included once on the page.

2. HTML code to be placed wherever we want facebook plugin to appear on your page.

So, in our case, say this bit of HTML code comes dynamically with AJAX not on page refresh. So how can we display the facebook comments ?

Answer is simple: Call the ” FB.XFBML.parse() ” explicitly inside the AJAX success function, which will re-parse the html and render the Facebook comments section. 🙂

3. Code for AJAX success block with “FB.XFBML.parse()” call.

Hope this will help someone solving facebook social plugin issue with AJAX content.. 🙂

How to display profile image in google search

May be you want to display your google profile image next to the search result for your blogs in Google search. If you google something, you can see some small images next to the search results. These are nothing but the google profile images of the blog authors. When you see that photo show up in your search results, it means Google are verifying that the blog post was written by that person. If you click on the name in the search results, it takes you to that blog author’s Google+ Profile. You can join me on Google+ here!

Thankfully its very easy to configure your site to be compatible with the new author photo snippets that show up on Google Search. However not guaranteed that your photo, or a photo of one of your authors, will appear in Google Search immediately. It is rumored that Google has enabled that feature only for selected blogs and sites based on some criterias.

How to do it ?

  1. Create an author page or “About Me” page on your blog site(same domain).
  2. Add link to this author page from your blogs.
  3. Add a link to your Google profile in the Author page.
  4. Linking Back from Google Profile to your Author page/About Page.Here we need to link back from the Google profile to the about page on the website. Open your Google Profile, click the Profile icon at the top and then the Edit Profile button at the top. Locate links on the right side and select the Add custom link option.

The idea is actually extremely simple. You link from your blog to your Google Profile – Then, from your Google Profile to your blog. This reciprocal linking verifies that the owner of that Google Profile is also the (or an) author on that blog. If you own a multi authored blog it works too. You just need your bloggers to link from their Google Profile, to their author page on your blog.

I’d like you to read the instructions from Google,Google: Adding author information in search results which I followed to add the profile image.

To summarize:
Option 1. Add your name and email to your content (recommended for sites with content by multiple authors)
Option 2. Link your content to your Google Profile, and vice versa

Testing with google’s Rich Snippets Tool:
Once you have followed the instructions, check that you have done it correctly using Google’s Rich Snippets Testing Tool. This tool will let you know if the code is working and show you what your blog will “look” like in Google’s search results, AFTER they have activated it. To use the Rich Snippets Testing Tool, simply paste the URL (address) of one of your blog posts into it and press the preview button .

Then, if everything looks OK and you see your photo in the preview, it’s a matter of waiting… I look forward to seeing your smiling faces when I’m next searching!