The correct method of adding JavaScript to a WordPress theme

by ·2 Comments

A quick note to all the WordPress developments out there. If you are adding a standard JS library like jQuery or Prototype, chances are WordPress already includes a version as part of the core files. So no need to download your own copy and place in somewhere in the themes folder.

Many theme developer who rely on JS for different effects simple place the link into the template header.php. Something like this:


<script src="http://localhost/wp-content/themes/mytheme/js/jquery/jquery.js" type="text/javascript"></script>

view raw

codehooligans-adding-simple-javascript-to-header.php

hosted with ❤ by GitHub

While this does accomplish the goal of loading the JS library it also increases the chances of a second instance of the library also being loaded. Thus bloating your site.

A better option in my opinion is to add a little code to the themes functions.php file. The theme file functions.php is standard in most WordPress themes and is considered the best place to place common code that is needed by the theme. The functions.php file is automatically loaded by WordPress.


<?php
function my_functions_init() {
wp_enqueue_script('jquery');
}
add_action( 'init', 'my_functions_init' );
?>

view raw

codehooligans-adding-javascript-via-wordpress-init.php

hosted with ❤ by GitHub

Note we are hooking into the WordPress ‘init’ logic. We must setup the JS loading early. Some time later WordPress will load the theme. If the theme header used the theme function ‘wp_head()’ then our JS library will automatically be included. The ‘wp_head()’ function allows plugin author to insert needed JS and CSS files dynamically. Using this hook we are doing the same thing for our theme. No more hard coding the JS file link.

So how is this really “Better”?

The biggest benefit is we are preventing multiple copied of the same JS library from being loaded by WordPress or plugins. If we did hard code the JS link for jQuery and we also installed some plugin like cforms which used the jQuery library then it will load it’s own copy. By using the ‘wp_enqueue_script()’ function we are letting WordPress know we need jQuery loaded. When the plugin is loaded it will also tell WordPress is needs to load jQuery. As a result WordPress can track what JS files need to be inserted via the ‘wp_header()’ function.

For more information on the ‘wp_enqueue_script()’ function check the WordPress Codex
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Media Tags 2.0 released

by ·55 Comments

Today I would like to finally release to the wild the totally rewritten Media-Tags plugin version 2.0. The Media-Tags plugin 2.0 has been completely rewritten to use to WordPress Taxonomy system for storing related media-tag information. As a benefit to this rewrite the user now has a new Media Tags management interface located under the Media section. Via this Media Tags management interface users can better manage the media tags used on the site. Deleting, renaming and adding new media tags is now quite simple. The Media Tags for the attachment are still display both under Media and the media popup on the editor screen as before. Continue reading

Media Tags 2.0 Beta

by ·16 Comments

Today I’d like to release the first public beta of the Media Tags plugin. This is an exciting change and almost complete rewrite to the core plugin code.

For anyone downloading this beta please be aware this is a beta version and subject to change in the near future. Also since this is a beta it is recommended NOT to use this on a production system. User beware! If you do download the plugin and test if please using the comment form below to mention any issue you have with the new plugin. I can only test thing to a certain level with my own client sites.

This new beta has been tested on WordPress versions 2.7.1 and 2.8 only! At this time I’ve not tested the new Media-Tags Management interface on any lower version of WordPress.

Continue reading

Media tags plugin

by ·43 Comments

Note: This post remains available to discuss the original 1.0 version of the Media Tags plugin. As of July 15 2009 version 2.0 of the Media Tags plugins has been released. Please refer to the update post http://www.codehooligans.com/2009/07/15/media-tags-20-released/ for information on changes to the use of the plugin.

Working on a client project recently I needed to extract 2 attachments uploaded from a post and display these along with the post title into the sidebar on another page. I’ve done this a few times before and always sad to say a little different. Probably the best solution is to name the ‘special’ attachments using some defined naming convention like image_sidebar_1.jpg, image_sidebar_2.jpg, image_sidebar_x.jpg. This works but can get ugly if you even want the client to follow your instructions on the naming conventions.

I’ve figured out a better way. With my latest plugin you can now add tags to your media attachments. I write ‘media’ because this does not just apply to images. You can tag Word document, PDF documents basically anything you upload via the standard WordPress Media upload tool.

Here are some screenshots:

The media tag input field is displayed directly on the media form.

Usage

So now you can tag you media files. But how do you actually use the tags? How to you actually access attachments that have ‘x’ tag? Excellent question. And your answer is below.


<?php
$media_items = $mediatags->get_media_by_tag('media_tags=sidebar&post_parent=6');
/*
This call will filter the tags for the tag 'sidebar' and the post ID of 6.
The function take three arguments.
media_tags (Required) This is the tag or tags you are filtering on.
media_types (Optional) Lets you also filter by pdf, txt, etc.
post_parent (Optional) The ID of the attachment post. If not provided then the global post ID is assumed.
*/

view raw

codehooligans-wordpress-plugin-media-tags-usage.php

hosted with ❤ by GitHub

As part of the plugin I also wrote a function to be used in your template. To follow the example I started this article with I need to display 2 of the 5 uploaded images in the sidebar. My first step was to upload the images and tag the two special images with ‘sidebar’.

Now I use the function get_media_by_tag(). I pass the tag I want to access, in this case ‘sidebar’ and the ID of the post parent. What is returned is an array of attachment items. This array is similar in fact to the return object when calling the WordPress get_posts which is partly what the function does.

Download the Media-Tags plugin via the WordPress.org plugin repository

Future plans

I’ve already starting thinking of some enhancements for the plugin. Which include a tag management screen and other utility functions. If you have any other needs post them here in the comments.

Automattic looking to open a professional office in Austin

by ·1 Comment

A post from Andy Skelton that Automattic might be looking to open a professional office here in Austin.

I for one would love to work on an office with other Austin WordPress professional. I’ve made 90% of my living these past 10 months working on WordPress client project and do not intend to stop anytime soon.

A WordPress professional office could be something like the co-working locations that are now springing up in cities all across the nation. This would be somewhat different in that instead of everyone working on a broad range of projects, everyone would be working on WordPress client projects. From a collaboration perspective this could be huge.

I’ve had a chance to roll this around in my head a few time and have started thinking about some of the downside issue for me.

  • Considering the current state of real estate in general, finding a short-term lease location in central Austin might be an issue.
  • what will be the user cost of this venture? Will I be locked into a lease commitment for space in the office?
  • Why would I want to consider this option if I can work for free out of my house already? Meaning I’d need to drive to an office to do basically the same think I can do at home. I do realize the upside is the potential collaboration with Andy and other Austin WordPress professionals. Question is if it’s enough of a consistent gain. Can the same or similar collaboration be gained from the wp-hackers mailing list?
  • What will be the price of gasoline by the time this concept is realized? Considering gas in Austin is now $4.00/gallon what is my added (if any) cost for driving into an office 3-5 days a week?