Completed button

1.) The Metal Ring

1. Start by selecting the Ellipse Tool and draw a circle with a diameter of roughly 65px. Color doesn’t particularly matter because we’ll be using Layer Styles to change the appearance.
2. In Layer Styles, we’ll be using Drop Shadow, Bevel and Emboss, Satin, Color Overlay and Stroke. Use the following settings for each of the styles:
   

   Drop Shadow Settings

   

   Bevel and Emboss Settings

   

   Color Overlay Settings

   

   Satin Settings

   

   Stroke Settings

3. Now, you should have something that resembles this:
   
4. Make sure that you are on the same layer path, and using the ellipse tool again, create a circle that is 10px smaller than the first one and then center it inside the other circle. While the new path is selected, press the - key to subtract from the outer shape area. Now, you should have a ring that looks like this:
   

2.) The Button

1. Start a new circle path layer above the one we just created. Make sure that the new path is slightly bigger than the inner circle of the ring without showing on the outside.
   
2. Once again, we’ll use Layer Styles to adjust the appearance:
   

   Inner Shadow Settings

   

   Inner Glow

   

   Bevel and Emboss Settings

   

   Bevel and Emboss Contour Settings

3. Once you’re through all of that, your button should now look like this
   

3.) The Icon

1. The icon can be anything you want it to be. If you want, you can do a quick search on Google, Bing or Yahoo for the vector logos of your favorite social networking sites to use. For the example, we’ll just use the envelop custom shape that comes with Adobe Photoshop CS4.
2. To add more depth to the shape, place a rectangle of the same size as the envelope custom shape behind the envelope, then apply a Gradient Layer Style to the rectangle and adjust the gradient accordingly.
   

4.) Finishing Touches

Now, we can stop with what we have, or you can continue on and add the reflections. The reflections use a combination of paths and gradient layers.

Button Closeup

Once again, it’s up to you to decide how the reflections should look. Yes, the buttons can be any color you choose. You can see finished examples here.

Have fun!

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

<?php
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!

• WordPress hook directory page_css_class
• WordPress Classes.php Source Reference
• WordPress Support: Add Link with Class to Page Menu

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 <head> 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" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\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:

1. Add the code below to your <head> section:

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

2. Then add this code to your functions.php file:

   1 2 3 4 5 6 7 8

   <?php   add_action('wp_footer', 'load_tb_fix');   function load_tb_fix() { echo "\n" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\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

$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)

Below is the tutorial. If you prefer a pdf, you can download that at my DeviantArt account here. Just click on the link that says “download.”

<?php // begin calendar icon code
	$year = get_the_time('Y');
	list($y1,$y2,$y3,$y4) = str_split($year, 1);
?>
	<span class="cssCalendar book" title="<?php the_time('F jS, Y') ?>">
		<span class="spine"></span>
		<span class="year"><span><?=$y1?></span> <span><?=$y2?></span> <span><?=$y3?></span><span><?=$y4?></span> </span>
		<span class="cssCalInner">
			<span class="month"><? the_time('M')?></span>
			<span class="date"><? the_time('j')?></span>
		</span>
	</span>
<?php // 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.

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.

1. We start with a new Photoshop document by press Ctrl+N (or Mac equivalent) and changing the document width to 100 pixels and the height to 20 pixels.
2. Select the Gradient Tool (G), then click on the Gradient Editor to select or create a new gradient.
   
3. Click and drag the Gradient Tool the entire length of the document. You should have something similar to the following image:
   
4. Select Mosaic from the Filter menu:
   
   then set Cell Size to 10 pixels and click OK.
   

And that’s it! You’re finished. You should have an image that looks like this:

You can use the Eyedropper Tool to select your colors or you can repeat the steps, except make your document longer and thinner to create a horizontal bar.

Follow this [link] to download this tutorial in PDF format.

1. Create a new document: File > New… Any size document will do, as long as its bigger than 400×400.
2. Set the foreground color using these values (r:128 g:127 b:132). Using the Paint Bucket tool (G), fill the entire document.
3. Select the Shapes tool(s), (U) or (Shift+U), depending on if you want to use a regular shape, or a custom shape. Make sure that the Paths option is selected (in the Shapes tool bar). Now click+drag to create your shape.
4. Select the Path Selection tool (A), right+click on your path and choose make selection. Leave all the default options the way they are, ie: feather radius = 0, anti-alias (checked), and click OK.
5. Press (M) or (Shift+M) for the Rectangular Marquee tool.
6. Go to Filter > Noise > Add Noise… and use these settings: Amount = 25%, Distribution = Gaussian, Monochromatic (checked). Click OK.
7. Now, go to Filter > Blur > Motion Blur… use these settings: Angle = 0°, Distance = 21. Click OK.
8. Rectangular Marquee tool should still be selected; if not, press (M) again. Right-click anywhere around the selection or inside of it, and select Select Inverse.  Now press (delete), to clear the selection.
9. Now click outside the selection to clear it. Now, go to Layer > Layer Style > Bevel and Emboss (or use the Fx shortcut on the Layers palette). Play around till you find something you like =)

To create just a simple, tileable texture:

• On step 1, use a size that is easily tileable (something less than 256×256). Flatten the image after step 2 (only if the image isn’t already flat).
• Skip steps 3 thru 5, 8 and 9.
• After step 7, go to Filter > Other > Offset, and set your horizontal offset to half of your document width. Do the same for the vertical offset (half of document height) just to check it; this is usually fine. Make sure that Wrap Around is selected in Undefined Areas. Click OK. You’ll have a seam down the middle of the document.
• Now, go to Image > Canvas Size…, and change the Canvas extension color to match the color fill of the document. Making that the anchor is set to the middle, change the document height to 300 and click OK.
• Using the Rectangular Marquee tool, make a narrow (not more than 100 pixels) selection around the entire length of the seam in the middle of the document. Right-click and select Feather… Change the value to somewhere between 12 and 25 pixels. Click OK.
• Go to Filter > Blur > Motion Blur… and use the same settings for step 7. Click OK. Use Canvas Size… again but set height back to 256.
• Go to Filter > Other > Offset, to test your tile.

Now, you should be finished!

note: the instructions in this tutorial are aimed primarily at Photoshop users but can be utilized in any image editing program that supports layers and blending modes. The reason that this tutorial came about is once upon a time, I had a set of plug-ins that I’d paid for that did exactly what I’m going to cover in this tutorial. Well, I lost the disk and didn’t really feel like paying for them again, so I came up with my own way of creating a “dreamy” effect in Photoshop using just the plug-ins that come with Photoshop.

1. Start by opening your document in Photoshop. You’ll have one layer that is labeled “Background” in italics. Click and drag that layer over the Create New Layer icon, or go to Layer > Duplicate Layer… and click OK.
2. You should have a second layer called “Background copy”. Now, press Shift+Ctrl+U (Windows) to desaturate that layer.
3. Click on the Blending Mode drop-down at the top of the Layers panel, and select “Overlay.” So far so good. You’re almost done.
4. Making sure that your “Background copy” layer is selected, go to Filters > Blur > Gaussian Blur. Now play around with the blur level till you have something that looks nice. I usually go for a blur value of 10.
5. Click OK, and now you’re done.

To make things easier, I’ve created a set of actions for Photoshop.

Download Zip 8Kb: Dreamy Photo actions

This software is licensed under the CC-GNU GPL.