Loading WordPress Scripts/Styles Correctly

As a developer there are lots of times when developing WordPress themes when you want to add links to javascript and/or stylesheets in your themes to give extra functionality etc. The usual method of adding calls to these into the head of your header.php file is fine, but there is a better way, using a built in WordPress function. In this post I will outline the best ways to add these to your themes or plugins.

Often when building a theme you will want to add code to the head of your page such as javascript and stylesheet files. WordPress contains a couple of pretty cool functions that give you some additional functionality that just adding the code the head doesn’t give. The functions that you need are outlined below:

wp_register_script()
wp_enqueue_script()
wp_register_style()
wp_enqueue_style()

As you can see there are two functions associated with scripts and two with styles. The wp_register_script() allows you to tell WordPress which scripts you want to use and the wp_enqueue_script() tells WordPress to add them to the head tag inside the wp_head() function. The same can be said for wp_register_style() and wp_enqueue_style().

Lets look at an example of you may want to use these in order to add a load a javascript file into your theme. In this example we will imagine that your javascript file is called slider.js and is located in your themes folder in a sub folder called scripts. The first thing we need to do is to register the script file which tells WordPress where the file is located. Here is the code for this:

<?php wp_register_style( 'my_slider', bloginfo('template_url') . '/scripts/slider.js' ); ?>

As you can see above the first parameter in the wp_regsiter_script() function gives our javascript file a name. It is really important that this is a unique name and therefore I would highly recommend that like all functions you create you prefix your functions and names in functions.php. Here I have just prefixed it with the word ‘my’.

Now WordPress knows the location of the javascript file we need to use the wp_enqueue_script() function to actually add this to the head of the page. Here is the code for this:

<?php wp_enqueue_script( 'my_slider' ); ?>

As you can see here we pass the name that we gave to our javascript file when we registered it to the wp_enqueue_script() so that WordPress adds it to the wp_head() part of your theme. That should do it and the style functions mentioned work in the same way. Register your style and give it a unique name and then add it with wp_enqueue_style(). The only other thing that you might want to do is to create a function for this. To do this the entire code would then become:

<?php
function my_scripts_styles() {
wp_register_style( 'my_slider', bloginfo('template_url') . '/scripts/slider.js' );
wp_enqueue_script( 'my_slider' );
}
add_action('init', 'my_scripts_styles');
?>

So I suppose you might be wondering why going through all that is better than adding them to the head of your header file in your theme yourself. Well the main reason is that using these functions, WordPress checks to see if any other plugin etc has already loaded the files that you are asking for and then if it has it does not load them twice. If they were added manually then there is a chance that javascript files could be loaded twice which could lead to errors.

I was inspired to write this post after watching Chelsea Otakan presentation at WordCamp Pheonix on Typography and WordPress.

Using P2 Theme for a Development Log

Over at Pixel Junction Creative we have a number of developers and designers working on projects together and we were getting increasingly frustrated with having to email each other all the time to keep everyone up-to-date and in the loop with what was going on. To get around this I came across the P2 WordPress theme developed by Automattic. This has provided a great solution to our needs and I wanted to talk about how we have implemented the theme in order to create a development log.

P2 is a theme for WordPress that transforms a mild-mannered blog into a super-blog with features like inline comments on the homepage, a posting form right on the homepage, inline editing of posts and comments, real-time updates so new posts and comments come in without reloading, and much more.

Having downloaded and installed the theme it was clear that it was almost as we required it, but as always these things always need a few custom bells and whistles to make them just as you want them. In this case most of the changes were in terms of design, but functionality could change too.

[wpvideo YYNW9iSj w=610 h=343]

To go about making the changes I decided that the best way forward would be to create a child theme, based on the main P2 theme. This child theme would then be used for the development log site. The child theme being used simply contains a stylesheet (style.css) and functions file (functions.php) and a screenshot (screenshot.png).

The stylesheet is where the design changes come into play although the P2 Theme has many options in the backend in order to change various elements such as the header and the colours etc. The functions file was necessary to add some functionality that was not present in the theme itself. The main change in functionality is that I wanted to make the entire site accessible to logged in, registered users only. To do this I used my own Logged In Users Only Plugin. This code went straight into the functions file rather than having to activate a plugin, that way once the theme was active the site would always be protected to logged in users only.

The other code that was added to the functions file was simply some code to remove some of the menus from the dashboard to make it more foolproof for all the non WordPress designers and developers

The benefits of the P2 theme are great. We can track the development of projects by tagging the project with each update as well as keeping a track of all documents for a particular project as these can be uploaded from the front end just the same as posting. It also enables us to see a history of the development of the project as all the discussion can be seen by clicking on the specific tag for a project.

Once addition that we have made is to add to the log the Email Alerts plugin. This plugin sends email alerts to all registered users that have selected this option on their profile page for both comments and posts. This enables all the developers and designers to keep track of when the log has been updates and when they need t check it etc.

This is a really good solution to the problem of collaboration between a number of people and works very well. With a few minor alteration here and there we now have a fully function development log for keeping track of the different projects that everyone is working on.

URL Shortening with Your Own Domain

URL shortening services are plentiful at the moment. With micro blogging services such as Twitter restricting posting to 140 characters we need to shorten URLs can can waste those valuable characters.  I have always wanted to keep URL shortening to a domain of my choice rather than using bit.ly or tinurl etc, mainly because I am curious.  Here is how I have done it.

A quick search on the Internet and you will find several offerings of different solutions of how to shorten URLs using your very own domain for example Google offer a url shortening service for their domain app customers.  However some of these seemed quite complicated and I just wanted something really simple. As I was not bothered about statistics or anything I just wanted something where I could enter the domain I wanted to shorten, press go and then it would provide me with a shortened URL using the domain I wanted.

Continue reading URL Shortening with Your Own Domain