Jes.Gs v2.0 » HTML/CSS

Fixing ThickBox in WordPress 2.8

Jess G. — Sat, 12 Sep 2009 20:45:49 +0000

If you’re using ThickBox then you’ve probably noticed that ThickBox is technically broken in WordPress 2.8. After trial-and-error, I’ve tracked down the problems and this is what’s happening and here is how to fix it.

Edit: February 27th, 2009. Finally had to time to check but the missing ThickBox CSS is still a problem in WordPress 2.9. My guess is that it might not be an actual bug but a feature to accommodate designers creating their own custom ThickBox designs.

WordPress 2.8 requires themes to have wp_footer()

WP 2.8 introduced a new option when using wp_enqueue_script() to load JavaScript files. It allows you the option of having the scripts load in the footer, which is why WordPress themes now require wp_footer() to work properly. However, that wasn’t my problem since I’d always added wp_head(), wp_meta() and wp_footer() as a matter of course when designing themes. So if the absence or presence of wp_footer() wasn’t the problem, then what was really going on?

What’s with ThickBox anyway?

Now, for the problem with ThickBox. So we know that it is being loaded, just in the footer. What I have found is that WordPress is not loading all of the files that ThickBox needs to work. jQuery is being loaded, so that can be ruled out. What isn’t being loaded is the CSS file that ThickBox needs to format its popup window. Also, another part of the problem is the ThickBox.js file itself has the paths to the images it needs set to relative paths.

How we fix it

Starting off, if you haven’t added the code to load ThickBox, go ahead and add wp_enqueue_script( 'jquery' ) and wp_enqueue_script( 'thickbox' ) to your header. Now what we do is we add wp_enqueue_style(‘thickbox’) to our section. I’ve seen people asking for wp_enqueue_css and “lamenting” the fact there isn’t such a function but there actually is, it is wp_enqueue_style(). The second part requires adding to an existing functions.php file or creating a functions.php if it doesn’t exist with your current theme. In your functions.php file, copy and paste this code:

add_action('wp_footer', 'load_tb_fix');
 
function load_tb_fix() {
	echo "\n" . ''. "\n";
}

This fixes those first few lines of the ThickBox.js file that calls the images that ThickBox uses, and it is inserted in the footer after the call that inserts the reference to ThickBox.js.

So now, ThickBox functionality should be restored. Quick recap:

Add the code below to your section:


wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'thickbox' );
wp_enqueue_script( 'thickbox' );
?>

Then add this code to your functions.php file:


 
add_action('wp_footer', 'load_tb_fix');
 
function load_tb_fix() {
	echo "\n" . ''. "\n";
}
?>

Conclusion

Had do some research to figure out what was going on besides just looking at my own source code. The first reference to this issue I found was at this link: ThickBox and jQuery in WordPress 2.8, then I figured out how to fix the ThickBox dependency image loading issues by looking at the code for the NextGen Gallery plugin.

Good luck! And enjoy your restored ThickBox functionality

WordPress Plugin: YaECP

Jess G. — Mon, 13 Jul 2009 01:50:21 +0000

Which stands for “Yet Another Exclude-Cats Plugin.” Fairly easy to use, just follow these basic steps:

Just unzip into your WordPress plugins directory
Open the WordPress plugins page
Activate the YaECP plugin
Look for the new page called “Exclude Categories” in the Posts section.
Finally, select which categories you wish to exclude from the front page.

I whipped this plugin up on the spur-of-the-moment to deal with some issues that I found in the beta version of Manga+Press 2.5 having to do with it’s new exclude comic categories from the front page option. Apparently, if you want to exclude another category as well as the comic category, you can’t call query_posts() again because it will reset the Manga+Press query.

The plugin was tested on WordPress 2.8 so I’m not so sure how it’ll work with versions older than 2.8. I am also not so sure how the plugin will work with specialized themes that have multiple loops, such as magazine-style WordPress themes. Either way, hope someone gets some use out of it.

