Ballyhoo Blog

I usually blog tutorials around the design/web arena, and have been wanting to create a little section of this site to where I can rant and or rave about a few topics. This post is the first of such.

First of all, let it be known that I teach for a living. I enjoy it. I teach at a 2 year college. I teach web design. Most of my students are “designers”. I’ve noticed a few things.

1. People think web design is easy. (thanks a lot wordpress, weebly, myspace, blogspot, frontpage, insert favorite WYSYWYG here etc..)
2. Most of the students sort of know what “HTML” is. (“It’s the Internet language stuff…”)
3. 6 years ago, most didn’t know who nor what HTML is.

This is a pretty significant shift, in a few short years.

With as pervasive as the internet has become, residing in most everyones pocket, the Internet and its language are the communication standard of the 21st century. I can see if a few short years. HTML being taught right alongside English, Math, & Science. Our middle schools will soon be teaching their students how to deliver, consume, and author content on the web. When they reach college level learning, HTML will be like English. It will be the non-verbal communication tool that all people will need to know. Those who don’t learn it, will be the minority or disadvantaged.

Whether or not they use the language daily or not, they will be better employees/managers for having attained the skill.

HTML is the new English my friends.

Maybe in some future not-so-distant date, instead of the facebook and twitters and picassas, and g pluses, we will all just have our own domains. Instead of signing in to a business site to make social connections, I just connect my domain to my friends domain. I control my content, my look, my ads, my design, my services, my widgets etc.

Aside from the business/entertainment side of the web, I see the “Social Web” as a giant mashup of Blogspot blogs meets Facebook meets Myspace, meets Twitter meets WordPress.org CMS meets RSS meets XML, where users are in control of their own domain, and create sites that are more of an extension of themselves. The connections are made between the domains. Standards arise to define new types of “social” content syndication. People write widgets and plugins that users can easily integrate/subsribe to/purchase.

The evolving notification world of mobile comes to the web. I’m notified of the ongoings of my social domain. I lose my address books and “contacts”. These social connections are my contacts. I decide how to categorize or label them. The programmers and developers create the products, I am the master of my domain. HTML gives me that ability and power.

HTML is the new English.

I’ve been tinkering with how to add custom fields to my wordpress comments. It turns out the documentation is sort of sparse in regards to doing so, but a few helpful posts, and some digging inside of the comment-template.php core file finally got me there.

The Background

I’ve got regular posts and such with regular comments. I’ve got a custom post type set up for a section of a site thats called “units”. I wanted this custom post type to have it’s own special comments with the additional custom fields (It could be star ratings, drop down menus, extra input fields, whatever.) I wanted regular comments everywhere on the site, except comments that were of that ‘unit’ post type. Since WordPress 3.0, there is a new generic form for handling comments. In specific, this function call ‘comment_form()’ loads it up. This tutorial assumes your working with something later than 3.0 and using this new method of calling and formatting comments…

The Solution

Step: 1

The first thing is we have to set up a new comment.php template file, which we will include in our single.php post type pages. The easiest way to do this, is just make a copy the comments.php and rename it comments-units.php. That way we can have the two separate comment template files, and load them wherever we choose.

