Tag: how-to

Use Composer in Your WordPress Plugin or Theme

Simple Tutorial Showing How To Use Composer in Your WordPress Plugin or Theme

I love Composer. It just makes including libraries or scripts in your app incredibly easy. So easy that it’s stupid not to use it (in many, if not most cases).

The number of libraries/scripts available on Packagist is astounding, all of which can be included in your plugin with Composer. Packagist is the main Composer repository. It basically aggregates all types of PHP packages that can be installed via Composer.

I’d never used Composer with a proprietary WordPress plugin before. The plugin is for a client so it’ll never be available to the public.

Here’s the steps I took to make this WordPress plugin compatible with Composer so that I can easily bring in third-party libraries.

We’ll be using mailgun-php throughout this example, as the plugin that inspired this post uses Mailgun to send all sorts of emails.

1. First, install composer on your server.

I install Composer globally, like so: 

curl -sS https://getcomposer.org/installer | php<br>sudo mv composer.phar /usr/local/bin/composer

2. Add Mailgun as a dependency.

cd /path/to/plugin/
composer require mailgun/mailgun-php:~1.7.2

3. Check your composer.json file.

We’re including Mailgun and guzzle from Packagist. Your composer.json file should look similar to the example below.

4. Tell composer to install Mailgun.

tyler@yourmachine:~/path/to/plugin$ composer install

5. Autoload Our Mailgun Classes in Our Plugin.

The following should go in your plugin-name.php file, before any other PHP code. 

<?php
require 'vendor/autoload.php';
use MailgunMailgun;

You can now use Mailgun in your WordPress plugin or theme, some basic examples of using Mailgun can be found on GitHub and in their official documentation.

2+

How-To: Make Animated Progress Circles Using Circliful

A jQuery Plugin for Making Circles

My last post about the jQuery plugin Circliful was pretty popular. So, here’s another, detailing how to actually use Circliful.

Circliful has a number of options that can be set as data attributes. Data attributes are the primary method for setting various options, such as the circle background color, fill color, and the percentage. All of the possible data attributes are available in the README on GitHub.

Using Circliful is similar to every other jQuery plugin. Just make sure you’re loading up jQuery prior to loading the Circliful JavaScript.

1. Include Circliful JavaScript and CSS

Include the JavaScript and CSS files from Circliful just like you would any other JavaScript or CSS file.

<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.circliful.min.js"></script>

2. Add an element with the necessary data attributes

This is where you can define all the data attributes that are listed in the README. I typically use an empty div with the following data attributes: data-dimension, data-text, data-info, data-width, data-fontsize, data-percent, data-fgcolor, data-bgcolor, data-fill, data-total, and data-part.

You’ll want to give your newly created element a unique ID to use as a selector in jQuery. I used circle-1 as the element ID for this example.

<div id="circle-1" class="circle" data-dimension="250" data-text="85%" data-info="Sweet" data-width="30" data-fontsize="38" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="85"></div>

3. Add necessary JavaScript

This tells Circliful which element to build the circle from. We want to target the ID that we gave to our empty element/div above.

<script>
$( document ).ready(function() {
        $('#circle-1').circliful();
    });
</script>

That’s it! You should now have a circle similar to the first circle in the example below. If you have any questions, feel free to leave a comment or get in touch with me directly.

You can find the necessary JavaScript and CSS on the Circliful GitHub page. You can see an example of Circliful in the embedded pen below.

See the Pen erojh by Tyler Longren (@tlongren) on CodePen.

1+

How-To: Reset WordPress Database to Default Settings

Easily Reset WordPress Database

WordPress Database Reset is a WordPress plugin I recently came across that will at some point prove very, very useful to me.

It’s not often that I need to reset a production WordPress database to it’s default settings, but this plugin will make the task a whole lot easier. Chris Berthe, the author, describes the plugin like this:

WordPress Database Reset is a secure and easy way to reinitialize your WordPress database back to its default settings without actually having to reinstall WordPress yourself.

I can see this being crazy useful for WordPress plugin and theme developers. We frequently need a fresh database to work with, so I’ll be adopting this plugin in my WordPress plugin and theme development workflow from here on.