PHP and XML: LightGallery

Jess G. — Sat, 21 Mar 2009 03:47:00 +0000

LightGallery is a new light-weight gallery script that I wrote as an answer to “weightier” scripts like Gallery and Coppermine. LightGallery does not require MySQL to run; however it does require PHP 5 and the GD library. A short example of LightGallery in action can be seen here. You can also download the script here.

How to use LightGallery? First off, start by inserting this code at the top of any page you’d like to display your gallery:

Followed by:

$path = '/path/to/my/images/folder';
$thmb_size = 'thumb-height thumb-width';
 
$gallery = new Gallery($path, $thmb_size);
$gallery->Output();

$path is obviously the full path pointing to the directory where your images reside. Replace thumb-height and thumb-width with the desired height and width of your thumbnail. The beauty of LightGallery is that it is one PHP Class that can be used as many times as need be. If you need to create a new gallery, all you have to do is create a new directory, upload your images to that directory and create a new Gallery object with $path set to that path.

Some limitations include:
The gallery directory has to be one level below the root directory where gallery.php resides. Another limitation is that LightGallery uses jQuery and ThickBox and ThickBox is hard-coded into LightGallery, though I plan to change that at a later date.

Tips:
If you want your thumbnails to display tool-tips and have captions in ThickBox, edit the album.xml file that is created in the directory where your images reside. Specifically edit the and tags so that they contain your desired title and description. Another planned edition to LightGallery is a single-user backend to allow easy editing of titles, descriptions and possibly deletion of images.

PHP and XML: A Quick Introduction

Jess G. — Fri, 20 Mar 2009 18:00:45 +0000

A quick and dirty intro to using PHP to manipulate XML. Very useful to know since there are probably situations where MySQL might be unavailable or just impractical and XML can make a great replacement, especially in small/light-weight applications.

The first place we start is by looking at PHP’s DOM extension; read through the Introduction and Installation/Configuration sections before continuing.
Now we’ll access the DOMDocument class. Starting out, this will probably be the class that gets used the most but as things progress, you’ll find yourself making use of the other classes available.

$xmldoc = new DOMDocument(); // create a new DOMDocument object.

Yep, it’s that simple. Now here comes the fun part. This scenario is going to assume that we’re just creating a new XML object.

$xmldoc->formatOutput = true; //Nicely formats output with indentation and extra space.
 
$root = $xmldoc->createElement( 'xml' ); //create a root element for your XML output
$xmldoc->appendChild( $root );
 
// Now, we're going to create a few child elements to go with it
$child1 = $xmldoc->createElement( 'child_one', 'Child One' );
$root->appendChild( $child1 );
 
$child2 = $xmldoc->createElement( 'child_two', 'Child Two' );
$root->appendChild( $child2 );
 
echo $xmldoc->saveXML(); //output to screen...

Pretty simple and straightforward. Now, if we want to save to a file, we do this:

$xmldoc->save( 'my-xml-file.xml' );

If we want to open and write to a file:

$xmldoc = new DOMDocument(); // create a new DOMDocument object.
$xmldoc->load( 'my-xml-file.xml' );
$xmldoc->formatOutput = true;
$root = $xmldoc->documentElement; // Conviently allows direct access to the root element.
 
$b = $xmldoc->createElement( 'another_one', 'another child' );
$root->appendChild( $b );
 
$xmldoc->save( 'my-xml-file.xml' );

Very quick and straightforward. I hope this helps anyone who was wondering how to use XML and PHP together.

For more information see:

PHP Manual: XML Manipulation
Kirupa.com: PHP and XML
IBM.com: XML for PHP Developers, Part 1 (three-part series)
DynamicDrive Forums: Read and Write XML with PHP (forum-post, this is what got me started)

CSS Calendars II

Jess G. — Tue, 02 Dec 2008 08:28:53 +0000

