nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: Wordpress

Posts on anything related to the Wordpress blogging platform including themes, plug-ins and general tips.

Shadowbox and NextGEN Gallery Sitting in a Tree

A project I’m currently working on requires a photo gallery, luckily with WordPress there are quite a few to choose from. Of the gallery plug-ins I’ve used NextGEN Gallery is without doubt my favorite, chocked full of useful features and easy to use; you could even let a client use it! My only issue is the way the images appear in a ‘lightbox’ when you click on them, the ‘lightbox’ is great, but it’s implementation seems a little clunky.

By default NextGEN adds a chunk of code to the WordPress header which is one of my pet hates, that has to go. NextGEN uses ThickBox, which is great, but as it says on the website “Thickbox had its day” so it’s time to use an alternative. One that’s really caught my eye is Shadowbox.js.

Shadowbox.js is a fully featured media viewer that supports the webs most popular formats (images, Flash, QuickTime, Windows Media Video and FLV via JW FLV Player). Pretty much every format you really need. It also has the added bonus of being available either as a standalone script or integrated with your favourite JavaScript library (jQuery, Prototype, MooTools, Dojo, YUI and Ext). For me personally, it ticks every box… and it also looks great and works well!

So now time to bring the two together. First you should install the NextGEN gallery plug-in which you may already have it installed. Next you need view the gallery ‘options’ and select the ‘Effects’ tab. Change the “JavaScript Thumbnail effect:” to Custom and add the following code to the text box:

1
rel="shadowbox[%GALLERY_NAME%]"
Settings to change in NextGEN gallery

Change a couple of setting in the WordPress admin.

The code will be added to each thumbnail generated by the gallery. Changing the dropdown to custom also removes various bits of default NextGEN code from the header, solving that problem too.

Next it’s time to download Shadowbox.js. You have a few options on this page, as I only want to display images I selected ‘Base (standalone)’, checked the images checkbox and unchecked “Include support for using CSS selectors to select links”. I don’t plan on using shadowbox with jQuery so I didn’t add the jQuery adapter, this also keeps the filesize to a minimum.

Simple Shadowbox download page

Check your preferred settings and download.

Hit the download button to download the ZIP. Once downloaded extract the CSS, JS and images into your WordPress theme directory. All thats left to do now is add a little code to your theme.

In your header.php add:

1
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/shadowbox.css" />

Or what I prefer to do is copy the CSS from shadowbox.css into my main style.css file, this way you keep everything in one place and you minimise HTTP requests. Then add the JavaScript to your footer.php (or header.php, but I prefer to put all JS in the footer.php).

1
2
3
4
<?php if(is_single()):?>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/shadowbox.js" type="text/javascript"></script>
    <script type="text/javascript">Shadowbox.init();</script>
<?php endif;?>

Note the use of the ‘is_single()’ WordPress conditional tag. Since I’m only planning to use Shadowbox on an individual blog post I only call it on those pages. Feel free to remove this if you plan on using it elsewhere on your site.

Shadowbox and NextGEN gallery

Great looking effects that work really well alongside NextGEN gallery.

Once those bits are added you’re all done! If you don’t see the any open, close, next, previous images make sure you are pointing to them correctly in your CSS file (since they are background images). Hurrah! Enjoy your new improved version of NextGEN Gallery complete with Shadowbox.js.

Preview Post Broke in WordPress?

I’ve had a problem with my blog that has been on the back of my mind for a while now; whenever I click the “Preview” button it simply shows my homepage. No errors…. just my homepage. I had a search about and there were suggestions it may be because of the use of a sub-domain (or lack of in my case). So I tried changing a few settings in the admin panel, but still no luck. I thought it may be a .htaccess issue until I enabled the now famous Kubric theme, also know as ‘default’; and suddenly the preview function worked. So it was an issue with my theme… Oops!

My immediate thought was the ‘functions.php’ file since the ‘single.php’ file was pretty much the same as Kubrics. After a few minutes of head scratching I finally solved the issue, my sidebar was breaking things:

1
2
3
4
5
6
7
8
9
10
//Register Sidebars
$p = array(
    'before_widget'  =>   '<li id="%1$s" class="widget %2$s">',
    'after_widget'   =>   '</li>',
    'before_title'   =>   '<h3 class="widgettitle">',
    'after_title'    =>   '</h3>'
);
if (function_exists('register_sidebars')){
    register_sidebars(2, $p);
}

Note the use of ‘$p’, it must be used internally by WordPress. My functions.php was overwriting this variable and breaking the preview function. Once this is changed to ‘$args’ everything worked perfectly:

