:::: MENU ::::
Browsing posts in: WordPress

Using/Updating wp_localize_script() Dynamically

One of the greatest features of WordPress is its built-in function library that allows so much flexibility in web design.  Whether you are a plugin developer or theme designer, WordPress has functions that make your life a heck of a lot easier.

On occasion though, some of the functions that are super cool, could sometimes use a little tweaking. One of those functions is wp_localize_script().

Simply put, wp_localize_script: “Localizes a script, but only if script has already been added. Can also be used to include arbitrary Javascript data in a page.”

I usually find myself adding in “arbitrary Javascript data” in the page alongside my localization strings if they are needed at all.  A sample of the code used to generate the localized script looks like this:

[cc lang=”php”] __(‘Hello’),
‘world’ => __(‘world’)
);
wp_localize_script(‘enqueued-script’, ‘obj’, $localized_data);
?>[/cc]

Note that this function calls a previously enqueued script which is not covered in this tutorial.

WordPress will then print onto the final page a Javascript object that will look like this:

[cc lang=”html”][/cc]

From time to time, I have wanted to add in an element to this object dynamically, but if I decided to localize the script again prior to the page load, the output would look like this:

[cc lang=”html”][/cc]

wp_localize_script just adds the new data as a new line item regardless of whether or not the objects are the same. This is not ideal especially if there is the chance that it could grow any larger than just three elements in the object.

After much searching, I came up with a solution that does not require any hacking or changing of the WordPress core (yay!) and is actually fairly simple to implement.

First, before we call our wp_localize_script function, we need to check and see if any localized data exists in our script that we have already enqueued. To do that, we must access the global $wp_scripts; object and use the get_data() function:

[cc lang=”php”]
global $wp_scripts;
$data = $wp_scripts->get_data(‘obj’, ‘data’);
[/cc]

If the data is empty, we can go ahead and localize our script:

[cc lang=”php”]
if(empty($data)) {
wp_localize_script(‘enqueued-script’, ‘obj’, $localized_data);
}
[/cc]

However, if we have already localized the script and some data exists, we need to convert that into some useable data and add to it before putting it back. First, we are going to check if $data is an array. If not, lets convert it from the JSON format that it exists in. We will need to remove the last semicolon character and the “var obj = ” intro in order to convert it:

[cc lang=”php”]
if(!is_array($data)) {
$data = json_decode(str_replace(‘var obj = ‘, ”, substr($data, 0, -1)), true);
}
[/cc]

Then we can add the existing elements to our new array:

[cc lang=”php”]
foreach($data as $key => $value) {
$localized_data[$key] = $value;
}
[/cc]

Finally, we need to empty out the data that is currently localized and then localize our new array:

[cc lang=”php”]
$wp_scripts->add_data(‘enqueued-script’, ‘data’, ”);
wp_localize_script(‘enqueued-script’, ‘obj’, $localized_data);
[/cc]

Altogether, this looks like:

[cc lang=”php”]get_data(‘enqueued-script’, ‘data’);
if(empty($data)) {
wp_localize_script(‘enqueued-script’, ‘obj’, $localized_data);
}
else {
if(!is_array($data)) {
$data = json_decode(str_replace(‘var obj = ‘, ”, substr($data, 0, -1)), true);
}
foreach($data as $key => $value) {
$localized_data[$key] = $value;
}
$wp_scripts->add_data(‘enqueued-script’, ‘data’, ”);
wp_localize_script(‘enqueued-script’, ‘obj’, $localized_data);
}
?>[/cc]

In my example, the new Javascript object would look like this:

[cc lang=”html”][/cc]

Let me know if this helps you out in any way!


WordPress 3.3+ Toolbar Removal

I am currently in the middle of a project creating a user database in WordPress and I needed to remove the toolbar on the front end of the website so that users didn’t have access to it. This process is very simple to do.

The basic function that accomplishes this is:

[cc lang=”php”][/cc]

You can add this to your functions.php file, or anywhere in your theme above the wp_footer() function.

If you want to use this only for specific roles, try the following example:

[cc lang=”php”][/cc]

Alternatively, you can create a function to do this if you are developing a plugin, etc.

[cc lang=”php”][/cc]

The only remaining issue with this fix is that there is still a 28px margin at the top of the page that WordPress adds to make space for the admin bar. The best way to remove this is to add a callback to the admin-bar function to remove this space. You should add this into your themes function.php file directly:

[cc lang=”php”] ‘__return_false’));
?>[/cc]

As a closing note, these methods only work on the toolbar on front end of your site, not on the backend.


Displaying WordPress Shortcodes Without Executing Them

While developing for WordPress, there is always a need to write up tutorials that explain how features work. One feature that is especially hard to document, is shortcodes. Why? because when you try to display the shortcode on your post or page, it tries to execute it.

The solution that WordPress offers, which is by far the simplest is to add an extra set of brackets around the shortcode.

[cc][[shortcode_example]][/cc]

Unfortunately, this has been known to not work when multiple examples are used in a single post or when using opening and closing shortcodes.

A workaround can be found using the <code> tag.

[cc][shortcode_example][/cc]

By separating out the first bracket, WordPress is unable to execute the shortcode inside and instead displays it for all to see.