The last tutorial on CSS Calendar Icons was pretty straightforward but lacked directions for integration with other blogging platforms. Here, I’m going to use WordPress as an example and I’ll work with my calendar book-style css icon.

 // begin calendar icon code
	$year = get_the_time('Y');
	list($y1,$y2,$y3,$y4) = str_split($year, 1);
?>
	 the_time('F jS, Y') ?>">
		
		$y1?> $y2?> $y3?>$y4?> 
		
			 the_time('M')?>
			 the_time('j')?>
		
	
 // end calendar icon code ?>

Here, we’re using the WordPress function get_the_time(), which works like the_time()—which means that it uses the same PHP Date and Time formatting characters as the_time(). Unlike the_time(), get_the_time() passes the result to a variable instead of echoing it, which is what we need here. We use get_the_date(‘Y’) to grab just the year-part of the date, then we use str_split() and list() to parse the individual numbers of the year into separate variables.
CSS Code:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}
/* Book-Style */
.book {
	width: 57px;
	font-size: 12px;
	font-weight: normal;
}
.book .cssCalInner {
	width: 36px;
	margin-left: 10px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.book .spine {
	background: url(images/calendar_book.png) no-repeat scroll left center;
	display: block;
	float: left;
	width: 14px;
	height: 38px;
	position: relative;
	z-index: 1;
}
.book .year {
	font-size: 75%;
	background: purple;
	color: white;
	height: 38px;
	width: 15px;
	float: left;
	margin-left: -10px;
	position: relative;
	z-index: 0;
}
.book .year span {
	display: block;
	float: right;
	width: 10px;
	height: 8px;
}
.book .month {
	background: none;
	color: black;
}
.book .date {
	font-weight: bold;
	font-size: 120%;
}

Seems pretty straightforward, right?

Using WordPress? Go to the next page for a WordPress add-on to use in your own WordPress themes.

CSS Calendars

Jess G. — Sat, 29 Nov 2008 07:28:25 +0000

About sometime last fall, I came across a tutorial on how to create those little CSS calendar icons that are practically everywhere now. The method I found uses a background image and while that’s fine, I guess I prefer something that doesn’t require an image to bring off the design. This last layout that I’ve been working on for Dumpster-fairy.com makes use of those CSS icons, and to give credit where credit is due, I was very much influenced by the icons used at Last.fm for the events calender list. I came up with my own workable solution and I’ll walk you through my methods in this post.

Since I was going to be using a calendar icon in different places on my website, I obviously would want the icon to appear slightly different in each place; for instance, I use a larger calendar icon as part of the header for my blog posts, and a smaller event-like calendar for the side-bar. So, I start off specifying a series of default styles:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}

HTML Code:

<span class="cssCalendar" title="Friday November 28th, 2008">
    <span class="day">Fri</span>
    <span class="cssCalInner">
    	<span class="date">28</span>
        <span class="month">Nov</span>
        <span class="year">2008</span>
    </span>
</span>

This is what you should have:

I’ve tested the base styles in Firefox 3, IE 7, Safari and Opera 9.5 and it appears pretty much the same across the board. But it’s a little boring, don’t you think? So we move on to adding some additional styles:

/* Medium Size */
.medium {
	width: 52px;
	font-size: 18px;
}
.medium .cssCalInner {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.medium .day {
	font-size: 100%;
	font-weight: bold;
	color: white;
	background: red;
}
.medium .date {
	font-size: 120%;
	font-weight: bold;
}
.medium .month {
	font-size: 75%;
	font-weight: normal;
}
.medium .year {
	font-size: 50%;
	font-weight: normal;
}

So this is what we do now. Our HTML fragment above? Change the first line to this:

<span class="cssCalendar medium" title="Friday November 28th, 2008">

Didn’t know you could have more than one class for an html tag? Well, now you do. Your calendar—browser depending, of course—should look like this:

We could leave this tutorial here or, we can go on. You can check out the Last.fm-style calendar icons on the next page.