Find your ‘single-units.php’ file, (or whatever template file you want to add your new comments to, and change this:

comments_template( '/comments.php', true );

To this:

comments_template( '/comments-units.php', true );

The ‘true’ second parameter makes WordPress sort ‘trackback’ comments separately from ‘regular’ comments

Step: 2

Open up your comments-units.php file and find this line of code (near the bottom)

<?php comment_form(); ?>

Replace that comment_form line, with the following bit of code. Of course, customize for your own needs.

<?php
$args = array(
		'id_form' => 'commentform',
	    'id_submit' => 'submit',
	    'title_reply' => __( 'Leave a Unit Report' ),
	    'title_reply_to' => __( 'Leave a Reply to %s' ),
	    'cancel_reply_link' => __( 'Cancel reply' ),
	    'label_submit' => __( 'Post Report' ),
		'comment_field' => '<p>' . '<label for="comment">' . __( 'Unit Report' ) . '</label>' . '<textarea id="comment" name="comment" cols="45" rows="12" tabindex="4" aria-required="true"></textarea>' . '</p>'
		);

      comment_form($args);
?>

Note: This comment_form() function initiates the comment form. We pass an variable with a set of arguments to ovverride some of the default items of the comment form. For a full list, see the wp codex directory.

Step 3

Now we need to add whatever custom fields we want, to the default “name, url, website” fields.
I’ve got two simple text input fields I’m adding to the comments here. You can add as many or any type of form field.

global $mm_extra_fields;
	$mm_extra_fields = array(
		'hidden_field1' => '<input id="type" name="type" type="hidden" value="unit-report" size="30" />',
		'field1' => '<p><label for="species">Species</label><span>*</span><input id="species" name="species" type="text" value="ex: Mule Deer" size="30"></p>',
		'field2' => '<p><label for="terrain">Terrain</label><input id="terrain" name="terrain" type="text" value="ex: High Altitude, Rocky Terrain" size="30" aria-required="true"></p>'
	);

I’ve put my fields inside of a variable called $mm_extra_fields. This variable is an array, with keys and values. The value for each key is the HTML that I will output via wp filters to the default fields list. I’m giving it global scope, so I can use it inside of my hook function below

Here is the hook, that adds the above fields, to the comment form list.

add_filter('comment_form_default_fields','mm_extra_fields');
	function mm_extra_fields($fields) {
		global $mm_extra_fields;
		foreach($mm_extra_fields as $mm_extra_field_key => $mm_extra_fields_html){
			$fields[$mm_extra_field_key] = $mm_extra_fields_html;
		}
		return $fields;
	}

You can see that we’re just looping over our array via foreach, and adding new keys and values to the the $fields[] variable. Once were done, we return the $fields variable, which has our new fields attached! Wallah. We’re half way there…

You can see the before and after in the following photo. (Don’t stop here, as there are a couple of “gotchas” ahead.)

Step 4

One or two notes. If your using your own CSS or forms, style accordingly. I’ve had to make a few additions to the TwentyEleven css file, to get my new fields to style the same as the other defaults. Namely the paragraph tag, that surrounds the form element. I gave mine the generic class name of 'class="comment-form"'
You’ll need to go add css styles to accommodate for this class name.

For example, you’d need to modify all of the css blocks, that deal with comment form styling to look something like this: (note I added my comment-form selector to the top of the grouped selectors). There are a few other spots you’ll need to do the same…

        #respond .comment-form,
	#respond .comment-form-author,
	#respond .comment-form-email,
	#respond .comment-form-url,
	#respond .comment-form-comment {
		position: relative;
	}

Step 5

Here’s one of those gotchas. Everything looks fine and dandy so far, but you’d sooner or later (hopefully sooner) realize that IF the user is logged in, all of your custom comment fields go away. Not good. Not good at all.

Luckily there is a relatively easy fix for that. We call upon another hook to add our same fields, if the user is logged in. Here’s the code.

	add_action( 'comment_form_logged_in_after', 'mm_extra_comment_fields_logged_in',10,2);
	function mm_extra_comment_fields_logged_in($commenter,$user_identity){
		global $mm_extra_fields;
		foreach($mm_extra_fields as $mm_extra_fields_html){
			echo $mm_extra_fields_html."\n";
		}
	}

We’re re-using our array of extra fields we created earlier, and following the same logic on the first filter. We’re just using a different hook this time…

Step 6

Get some ice cream already!

Step 7

Okay, so we have our form, it loads properly both when and when not logged in. Now we just need a couple of more hooks to actually SAVE the form data into the database, and retrieve it to display with our comments… Easy, right?

To save the custom comment fields, we call the function ‘add_comment_meta()’ in the comment_post hook

add_action ('comment_post', 'mm_add_comment_meta', 1);
function mm_add_comment_meta($comment_id) {
	if(isset($_POST['type'])){
		$type = wp_filter_nohtml_kses($_POST['type']);
		add_comment_meta($comment_id, 'comment-type', $type, false);
	}
	if(isset($_POST['species'])){
		$species = wp_filter_nohtml_kses($_POST['species']);
		add_comment_meta($comment_id, 'species', $species, false);
	}
	if(isset($_POST['terrain'])){
		$terrain = wp_filter_nohtml_kses($_POST['terrain']);
		add_comment_meta($comment_id, 'terrain', $terrain, false);
	}
}

That’s it. Whenever a comment gets posted, it will add our extra fields to the “comments_meta” database table. This works exactly like ‘custom_fields’ for regular posts. It’s all just stored as meta data, but in it’s own comments_meta table. Spiffy. The wp_filter_nohtml_kses function strips out any html tags from the data, so users can’t upload malicious scripts or html… There are several other validation functions in the codex to ensure safe data…

