Get WordPress Featured Image URL

I have recently been working on a client site that used the excellent WordPress Post Thumbnail feature (or Featured Image as it is now referred to in the WordPress dashboard). I came across a small problem in that when using the function the_post_thumbnail() to display the featured image of a post, it also returns the <img> tag as well as the URL of the image. Therefore I set about finding a way to solve this problem.

Having looked on the Internet for some answers I came across Lee Willis’ post on the same thing which outlines an excellent solution to the problem. One of the commenters asked where to put the code, and although I knew t his I thought it would be a good idea to package this up into a little PHP function that you could then call in your template files.

Place the following into your themes functions.php file:

To display the featured image URL you can echo mdw_featured_img_url( 'medium'); in your template file. You can replace ‘medium’ above for the size of the featured image URL that you want to return e.g. thumbnail, large or full. Even custom sizes work here that you had added using the add_image_size() function. Of course if you echo the function above it will display the URL on your page but you will probably want to use it in PHP one way or another.

Remove Dashboard Menus for Specific Users

For a while now I have been using some simple code to remove the dashboard menus in WordPress, primarily so that clients can’t change certain settings and ‘break’ their sites. However the code I was using also removed those items for me too. This meant I had to memorise the admin URLs and visit them manually which is not ideal. Today I have managed to solve this problem by hiding WordPress dashboard menus for all except specified users.

The trick is to wrap your code around an if statement that first checks who the user is. The code I am using is below:

Basically the code grabs the current users user ID and then compares it to a list of allowed users. If is matches the function returns nothing, if it doesn’t match then it removes the specified menus in the WordPress admin areas.

In this example users with the ID 1 and 2 can see all menus, however the WordPress links menu will be removed for all other users. It is important to note that this code only removes the menus from view and doesn’t stop users from actually viewing these pages. If they know the URLs they will still load.

Using Nivo Slider with WordPress Custom Post Types

I have been using the Nivo Slider for a while on a number of sites, mainly using a function to grab all the images from a particular WordPress post or page and then showing these in the Nivo Slider. Then I found out that it could take HTML for the captions and therefore wanted to use this for a “Featured Content” slider on a website. The featured content post would be a WordPress custom post type. Here is how I did it.

The first stage is to install the Nivo Slider onto your WordPress theme following the excellent and simple to follow instructions provided by the author at Once this has been completed and you are happy that the Nivo Slider works correctly then we can start with the fun stuff, by making it show information from our custom post type. In this example I named by custom post type ‘rs_featured’. You should always prefix your custom post types.

In order to display the images in the slider I wanted to make use of the WordPress featured image function which using the_post_thumbnail() in your themes template files – in my case header.php. The first step is to set up a new WP_Query in order to provide us with a custom loop to query posts from our rs_featured custom post type. To do this I used the following code:

$pj_slider = new WP_Query('post_type=rs_featured&showposts=4'); while($pj_slider->have_posts()) : $pj_slider->the_post();

    // we will do stuff in here later


What this does is that it queries the latest 4 posts from our custom post type. Now we have to decide what we are going to show for each of the posts that are returned and then add this code inside the above loop. With the Nivo Slider instead of using the images title as the caption text you have the options of using HTML. To do this you need to set the title attribute of the image to a unique CSS ID for each of the posts. To do this we will use the posts ID as this is always unique. Therefore I set up the following variable to store the CSS ID that I wanted to attach to the title.

<?php $pj_slider_caption = '#slider-caption-'.get_the_ID(); ?>

We now have a the unique ID setup. Therefore we can go back our code above and add the image from the posts featured image so that this shows for each of the posts in our custom post type. The code for the loop should now look like this:

<?php $pj_slider = new WP_Query('post_type=rs_featured&showposts=4'); while($pj_slider->have_posts()) : $pj_slider->the_post(); ?>

<?php $pj_slider_caption = '#slider-caption-'.get_the_ID(); ?>

<?php if(has_post_thumbnail() ) { ?>
<?php the_post_thumbnail('slider', array('title' => ''.$pj_slider_caption.'')); ?>
<?php } ?>

<?php endwhile; ?>