1
2
3
4
5
6
$args = array(
    //settings here
    );
if (function_exists('register_sidebars')){
    register_sidebars(2, $args);
}

So there you go kids, don’t use ‘$p’ in your themes / plug-ins, use something a little more descriptive for your variable names.

Changing your WordPress Sidebar Markup

While creating a theme for WordPress today I ran into a little problem with my sidebar; the layout of the sidebar didn’t quite fit my needs for the design in-hand. At first I thought it could be a case of delving into the WordPress core code that generates all the widgets and modifying where needed, but that isn’t much fun. You also run the rist of these changes being overwritten next time you update WordPress; there had to be another way.

Purely for styling I needed to add an extra span to the title and a div to the widget wrapper. After searching through the Codex I came across the perfect solution:

1
2
3
4
5
6
7
8
9
10
11
//Custom settings in associative array
$args = array(
    'before_widget'  =>   '<li id="%1$s" class="widget %2$s"><div class="inner">',
    'after_widget'   =>   "</div></li>",
    'before_title'   =>   '<h3 class="widgettitle"><span>',
    'after_title'    =>   "</span></h3>"
);
//Check for register function and register the sidebar
if (function_exists('register_sidebars')){
    register_sidebars(1, $args);
}

You simply create an array with your custom settings and pass it into the register_sidebars function along with the number of sidebars you wish to register; paste that into the functions.php file in your theme and you’re done. If you don’t have a functions.php file you can just create one. All the settings are pretty self-explanatory and with these changing widget markup is easy.

On a side note; I’ve never been a big fan of using nested lists in the sidebar, I’m not sure it’s semantically correct; but I guess it does the job and works even when CSS is disabled.

You learn something new everyday!

WordPress and Feedburner Woes

For a couple of weeks now I’ve been having issues with Feedburner and the Nooshu RSS feed. When I added a post to the blog, Feedburner wouldn’t update; I had some luck with ‘pinging’ Feedburner manually as mentioned in their documentation but having to do this every time isn’t ideal. That method worked a couple of times then also stopped working.

So I tried changing the URL of the feed, maybe that was the problem. Nope that didn’t work either; it would pull in the new feed and the latest posts but then get stuck again. It was only when I noticed a link to Ping and Extended Ping XML-RPC API that it finally clicked; I had disabled XML-RPC on the blog while playing with some of the settings.

Look under 'writing' for the XML-RPC settings

XML-RPC settings are under 'Writing' in the WordPress settings

Once checked you will see this code added to your WordPress header:

1
<link rel="pingback" href="http://yourblogname.com/xmlrpc.php" />

Now it could be a complete coincidence that it just happened to start working when I enabled XML-RPC, but as long as it works I’ll keep it checked.

Update: Okay, so maybe I spoke to soon, the issue still seems to be occurring quite randomly, I’m thinking it could be a plug-in issue. I’ll update again if I find a solid solution.

Finding WordPress Administrator User IDs

I’ve been adding a couple of new features to Post Ideas+ over the past few days. One feature in particular required knowing the ID’s of users with the role of ‘administrator’. Now usually you can assume that the ID will be 1, as that’s what the initial adimin account setup by WordPress on install gets assigned. But as the code is going to be used in a plug-in you can’t really assume that.

Some people may have deleted the default account for security reasons (very good idea) or they have more that one administrator account. After hunting about on the WordPress forums for a while I managed to piece together a little snippet of code to do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//Get all admin user ID's in the DB
function admin_user_ids(){
    //Grab wp DB
    global $wpdb;
    //Get all users in the DB
    $wp_user_search = $wpdb->get_results("SELECT ID, display_name FROM $wpdb->users ORDER BY ID");
   
    //Blank array
    $adminArray = array();
    //Loop through all users
    foreach ( $wp_user_search as $userid ) {
        //Current user ID we are looping through
        $curID = $userid->ID;
        //Grab the user info of current ID
        $curuser = get_userdata($curID);
        //Current user level
        $user_level = $curuser->user_level;
        //Only look for admins
        if($user_level >= 8){//levels 8, 9 and 10 are admin
            //Push user ID into array
            $adminArray[] = $curID;
        }
    }
    return $adminArray;
}

//Usage
$adminIdArray = $this->admin_user_ids();

I placed it into it’s own function within my plug-in Class so it can be called whenever needed. It could also be used for finding users with different levels in WordPress if needed. If you wanted you could modify the function to accept an argument admin_user_ids($the_user_level_i_need); allowing you to get the IDs of users at whatever level you like.

There seemed to be a few ways of doing this on the forums, but this one works for me at the moment.

Currently on page 4 of 512345