You might have noticed that in the first code drop, I actually had a hidden field called ‘type’ that gets added along with my two visible fields. I’m adding this, so I can flag comments to be my special ‘type’ in the database. This is sort of a hack, and no official documentation on how this should be used, but I’ll show it for completeness sake.

Just like regular posts have a ‘post_type’ field, comments have a “comment_type” field. WordPress only uses 2. If it’s blank, that means it’s a regular comment, if it’s not a regular comment, it might say ‘trackback’. Right now, I think those are the real only use cases.

Since I have my own ‘type’ of comment, I decided to add ‘unit-report’ in that field of the comment being inserted. This allows me to run custom queries on the DB and get all comments that are of type=’unit-report’ should I need. Here’s how.

add_filter('preprocess_comment','mm_unit_comment_type');

function mm_unit_comment_type($commentdata){
	global $post;
	if ($post->post_type == 'units' {
		$commentdata['comment_type'] = 'unit-report';
		return $commentdata;
	}
	else{
		return $commentdata;
	}
}

First we check to make sure the comment is coming from comments of our custom post type ‘units’, if it is, we add the comment_type of ‘unit-report’. That’s really it.

Step LAST

The lastliest thing we need to do, is display our custom meta values on our comments. This is pretty easy. I imagine most people are using the callback method for displaying posts, which is the way the default themes do it. In order to make this work, you’ll need to go find that callback function call. It looks like this, and should be in the middle of the the template file comments loop. (The function name is twentyeleven_comment)

wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );

Find that callback function (in your functions.php file) and edit the line that looks like this:

	<?php comment_text(); ?>

I made mine look like this. (We simply use a function called ‘get_comment_meta’, which takes the comment id, and key-name.) Setting the third parameter to true makes it output a string, if set to false, it will return an array

<div>
	<?php
		if(is_singular('units')){
			?>
			<p><?php echo "Species: ".get_comment_meta( $comment->comment_ID, 'species', true ); ?></p>
			<p><?php echo "Terrain: ".get_comment_meta( $comment->comment_ID, 'terrain', true ); ?></p>
			<span>Unit Report:</span>
			<?php
		}
	?>
	<?php comment_text(); ?>
</div>

Now we’re really done. I do a quick check to see if we’re on a comment page of my post type of ‘units’ (because both regular comments and my special ‘unit comments use this same callback for display) if so, we display the extra fields from the database we added earlier! Phew. That was lot.

Comment and ask questions, or suggest better/alternate ways of noodling. If you’ve made it this far, congrats. There is admittingly ONE thing missing. Now way to “edit” the custom wordpress comment fields on the back-end, like you can with regular comments. Maybe I’ll look into this later…

Style to taste!

My first kids iPhone app is out. It’s called Toddler Trainer. It’s a simple learning game where your kids learn shapes, objects, numbers, letters, and words. Several different mini-prizes exists for successful level completion. If you’ve got kids between 1 year and 3.5 years, check it out, I’m sure they’ll love it.

Iphone app for kids

The app features over 200 individual objects, all accompanied with voice over.

Update: Here is a working demo

Want to learn how to create the sexiest most real looking box shadows using pure CSS? Then I’ve got a trick for you. The standard Box Shadow that you can apply via CSS3 to a box is rather bland. It may look something like this.

Note: If you like this effect, please link to my post, don’t steal! Thanks.

It is nice and all, and a nice leap from having to do shadows with png background images and such, but it doesn’t quite cut it for me. So with a few tricks, and some magic. We’ll be creating this.

It gives the effect that the page is “curling” or lifting off of the page. This effect is achieved with PURE CSS and ONE single <div> tag!

Let’s get started.

The first thing we will need to do is set up our HTML. It is as basic as it gets folks.

Step 1

Simply create the following in your HTML document.

       Text Here

Now that we have our Box in place, we can do the fancy stuff in CSS. We’ll be using CSS gradients, CSS Box Shadows, and CSS Text Shadows, but the actual trick, or effect comes into play with several “experminetal” css features. Namely: -transform [rotate,skew] and the Pseudo selectors :before and :after. We also throw in some z-index, and other goodies, but my particular effect (which I think I am the first to create) uses SKEW to make it all work.

The CSS Stuff