We pass the new caption ID to the title attribute of the featured image inside the_post_thumbnail() function as an array. The next stage is to set up a DIV that uses the same ID we created above (#slider-caption-theid) as well as the class nivo-html-caption. As we need one of these divs for each of the posts in the loop, so we need a secondary loop, which is similar to the first. The code for this, to be placed underneath the first loop which shows the images is as follows:

<?php $pj_slider_caption = new WP_Query(‘post_type=rs_featured&showposts=4’); while($pj_slider_caption->have_posts()) : $pj_slider_caption->the_post(); ?>

” class=”nivo-html-caption”>“>Read more about this feature »

<!– // nivo-html-caption –>

<?php endwhile; ?>

We are using the posts excerpt as the captions content as well as the post title above the content. Now all you need is to use CSS in order to position and style the caption area as required. This has provided a really useful piece of code and I will no doubt be using it on a few more sites to come. Thanks to Dev 7 Studios for a great jQuery slider.

Photoblogging with WordPress

For a while now I have used Flickr to host all my photographs and I like the service that they provide with their relatively good value ‘Pro’ package. However for a while I have wanted to own my own data and therefore I wanted to move to a solution where I could host my own images which were more under my control. Therefore I decided to go about constructing a PhotoBlog theme using WordPress whilst maintaining some of the Flickr features we have come to know and love. Here is how I went about building my WordPress PhotoBlog theme.

The first thing to do was to think of a domain name that could be used in order to house the blog. I thought for a while about this as it is an important stage as it will be with you for a while. Looking at what I wanted and what was available meant I was limited although I finally settled on I quite like the .me top level domain (as you can tell from this blog) as it works well for anything relevant to a person in my opinion. Once I have purchased the domain I added it to my cPanel account and then installed the latest version of WordPress.

The next major decision which I faced was to decide on the different sizes of photos that I wanted to create for each photograph that I uploaded. This was something that I have always liked with Flickr in that when you upload a photo it creates a range of different sized photographs which you can use. I wanted to use this in this blog too. With WordPress already producing a Thumbnail, Medium and Large image alongside the image you upload it does a lot of this for you but I wanted to add a few more image sizes. Thankfully you can declare extra image sixes using the add_image_size() function in your themes functions.php file.

The next thing was that I wanted a way to display links to all the available image sizes next to each of the photos. A quick search around and I found Justin Tadlock’s solution of Linking to All Image Sizes in WordPress. This was great as it includes the images sizes you have added as well as the standard WordPress image sizes.

The next part was the design. I wanted to use a similar design to this blog to keep the same feel, but I wanted it a little more ‘arty’ Therefore I used some paint splurges here and there on the page titles and added an extra column to display detailed meta information about each post. I also wanted to make use of the WordPress attachment pages to display individual images on. The idea being that a featured image would display on the archive pages, then on the single post page the WordPress gallery feature would display a list of thumbnails and clicking on these would take you to a page which displayed that images larger with the links to the other sized images.

Lets take a look at the different page templates that where designed and how they were produced etc. We will start with the index.php template.

Index.php Template File

The image below show what the template looks like when displayed on screen. As you can see I wanted to include quite a bit of information about the post from this page including a sample image from the gallery.

By including both photos and video in the blog it allowed me to take advantage of the new WordPress 3.1 post formats feature. By adding the appropriate post format to a post, whether it be gallery, image or video this allowed me to use the template tag has_post_format() to check which post format a specific post had and then style the post accordingly. WordPress also assigns a class including the post format when using the post_class() tag.

The WordPress featured image function [the_post_thumbnail()] was used in order to display a selected image from the images uploaded to the post. This image can be called at any size by passing a specific WordPress size to the_post_thumbnail() or by passing one of the sizes defined when we used add_image_size() to declare our custom image sizes.

Single.php Template File

The purpose of this file was fairly straight forward. It needed to display the gallery, which just used the normal WordPress built in gallery functions and display the content of the post as well as providing standard commenting functionality.

Image.php Template File

This was the first time that I have really utilized the use of the this WordPress template file. It is used to display the individual image in your posts gallery. Therefore when clicking on an image thumbnail in the post gallery you are taken to a page template to display the image. The great thing is that you can style and design this as you wish. The design I have chosen is below:

The final thing that I wanted to do was to create shortlinks for each post using the new domain that I bought. I did this using Yourls as well as the associated plugin that goes with it. Find out how I did this in this earlier post that I wrote about setting up and integrating Yourls with your WordPress website.

Most other stuff on the site is standard WordPress theme stuff which is pretty straight forward. I am pleased with the outcome although I just wish I was more of a designer to make it look really cool. Still I suppose we all have our skills! I would love to know your thoughts so please leave a comment below.

Vist the new site at

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:


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:

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.

Why I’m Not Keen on WordPress Theme Frameworks

WordPress theme frameworks are a relatively new thing. In fact they seem to kick off when WordPress introduced the use of child themes back when WordPress 2.7. was released. However they have really caught on over the last couple of years, with many different frameworks now available for use. Here I want to talk about how theme frameworks are built to be used and my thoughts on their success.

As mentioned most theme frameworks rely on the parent and child themes process. You create a child theme based on the parents theme framework and therefore when the framework is update you changes are not lost. Most of the frameworks that I have seen out their including one I have used extensively, Thematic are essentially a parent theme. That is they are a WordPress theme that you add to your wp-content/themes/ folder. You then build a theme using this parent theme framework as your parent theme. This means you have access to all the frameworks functions and code.

So that all sounds great, but why therefore am I not that keen on using theme frameworks. Well I think it comes down to the fact that I believe that theme frameworks at the moment are going about this the wrong way. They way they are at the moment is more restrictive when they are supposed to add functionality rather than preventing theme authors from doing things in certain ways.

I created a number of child themes for a client recently using the Thematic theme framework. The idea of these child themes was that the parent theme (the framework) could be updated and this would not affect the child themes display at all. However in order to get the design and functionality elements that I wanted I ended up with child theme functions.php files that we a couple of 100kb each and about 5 or 6 theme template files that would overwrite the template files in the parent framework theme. Surely this cannot be right as child themes are supposed to be lightweight and really on contain a styles.css file and a functions.php file so that all the bulk is used from the parent theme.

To me a better way of doing things would be to make it so that the framework was not a theme at all. In fact is was simple a folder that could be added to your own parent theme and then activated with a line of code (like a PHP include) in your themes functions.php file. This seems to be the approach that have taken with their theme framework which works well.

I realise that this may well cause a great deal of debate. Maybe I am doing something wrong with the use of parent theme based frameworks. I would love to hear peoples thoughts on this.

Backup, Backup & Backup Again!

If you are like me then you have probably been using computers for many years and have accrued thousands of files on your computers hard disc, from things like photos and videos to documents and spreadsheets. Have you ever thought about backing these files up to keep them secure in case your computer fails? If not then this post is going to outline some of the options.

If you have never had a computer fail on your or a hard disc fail then you are a fortunate person, like me. They are rare events although they do seem to be having more and more. But there are many other reasons for you to make sure that you have a backup of all the files on your computer. For example if the worst should have and there is a fire in your house or a car crash, breaks your laptop, you need to have a backup copy of your work. I have at least 50gb of photos and videos on my computer that are irreplaceable should the worse happen. If they were lost those memories would never be able to be retrieved. For this reason along you need to backup.

Backup Options

So what are your options for backing up? Well as usual in my experience things get a whole lot easier here if you have a Mac rather than a PC running Windows. Macs come built in with backup software called Time Machine. Time Machine IconThis software works by backing up the entire contents of your computers hard disc (everything) to an external drive (either USB or over a network) every hour. It then keeps these backups and they grow over time. The software works without any input from the user (except a touch on initial setup to tell it which disc to use) and then it does all the work in the background. Seriously if you are not using Time Machine and you have a Mac, you need to start now and set it up to start backing up your computer.

With Windows there are backup software solutions out there. However in my experience they can often be expensive and moreover complicated solutions to a simple problem and then just never seem to be that good in my opinion. Therefore I have always resorted to the manual way on a Windows machine. The first step is to make sure that all of your files (photos, videos, documents, basically everything except your programs or applications) are stored in your User folder (what was My Documents and is now called Documents on Windows 7). I then entered a reminder into my calendar (either on your phone or Outlook etc) to remind me to backup every Sunday (or whatever day suits you). Then at that time I would simply take a copy of that folder to an external drive so that you have a weekly copy of all your files.

Remote Backup

I mentioned above about if the worst should happen. Most of us that do backup store our backup drives either in the same house as the machine you are backing up, or those with a laptop perhaps store the portable hard drive in the same laptop bag as the laptop drive. Therefore an accident should occur that involves the computer then it would mean that the backup drive suffers the same fate.

The solution to this of course is to have some sort of remote backup solution. The most basic form of this would be to take a backup and then take the drive and store it elsewhere. For example you could take it to work and store it there or to a friend or neighbours. You must however make sure that you continue to backup to this disc at regular intervals so that you have the latest up to date files.

The other alternative is a remote backup solution over the internet, where you files are stored ‘in the cloud’ on the net and therefore in a different locations. Many firms offer this solution. This is not something that I tried, although I have used Dropbox which is a very good service. It would be interesting to hear what everyone uses in terms of online backup.

My perfect solution would be a online service which you could use with Time Machine. Therefore when setting up Time Machine you could select your ‘cloud’ disc and backups are made to a remote location rather than on an external drive in the same location as the computer.

So if you take one thing from having read this then let it be to make you go and backup your files now!

CSS Sprites for Image Rollovers

A while ago I wrote a small post on how I had used the CSS style of display: none in order to hide images that I had used for rollover.  A commenter had said this was the wrong way to do this and using CSS sprites was the best method.  Having done some research here is what I have come up with in using CSS sprites for image rollovers.

I first wanted to use them when I had a background image on a particular element and then I wanted this to change when the mouse was hovered over the item.  This is easily done with background-image in CSS.  The problem is that the hover image is only loaded on hover and therefore there is a short delay in the loading on the image which looks messy.

Continue reading CSS Sprites for Image Rollovers

Create a Signature in Apple Mail

A signature on your email can really create a professional looking email template that looks great to the people you send emails to and allows you to display important information about you or your business on every email you send.  In this tutorial I am going to show you how to create a signature in Apple Mail.

The first stage is to create your HTML page which will act as your signature.  I have found it best to do this using tables as many mail clients still will not render CSS based pages correctly and it has caused me problems in the past.  Maybe these days though this has changed, perhaps you could enlighten me!  Below is the code I have used for a simple signature:

Continue reading Create a Signature in Apple Mail