All posts tagged “functions”

10 Useful WordPress Functions You Might Not Know About

WordPress is full of great functions for us developers to use. We can pull post lists out of thin air, manipulate almost everything about them, grab any user we wish and display their social media connections in a jiffy.

There are however quite a few functions which seem to be overlooked for unknown reasons. I’ve been coding with WordPress for around 8 years now and occasionally I still find something new! Let’s take a look at some of my favourite overlooked functions and learn how to use them along the way.

antispambot()

I usually raise a few eyebrows with this one, it seems to be one of the most well-hidden functions in the codebase. <code>antispambot()</code> replaces characters with HTML entities which is one way to mask email addresses from evil scrapers.

 $  email = 'mymail@mail.com'; echo 'You can contact me at ' . antispambot( $  email ) . ' any time'. 

While this is a useful tidbit, it is also an example of why some people criticise WordPress – this is a horribly named function. From reading the function name, you have no idea what it does.

human_time_diff()

When I first learned about this function about a year ago I thought it must have been a recent addition which I overlooked in a changelog. Not quite…

This function – which outputs the difference between two timestamps – has been in since version 1.5 (that’s February 17, 2005!).

The following great snippet I borrowed from the codex shows how long ago a current post was published. It uses the publish date of the post as the first argument and the current date as the second.

 echo 'This post was published ' . human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) . ' ago'; 

get_post_meta()

Bear with me here, I know this is a well-used function, however, how it works is not-so-common knowledge. First of all, by omitting the second and third parameters you can pull all metadata for a post.

 $  all_meta = get_post_meta( 14 ); 

Even if you only grab the data for a single key all postmeta is pulled anyway.

The reason is actually pretty logical. Metadata is used in multiple places. If <code>get_post_meta()</code> queries the database each time it was used we would end up with way too many queries. Instead, if you pull metadata it caches it all and uses the cached values on all subsequent metadata retrievals.

wp_upload_bits()

This function is a straight-up file uploading function. While it doesn’t move the file to the uploads folder and add it to the WordPress media section, it is extremely convenient and you can always to the rest with the <code>wp_insert_attachment()</code> function.

 $  upload = wp_upload_bits( $  file['name'], null, file_get_contents( $  file['tmp_name'] ) ); 

Some explanation is at hand for this: the first parameter is the file name. The second is depreciated so it should be set to null (eyeroll at WordPress consistency). The third parameter is the actual content of the file.

get_post_field()

In the past I saw quite a few examples where someone wrote a loop to get a comment count for a post, or wrote a dedicated database query for it. You don’t need them, what you need is <code>get_post_field()</code> . This function retrieves the value of a single field for a single post in the database. Let’s grab a comment count!

 This post has <?php echo get_post_field( 'comment_count', 4124 ) ?> comments. 

wpautop()

This function has come out into the spotlight a bit, but it is still relatively unknown. It is similar to the PHP native <code>nl2br</code> but instead of creating new lines, it wraps your content in paragraphs.

This is useful if you have a textbox and you want to make sure that when users create paragraphs with double line breaks, they remain visible in the front-end as well.

 <h2>What Our Users Say</h2> <?php echo wpautop( $  user_comment ) ?> 

wp_is_mobile()

This aptly named function detects when a user is on a mobile device and allows you to display content accordingly. Since this is a conditional tag it returns true or false depending on the scenario.

 <?php if( wp_is_mobile() ) : ?> Visit our website on your desktop for a richer user experience <?php endif ?> 

DOING_AJAX

While this is a constant, not a function (sorry), it is useful nonetheless. You can discern between AJAX calls and regular stuff by checking if it is defined and is true. This can be useful if you are using a common function for a task that is sometimes triggered by AJAX.

 if (defined('DOING_AJAX') && DOING_AJAX) { echo 'done'; die() } else { }

wp_redirect()

The last example shows another neat function: <code>wp_redirect()</code>. This should be used in place of the PHP native <code>header()</code> function. The WordPress redirection function allows you to set a URL to redirect to, and also set a status code, great for handling permanent redirects as well.

 // For a URL which is no longer in use wp_redirect( 'http://website.com/new-url/', 301 ); 

paginate_links()

I bet that this function owes its obscurity in part to the popularity of the WP-PageNavi plugin. By default WordPress displays previous/next links at the end of your post list. WP-PageNavi replaces that with page numbers.

This can actually be done with a little work using the <code>paginate_links()</code> functions. It has quite a few parameters so I recommend taking a peek at the documentation.

