Jes.Gs v2.0 » WordPress

WordPress: Using page_css_class

Jess G. — Sat, 27 Feb 2010 04:30:58 +0000

I’m pretty sure that I’m not the only person who is somewhat annoyed by the way WordPress handles the page-item classes for Page lists. Particularly if you’re like me and you use WordPress as a CMS. It would be a lot easier to deal with page-item-pagename than page-item-1. For one, page-item-pagename is easier to remember. Well, I bet you didn’t know that you can change that! Yep, that’s right. You can, and it’s all because of a relatively unknown hook that was introduced in WordPress 2.8 called page_css_class, and here is very quick and dirty way of changing the page item classes to match the pagename and not the page ID.

Open or create a functions.php file in your theme directory.
Then paste the code below into your functions.php file:


add_filter('page_css_class', 'custom_page_css_class', 10, 2);
/**
 *	custom_page_css_class()
 *	Hooks into page_css_class and modifies the page item class so that
 *	it uses the name of the page instead of the id.
 *
 *	@global int $id.		The ID of the page being viewed. Needed to set current_page_item.
 *	@param array $class.	The page css class being modified, passed as an array from Walker_Page
 *	@param object $page.	The page object passed from Walker_Page
 *	@return array			Returns the new page css class.
 */
function custom_page_css_class($class, $page) {
	global $id;
 
	if ($page->ID == $id)
		/* checks if the page ID matches the current page and if it does,
		    adds the current_page_item class
		*/
		$t = array( 'page_item', 'page-item-'.$page->post_name, 'current_page_item');
	else
		$t = array( 'page_item', 'page-item-'.$page->post_name);
 
	return $t;
 
}
?>

There you go! Yes, it’s that easy.

What the example does is it duplicates what’s happening in the WordPress source code but instead of using $page->ID, it’s using $page->post_name. It assembles the classes into an array and then returns it to be echo-ed out when the pagenav is generated. Note that $class isn’t used but it is necessary to have it as one of the parameters because WordPress passes it to the hook by default and we need the $page object in order to make the example work.

Happy coding!

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

Vote for WordPress 2.9 Media Features

Jess G. — Tue, 07 Jul 2009 22:14:58 +0000

Your opinion does matter! Get your 2¢ in on the media features for the next version of WordPress!

WordPress › Blog » Vote for 2.9 Media Features.

This is a very good idea, in my opinion. WordPress already has fairly strong media managment features but there is more than enough room for improvement. I also think that the idea of Media Albums and Post Thumbnails would be really awesome. It would greatly eliminate the need for complicated hacking, for one. Personally, I hope those two ideas make it into 2.9 as features. A lot of people, including myself, are using WordPress for more than just blogging—for instance, as portfolios—and having a feature like media albums that aren’t tied to a post or even post thumbnails, would really take out a good portion of production time.

Manga+Press Status

Jess G. — Sun, 14 Dec 2008 20:01:21 +0000

A little status update on Manga+Press 1.0 RC1. I’ve been shaking out bugs and reworking some of the code. I hope to have it out for release sometime next week, followed by a “skeleton” WordPress theme that works with the plugin. Right now, I’m testing Manga+Press out using a modified version of the Kubrik theme that comes with WordPress.

I’m aiming for a Friday release, so check back for more info!

Manga+Press Coming!

Jess G. — Fri, 12 Dec 2008 20:46:38 +0000

I’ve been working on a comic manager plugin since the beginning of this year. After many starts and stops and road-blocks, I’m happy to announce that in time for 2009, I will be releasing my comic manager plugin for WordPress called Manga+Press!

Stay tuned for details!

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.

New site finished!

Jess G. — Fri, 28 Nov 2008 05:06:34 +0000

Well, the new site is finally finished. Lots of changes to the site’s navigation and function. I added a few more pages, and decided to place new tutorials and resources on the front page. There is a new links page that will have links to other web design/graphic design sites that I come across in my surfing…come to think of it, I should probably add a link to my delicious account as well!
But whatever. I’m just happy I’m finally finished. The new site design must have comprised at least 40 hours’ worth of work—judging from the strain on my mouse-hand. The design actually came about as a result of my Writing for Interactive Media class about a few weeks back. The objective was to create a content (or concept) script for any type of interactive media project like a Flash game, web site, interactive math lesson, etc. I decided to redesign my own website. If I work in the time I spent on the navigational flowchart, content script, the wire-frames, the Photoshop template, and then finally translating that template to html and css (no, I didn’t bother with the export-to-web feature—sometimes, that just creates more headaches), then *sighs* the WordPress/PHP work.

Yeah, 40 hours easily. And my shoulders and hands feel the strain. But hey, I had fun doing this though, and it allowed me an even greater in-depth view of WordPress’s API.

There are still a few things that need to be finished, like the portfolio, the links page and the contact page but those were things I really couldn’t do anything about until the site had been uploaded.