We need to set up our div via CSS with some basic styles. The following code, sets up our box, gives us a gradient background, gives our box an initial shadow, makes our entire page background gray, and centers our box on screen.

NOTE: I’ve only included the -webkit prefixes which will work on Safari, and Chrome. If you’re working in Firefox, please prefix accordingly. If you have no idea what I’m talking about, then you ought to learn about css prefixes first. Also check out Jeffery’s screencast at NETTUTS for a different sort of shadow but uses some of the same principles.

Step 2

body{
	background-color:#ddd;
}

#box{
	px;
	px;
	margin:50px auto;
	position:relative;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955));
       -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}

Here is what it should look like.

Step 3

Next we need to add the pseudo selector of :before and :after, which are sort of like “layers” of our box. This allows us to create new shadows and rotate and skew those “layers” separate from our original box. Thus allowing for nifty shadows. Here is the CSS.

#box:after{
	-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
    position:absolute;
	content:'';
	background:transparent;
	bottom:10px;
	right:9px;
	%;
	%;
    -webkit-transform: rotate(5deg)
					   skew(10deg);
}

This takes advantage of the :after selector. We create another box shadow on our new “layer” make its background transparent, rotate it, and skew it, then use css positioning to move it to the bottom right of our original box.

This is what things should look like.

I am going to leave the shadow in “front” of our box, so you can see how my magic skew comes into play, to create the more realistic shadow.

Step 4

Next we do almost the same thing, except we use the “:before” pseudo selector, and skew our box at a different angle, and make its shadow “WHITE”. This is the important part, to sell the effect.

Here is the CSS

#box:before{
	-webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
    position:absolute;
	content:'';
	background:transparent;
	bottom:46px;
	right:41px;
	%;
	%;
    -webkit-transform: rotate(20deg)
					   skew(45deg);

}

This is what it should look like. You should now be able to see the “ah-hah” of what i’m getting at.

Step 5

The last thing we do is add the z-index to our before and after selectors to move the shadows behind the box, not in front.

Give your :before selector a z-index of -1, and your :after a z-index of -2;

Before

	z-index:-1;

After

font-family:Arial; em; color:#fffb9b; text-align:center; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 1px rgba(0, 0, 0, 0.4);

And that’s it! This only opens up some of the possibilities of the shadows! By nesting another div or image in our original box we could open up a whole other dimension of fancy shadows and potentially create complex shadows on both sides of the box.

By varying the degree of “blur” in the shadows we can create different levels of depth for sharp or soft shadows. Link to me, as I appreciate the juice.

Sexy CSS Box Shadow

Andrew

Background

I wanted my custom post types that I created in my last writeup (custom post types with archive page) to appear in my wordpress main feed. By default the custom post types do not get added to the main feed that wordpress creates. In my last write up I showed how I added the necessary rewrite rules in order to have the structure: www.domain.com/custom-p-type/feed. This will create a feed with all of those custom post types. Perfect. But what about my “main” wordpress feed?

What I wanted

What I wanted is for my www.domain.com/feed to include ALL of my sites content. Be it posts, or custom post types that I create. There are a couple of methods I found for doing this. I finally found the solution on the track in this ticket. core.trac.wordpress.org/ticket/12943

The solution

Here is what will add your custom post type content to your sites main feed, and leave your regular custom post type feeds specific for their respective content…

function myfeed_request($qv) {
	if (isset($qv['feed']) && !isset($qv['post_type']))
		$qv['post_type'] = get_post_types($args = array(
	  		'public'   => true,
	  		'_builtin' => false
		));
		array_push($qv['post_type'],'post');
		return $qv;
}
add_filter('request', 'myfeed_request');

The explanation

Thats it! Done. This code checks to see if the query var ‘feed’ exists, if it does it also checks to see if the ‘post_type’ query var IS NOT set. If the post_type query var is set, this means we are on one of our regular custom post type pages, and we don’t want to modify the way the feeds are genereated, as wordpress handles them out of the box.

So, if we are on a “feed” page, and we don’t have a post_type query var set, we must be on the home page feed (in my case). So we modify the default feed by querying for all custom post types that are not built in, and that are public using the get_post_types() function. We then append the “post” post type to the end with array_push, because I wanted my main feed to include all my custom post type content, as well as my regular post content.

Now I have the structure: mydomain.com/feed/ Which houses all of my sites published content, and each custom post type has its respective feed at mydomain.com/custom-p-type/feed/

Thingabeauty.

« Older Entries