Blog

Implement Photo Effects on WordPress with Paintbrush.js

Do you want to give your photos some kick?

Do you love the photo effects presented to you in Photoshop?

Dave Shea, esteemed web designer and developer, released a Javascript library called Paintbrush.js that allows any web developer to add photo effect functionality to their website.

Watch this video to see a live demo of how it works, as well as how to implement it on your WordPress-powered website.

Getting the library on WordPress

Here is the text based version, as well as an image, of what the process should look like, edited using our Minimize Responsive Theme:

Resources

We’ll be adding this functionality to the functions.php file. Here are some resources to help you along the way:

Creating A Wrapper Function

We’re going to create a wrapper function to house our register/enqueue functions for the scripts.

[php]

function min_wp_enqueue_scripts() {

}

[/php]

Function: wp_register_script

Next we’re going to register both scripts. While this is not required, we decided to register our scripts to make it easier to call/enqueue them later. These two lines go inside of our wrapper function (above).

[php]

wp_register_script( ‘paintbrush-common’, get_template_directory_uri().’/js/common.js’, false, ‘0.3’, false );

wp_register_script( ‘paintbrush-js’, get_template_directory_uri().’/js/paintbrush.js’, array( ‘paintbrush-common’ ), ‘0.3’, false );

[/php]

Function: wp_enqueue_script

Now we’re ready to enqueue the script to be included on all WordPress generated pages. This is the last call that that will go inside of our wrapper function (above).

[php]

wp_enqueue_script( ‘paintbrush-js’ );

[/php]

Function: add_action

Now that our scripts are registered and enqueued properly, we need to add the action hook to ensure that WordPress will load them at the correct time. This function is added below the min_wp_enqueue_scripts() function.

[php]

add_action( ‘wp_enqueue_scripts’, ‘min_wp_enqueue_scripts’ );

[/php]

The Finished Product and Examples

[php]

function min_wp_enqueue_scripts() {
// Register both PaintbrushJS scripts
wp_register_script( ‘paintbrush-common’, get_template_directory_uri().’/js/common.js’, false, ‘0.3’, false );
wp_register_script( ‘paintbrush-js’, get_template_directory_uri().’/js/paintbrush.js’, array( ‘paintbrush-common’ ), ‘0.3’, false );

// Enqueue both scripts (paintbrush-js depends on the paintbrush-common script so both scripts are loaded)
wp_enqueue_script( ‘paintbrush-js’ );
}

add_action( ‘wp_enqueue_scripts’, ‘min_wp_enqueue_scripts’ );

[/php]

Original

WordPress 3.5 Beta

Gaussian Blur (25%)

WordPress 3.5 Beta

Sepia

WordPress 3.5 Beta

Tint (50%, #000003)

WordPress 3.5 Beta

Did that look crazy?

Scripting can be complex.

We are here trying to make it simpler by showing the steps to take to develop in the WordPress framework, which we work in extensively.

If this kind of stuff excites you, please subscribe to our blog to get this content as well as a host of other video and text content right to your inbox.

You can also get involved by commenting below or on our YouTube page.

We hope we can continue to be of service to you and your needs. Thanks!

Leave a Reply

Your email address will not be published.