WordPress Database Reset requires WordPress 3.0+ and can be installed just like any other WordPress plugin. It’s in the WordPress Plugin directory, and can also be found on GitHub.

It even integrates with WP-CLI, a command line tool for interacting with WordPress. This allows you to do things like select which tables you want to reset:

wp reset database --tables='users, posts, comments, options'

Here’s a list of features:

  • Extremely fast one click process to reset the WordPress database
  • Choose to reset the entire database or specific database tables
  • Secure and super simple to use
  • Prefer the command line? Reset the database in one command
  • Excellent for theme and plugin developers who need to clean the database of any unnecessary content quickly

If you’re a WordPress theme or plugin developer, you should definitely check it out.

0

How-To: Install lolcommits On Ubuntu

Lolcat-style photos as you commit

I’ve always had problems installing lolcommits on Xubuntu and other Ubuntu-based Linux distributions.

The installation instructions are very simple. Only requiring you to run two commands, sudo apt-get install mplayer imagemagick libmagickwand-dev and then sudo gem install lolcommits (need sudo for linux). Pretty simple.

The gem install lolcommits command is where things usually go bad for me. I typically see something like this:

tyler@echo:~$ sudo gem install lolcommits
Building native extensions.  This could take a while...
ERROR:  Error installing lolcommits:
	ERROR: Failed to build gem native extension.

        /usr/bin/ruby1.9.1 extconf.rb
/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require': cannot load such file -- mkmf (LoadError)
	from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
	from extconf.rb:1:in `<main>'


Gem files will remain installed in /var/lib/gems/1.9.1/gems/oj-2.0.14 for inspection.
Results logged to /var/lib/gems/1.9.1/gems/oj-2.0.14/ext/oj/gem_make.out

To fix this, you need to install a newer ruby-dev package:

sudo apt-get install ruby1.9.1-dev

You can now try to install the lolcommits gem again. It’ll actually install this time:

gem install rdoc
gem install lolcommits

A GitHub user documented this solution in issue #54. Another user suggests that the installation guide should be updated to make a note of this, but I haven’t seen it noted anywhere but in issue #54.

It’d sure save me a bit of time if it was noted somewhere, that’s partly why I’m writing this post.

After you’ve got lolocommits installed, see the README on GitHub for usage instructions and examples.

I usually run lolcommits --enable --delay=2 --fork when enabling lolcommits. That will capture a photo in a forked process, after a 2 second delay. I like this method because you’re not left waiting for the photo before being able to type into your terminal again.

Lolcommits is kinda cool, but not really useful in a practical sense. I do use it pretty much everywhere though, and have the default storage location linked to Copy. That way all my images are in the same place, no matter which machine I’m using at home.

If nothing else, it’s something kinda neat to be able to offer to your clients.

tyler-hat-lolcommits
I no longer smoke. 😉
0

Loading Scripts in WordPress Themes and Child Themes, Quickly

Here’s how I load scripts and styles in WordPress themes, in functions.php.

function load_scripts() {
    // load styles
    wp_enqueue_style( 'custom-css-1', get_stylesheet_directory_uri() . '/css/custom-css-1.css' );
    wp_enqueue_style( 'my-secret-script-css', get_stylesheet_directory_uri() . '/css/my-secret-script.css' );


    // load javascript
    wp_enqueue_script( 'my-secret-script', get_stylesheet_directory_uri() . '/js/my-secret-script.js' );

}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

The above code would load up two css files, custom-css-1.css and my-secret-script.css. It would also load one JavaScript file, my-secret-javascript.js.

This post by Brian Krogsgard at WPCandy describes the proper way of loading scripts, using wp_register_script, as it takes dependencies into consideration and allows loading of scripts by their defined name. However, I think the wp_register_script methodology is lengthier and a bit more difficult to read, mostly due to the dependency stuff.

However, you do need to take dependencies into consideration if you’re using a JavaScript library, like jQuery.

wp_register_style should also be used to load styles with dependencies. This article at Tuts+ has a very good description and examples on loading CSS stylesheets using wp_register_style and wp_enqueue_style.

You should also be aware of the differences when authoring themes and plugins, which Brian also explains in his post on WPCandy. That mostly involves one WordPress function out for another.

Let me know if you run into any issues, comments are open!

0