The following example from the codex shows how you can add it to a default loop but adding it to custom loops is not much of a stretch.

 global $  wp_query; $  big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $  big, '%#%', esc_url( get_pagenum_link( $  big ) ) ), 'format' => '?paged=%#%', 'current' => max( 1, get_query_var('paged') ), 'total' => $  wp_query->max_num_pages ) );

Conclusion

These are just some functions that seem to be less-known that the rest. I discover a new great function about every two months and I’m sure my developer friends out there could surprise us even further.

If you have a favorite obscure function or a function which would be useful but isn’t available, let us know in the comments!





hongkiat.com

.klatz Smartwatch and Handset: A stylish wrist accessory rethinking the form and functions of wearable tech

.klatz Smartwatch and Handset


While fashion often takes a backseat to function, or vice versa, in wearable tech, Ukraine’s .klatz is hoping to change that with their smartwatch and handset. They’ve revisited the bracelet form, but unlike Nike’s FuelBand,…

Continue Reading…


Cool Hunting

Understanding LESS Color Functions

We have covered quite a lot about LESS, from creating a sleek navigation to tips on how to work more effectively with LESS, but we have not cover all of them just yet. In this post, we are going to look into the LESS Color Functions.

Color is one of the key to making a website look astonishing, just have a look at our showcase of beatiful three-color websites. With LESS, we are able to define and apply colors more consistently with variables, moreover, we are also able to apply Color Functions to tailor and transform the colors without having to rummage through a color picker.

The Functions

LESS provides several functions with quite descriptive keywords that we can use to manipulate colors: lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade() spin() and mix().

Let’s try some of these functions to see how they work. For the purpose of this post, we are picking green (#7bab2e) as a variable for this demonstration;

@color: #7bab2e;

Darkening & Lightening

Altering colors with LESS Color Function is really strightforward. In this example below, we will darken the @color by 20% of its initial value;

.box.darken {
	background-color: @color;
	border: 3px solid darken(@color, 20%);
}

This code results in the follow output. The border, compared to the color inside the green box, is darker.

The same applies to how we lighten the @color;

.box.lighten {
	border: 3px solid lighten(@color, 20%);
}

Notice that the border is now lighter than the background.

Alternatively, we can also store these functions inside variables and then assign them through the stylesheet later on, like so;

@colorDark: darken(@color, 20%);

.box.darken {
	background-color: @color;
	border: 3px solid @colorDark;
}

Spinning Colors

Let’s try another function, and this time we will try spinning the @color. The spin() function in LESS is used to adjust the hue of the color. If you have played around with the Hue/Saturation feature from Photoshop, this function works quite similar to it.

Let’s take a look at the following code.

.box.hue {
	background-color: spin(@color, 123);
}

The maximum value for Hue spinning is 180 but negative values such as -123 is permitted.

In LESS, we are also not limited to apply only the function but we are able to define two functions at a time. Here is an example:

.box.desaturate {
	background-color: desaturate(spin(@color, 123), 50%);
}

In this code, we first spin the @color by 123 then desaturate the output by 50% . Here are the results.

Mixing Colors

Lastly, we will try mixing the colors with mix(). This function will output a color generated from the mixing of two colors. If you remember how the green comes to be (hint: it’s a combination of blue and yellow) let’s try that in LESS;

.box.mix {
	background-color: mix(@blue, @yellow, 50%);
}

This function needs three parameters actually, the first two are the color combination and the last parameter is the weight of each colors; we have defined it for 50%. This last parameter, however, is a bit strange.

For example, 0% will result in the first color we stated (which in this case @blue) while 100% will do the opposite. The final output is a bit odd as well, it is green but not the green that I’ve expected.

Final Thought

Color functions are definitely very useful. Basically we only need one color and we can alter it with one or a couple of these functions to create a fully applicable color scheme for the site. Below we have compiled some additional references as a complement to our discussion on Colors.


hongkiat.com

Fulton’s latest innovation: a tablet that also functions as a wireless charging mat

Fulton Wireless two-way charging

Fulton Innovation has been showing off advances in wireless power at CES for years now, and while the technology still isn’t exactly mainstream, it got a bit of a boost in 2012. High-profile phones like the Nokia Lumia 920, HTC Droid DNA, and Nexus 4 are all compatible with the Qi standard that Fulton supports, and we’d expect to see even more devices include the feature in 2013.

Continue reading…

The Verge – All Posts