It seems like only yesterday, I set out to build my first ever Wordpress Plug-in. Bright eyed and bushy tailed, I poured over the Wordpress Codex, putting together the pieces of the process until I finally got the big picture. The Wordpress Codex is an amazing resource for anyone looking to get into Wordpress development; I strongly recommend any new developer read through the “Writing a Plugin” section.

While learning, I had a difficult time finding a straightforward template I could use as a base for my plug-ins. I wanted something that was clean and well-organized but also provided examples of more complex behaviours, such as: Internationalization, Widgets and Front and Back-End Ajax. I wanted to ensure my plug-in functionality was encapsulated inside a class structure so my functions and variables wouldn’t conflict with the Wordpress Core, or other plug-ins.

I’ve finally gotten around to writing this template plug-in, and I thought I would share it with the community to get your feedback and improvements, and hopefully save new developers some time. If you are interested in learning how to build a plug-in, and have a strong programming background, you can look through my sample code, read the comments and pretty much piece together how everything works. If you want a more thorough description of what is going on, read through this article.

You can download the plug-in from the Wordpress Plugin directory.

Getting Familiar With the Brolly Template Plug-in

1. Download the template plug-in.
2. Place the files in the plug-ins directory of your development installation of Wordpress.
3. Come up with a unique name for your plug-in, such as MyPlugin. Check the Wordpress Plug-in directory to ensure this name hasn’t been used.
4. Rename the plug-in folder from B2Template to your plug-in name (i.e. MyPlugin). Do not use spaces or special characters.
5. Rename the file B2Template.php to MyPlugin.php
6. Rename the file B2Template.class.php to MyPlugin.class.php
7. Rename the class inside MyPlugin.class.php from B2Template to MyPlugin
8. Rename the constructor function inside MyPlugin.class.php from B2Template() to MyPlugin()
9. Activate the plugin from the Wordpress Plugin Administration Panel
10. Add the Template widget to your sidebar from the Wordpress Appearance Administration Panel
11. View your site, and interact with the widget to observe it’s behaviour
12. From the Wordpress Administration page, click on Settings, and select MyPlugin.
13. Interact with the plugin from this page, to view its behaviour.

How to Write a Plugin Using the Brolly Template Plug-in

Note: Substitute B2Template in the instructions below, to whatever you named your plugin (i.e. MyPlugin).

There are two main files in the Brolly Wordpress Plug-in Template. The first, B2Template.php, is used to initialize the plugin and route various Wordpress actions and filters to class methods in the second file, B2Template.class.php. Keeping all our plug-in functions inside a class gives us greater flexibility to reuse the code we write for the plugin. It also prevents naming conflicts from occuring when multiple plug-ins use the same function or variable names.

Continue reading.. ›

We’ve just rolled out a new project, here at Brolly. Our client is, the Mayfair Theatre, a local independently run movie theatre in Ottawa, Ontario. The theatre recently closed down for renovations and is now under new ownership. Their web site was in serious need of an update, so we took the opportunity to do some really new and exciting things. We have been very excited about this project – it gave us great freedom to further develop our experience in social media and focus on providing meaningful interaction between our client and their customers.

Like many of our other projects, the website is built upon the WordPress platform. We built a custom plugin for them to manage their upcoming movie listings. This plugin has some great features:

IMDB Integration

The Wordpress plugin allows the Mayfair Theatre to manage their upcoming movies and showtimes. Instead of forcing the administrator to enter in details for each movie that’s playing, we interfaced with a very neat movie database api, called The Movie Database, to allow them to import upcoming movie information, YouTube trailers and high quality artwork. This feature will saves huge amounts of time.

Twitter Integration

We set up the theatre with a twitter account, @mayfairtheatre, and used the Twitter API to automatically broadcast what movies are playing on a daily basis. We are encouraging users to follow the theatre’s Twitter account with a series of giveaways including: movie passes, free concession coupons and movie posters. We believe that keeping people informed of show times on a daily basis will greatly improve attendance.

Google Calendar

Another way we are keeping users up-to-date on the movie schedule is by integrating show times with Google Calendar using the Google API. This calendar stays synchronized with the online schedule and allows users to add the calendar to their computer and mobile devices.

By leveraging existing APIs we were able to build a lot of great functionality into the site, within a limited budget and short development cycle. It seems like every day we are finding new and exciting ways to expand WordPress to accommodate the diversity of our clients. Look for more exciting plugins and services coming soon!

I’m putting together my first WordPress theme which requires three dynamic sidebars (don’t ask!!). For some reason I can’t figure out how to add the other two dynamic sidebars.. Could you help me please?

Adding in multiple sidebars is fairly straightforward and you can create as many as you need.

Locate your functions.php file in your theme and add the following code:

1
2
3
4
5
6
7
8
9
10

<?php
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'Sidebar One', // The sidebar name to register
          'before_widget' => '<div class="widget">',
          'after_widget' => '</div>',
          'before_title' => '<h3>',
          'after_title' => '</h3>',
     ));
?>

Continue reading.. ›

We’ve received our first question from a reader who asks how to incorporate threaded commenting into his WordPress 2.7 blog.

The latest version of WordPress includes lots of new functionality, including the ability for threaded commenting (also know as: nested comments). The option to enable threaded commenting is built into WordPress, however your theme must be compatible with WordPress 2.7 and support threaded commenting.

There’s already been several step by step tutorials on how to incorporate this new functionality, so rather than reinvent the wheel read this post by Otto.

Got a WordPress related question for us? Ask us here.

So I’ve been beating my head around this problem for the last couple of days. For a project I’m working on, I have a series of modal windows that pop up using the amazing Shadowbox library. I’m using a custom ajax player for shadowbox that uses prototype to load in a new page into the DOM and display it as a shadowbox. Everything was going great until, I started trying to run javascript from inside my modal window.

See, javascript that gets added to the DOM after a page is loaded does not get run. You don’t even seem to be able to reference functions that are loaded after the initial document load. So I needed a solution so that my AJAX calls from within the modal windows would function. After two days of thinking this out, I came up with a very simple low tech solution:

1
2
3
4
5
6
7
8
9
10
11

function parse_new () {
     var shadowbox = document.getElementById('shadowbox');
     var scripts = new Array();
     scripts = shadowbox.getElementsByTagName('script');
 
     for(i=0; i < scripts.length; i++) {
          if(scripts[i].getAttribute('type') == 'text/javascript') {
          eval(scripts[i].innerHTML);
          }
     }
}

Basically whats going on here, is that after I load my shadbowbox, I get a reference to that element, search for all the script tags inside it with type = text/javascript, and evaluate it. Hope this helps someone out!