Why am I writing this post? Because if you have followed this blog for a while, you know I like not only passing what I’ve learned along to up and coming web developers, but I use this as a reference sometimes. I recently completed a freelance project that involved moving very large video files into a new WordPress install, and I came across multiple problems that were hard to find answers to. Adding video looks like it would be easy, right? Just click that little Upload/Insert button, drag/drop the file onto the page, and BAM! Video file is in the media library. What could POSSIBLY go wrong? I’ll start with the background to the project, and go over how I solved the issue.

Transfer a WordPress blog please!

It all started with an email from my website asking if I could transfer his WP blog from wordpress.com, to a self hosted WP install. The site’s main feature was the video clips on the site. If I couldn’t get the video over, then it was a no go. After some chatting, the client asked if I could honestly tell him if wordpress.com’s guided transfer was something he should look at, since it was cheaper than what I was charging. I told him that I have no idea, as I don’t know anyone that had paid for that. Blah, blah, blah….I got the job, and started transferring his blog over.

It always seems easy in the beginning

As it turns out, getting the data out of a WP.com hosted site is pretty damn easy. Under tools, they have a nifty little Export option, that will download an xml file for you. At that point, everything was going well. Wow, got the file, now how do I get it into a self hosted WP site? Simple, install the WordPress Importer plugin. It easily imports the data file into the new install! You click import, and then use the WordPress option. That is about as far as I got without any problems, because there is a checkbox asking if you want to import all of the media files attached to the data. Why the hell wouldn’t I want to do that? This seemed like a dream come true! I would be done with this little project in a couple of hours! So I checked the box and clicked import…

And the shit hit the fan.

What do you mean memory limit?

I kid you not, five seconds into the import and I got an error saying “Fatal error: Allowed memory size of …”. What? Google then tells me it is because the memory limit in the host’s php.ini file is set at 64Megs, all I have to do is ask my host to increase it. Soooo, I get the host (hostgator by the way – and they do indeed rock) to increase my limit temporarily after I explain what I was trying to do. THANK YOU! So they tell me, try again, which I do. Unfortunately this produces the same error. They then increase it to 300 and something for me, import again, and same error. At which point he asks me how large the video files are.

I didn’t really look, which was my fault. I did now though, and to my astonishment, the first file it is trying to import is a massive 687 megs. HOLY @#$%! That is huge. After a while, I realize this isn’t going to work. Quick thinking on my part, I say “Jeremy, why don’t we try using the file manager and upload them through the host itself?” Quick, yes. Stupid? Yes. I should have skipped this step, but don’t worry, I quickly found out why that was not going to work. Unfortunately it made me assume something that wasn’t true. The host’s file manager has a 500Mg single file limit, but I didn’t find that out until I had tried uploading the file though, which took about ten minutes.

Let’s look at a different approach

This is where I called the client and told him, this is probably not the best way to do video. Let’s look at hosting them on YouTube? WordPress has a very easy way of getting video from YouTube into a post. Looking into at first brought a smile to my face. YouTube’s limit for a single file is one gig. Awesome, none of the video is larger than that. Oh, but wait…how long are these videos minutes wise? See, YouTube limits it to 15 minutes. Some of these videos are over twenty. No good there, and after a brief conversation the client concludes that he doesn’t want to cut the videos up. Fine. Back to the drawing board.

Determination wins the day

At that point, I was up for trying anything. Enter FileZilla, which I should have done right from the start. I uploaded the videos into WordPress’ uploads folder, fully expecting it to die when it hit the 500 mark. To my astonishment though, it went through. All the way. Why? No idea. The host’s file manager has a limit, but using ftp didn’t. I was happy though because now I got the video up on the server.

I then login to WordPress, go to the media library, and….nothing is there. Shiznit. More searching with Google, and I find that there is a plugin called Add From Server. This little thing takes files you uploaded onto the server, and places them into the library for you. That was what I needed. I puts a nice little button in the Media tab that says Add From Server, and a list of all the files shows up when you click it. You then check all the boxes of the files you want in the library, and it moves them over for you. I was then free to insert them into the post at will!

Conclusion

Why was this so hard to figure out? Because apparently not many people have uploaded files this large into WordPress. I found tons on uploading 4Meg files, but nothing in the 500+ range. Google didn’t help me there. Large video files like that are not the best way of handling things, but I had to figure out how to do it. Doing that again would only take me a couple of hours total, but because I had never done it, and most others haven’t either made the process a bitch.

Wondering how the client got his files up on WP.com? Easy…he paid for an extension called Video Press that allows you to upload large video files into WordPress. Hell if I could find the same kind of thing though for a self hosted version.

So, if you need to do something like this follow this guideline:

• Import the WP data file with the WordPress Importer plugin
• Don’t transfer the media if you have large files like what I talked about. Won’t happen.
• Install the Add From Server Plugin
• Use FileZilla, or other ftp software to upload the video
• Use the Add From Server button in the Media tab to import the video into the Media Library
• Insert the video into the post

NOTE: If you use FileZilla, make sure you have the most up-to-date version. I originally tried with an older one I had installed and it truncated the files by a few thousand bytes or so. The files were then unusable. Once I updated FileZilla to the current version, this stopped happening.

Coupon Code: webmachine

It’s been a while since I’ve written a post (mostly because of life happening and a freelance project), and I thought I would get back into the swing of things by writing something on WordPress. I’ve been doing more work in it lately and have had the pleasure of seeing some cool things done by my manager. One of which is to get different menus, using WordPress’ Menu Manager, to display on different pages. For instance, you have a Services page that you want to display a services menu in the sidebar, and a portfolio page with a different menu. It is stuff like this, and the amount of support you can find on the web that makes me really like WordPress. Aside from it being relatively easy to theme.

Create your menus

This isn’t a tutorial on how to create menus using WordPress, so I am going to assume that you the reader already know how to do that. The menu manager is under Appearance>Menus, and there are probably plenty of other tutorials on how to do that. Once you have your menus set up, like mine are in the image below, you are just a step away from getting a specific menu to display on a specific page.

If and else come to the rescue

Really, there is not much to explain. The first line of the if/elseif tells WordPress what page to assign the menu, the second prints out a title for the menu, and the third tells it what menu to use. The else statement says, if the above conditions are not true, use this menu instead. All YOU have to do is place this code where you want the menu(s) to display, change the page, menu, and title names, and you are ready to go. Here is the code:

<?php
if (is_page(array('services-for-you'))) { //what page
	print("<h3>My Services</h3>"); //prints title
	wp_nav_menu('menu=services-menu'); //what menu
}
elseif (is_page(array('my-portfolio'))) {
	print("<h3>My Portfolio</h3>");
	wp_nav_menu('menu=portfolio-menu'); 
}
else {
	print("<h3>More Info</h3>");
	wp_nav_menu ('menu=info-menu');
}
?>

And that is all there is to it. You can obviously have as many ‘elseif’ statements in there as you want. Got any cool chunks of code that make WordPress do some cool stuff? Comment and let me know!

Coupon Code: webmachine

UPDATE 6/1/11: Added one line to the end of the second chunk of code (wp_reset_query). If you do not have this and place that block above the loop, the id does not get reset and will display the wrong content. Worked if after the loop, but probably a bad idea no to include it.

NOTE: Added one line of code to exlude this content block from search (‘exclude_from_search’ => true,).

There are plenty of ways to use WordPress as a CMS (content management system). There are different plugins that allow you to do it, like MultiEdit, but recently I have been working on building the new corporate site for work, and saw something that my manager did to make WordPress into a very powerful CMS. Normally I build sites in WordPress so that the client can make changes to the main content and widget areas themsevles. That doesn’t require any additional code or tinkering. But what if you need additional areas that the client has to be able to edit themselves as well?

In come “custom post types” to the rescue. I will show you how to easily do this to your own WordPress site, and it only takes a few minutes. I don’t know where my manager got the code for it, but I was impressed with how easy it is.

The functions page

You will need to open the functions page (functions.php) and add this code:

//This is the custom content block
function post_type_customContent() {
     register_post_type(
                     'customContent',
                     array('label' => __('Custom Content'),
                             'public' => true,
                             'show_ui' => true,
                             'exclude_from_search' => true,
                             'supports' => array(
                                                  'title',
                                                  'editor',
                                        'post-thumbnails',
                                        'custom-fields',
                                        'revisions')
                                )
                      );
     register_taxonomy_for_object_type('post_tag', 'customContent');
}
add_action('init', 'post_type_customContent');

Anywhere you see the word “customContent”, you may replace with whatever you want to call it. This just made sense to me, because that is exactly what I am doing. Where you see the words “Custom Content”, can be replaced with what you want the added section in the admin panel to be called. Once you have added that code and uploaded the file, you should see the additional section like the image below.

How do you get it to display?

First, you will see in the image, that under “Custom Content”, you have the option to “Add New.” By clicking new, you are adding a new post like you would for any regular post. But you need to be able to get it to display where you want it. Let’s say you have a small section in your header, that has text the client wants to be able to change. In the div, or whatever tag you want this to appear, you place this code:

<? query_posts('post_type=contentblock&page_id=22'); ?>
                <? if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <?php the_content(); ?>
                <? endwhile; endif; ?>
                <?php wp_reset_query(); ?>

Take special note of the “page_id=22″ because the number is what you have to change. After you have created the new content, publish it and get the id number by hitting the “Preview” button. You will see the number in the url that opens up. Put that number, where the ’22′ is in my example. Now anything that put in that new custom post will display in the desired spot.

Final Thoughts

This opens up WordPress to a whole new level. You can add as many different posts and place the second chunk of code wherever you want it (just changing the post id number when you do). WordPress goes from a blogging system with a small level of editable spots for main content or widgets, to one that is complete. I have absolutely no reason now to not use WordPress on any project.

Coupon Code: webmachine

My main site is static since I am the only one who works on it. Just didn’t seem to be any point to creating in it WordPress. That doesn’t mean though that I don’t want some things from my blog showing up on my home page. I wanted the recent blog posts showing up in my sidebar, and after a bunch of searching (wasn’t quick like I thought it would be) I ‘kind of’ found what I was looking for, but had to modify it. If you are looking to do the same kind of thing though, it is actually quite easy. There are two small chunks of code that you need: the first is to open the database connection that your blog is linked to, and the second is to actually display the posts.

You don’t even need to know PHP!

Indeed you don’t, that is how easy this is. The first part is to put this code at the top of your page:

<?php 
define('WP_USE_THEMES', false);
require('blog/wp-blog-header.php');
?>

The ‘wp-blog-header.php’ file is not to be confused with your ‘header.php’ file that you use to put all the…well, the header information in your blog. The file you are really looking for is going to be in the root of your WordPress installation, whose path is probably going to be like it is shown in the example code above. Obviously change it to what you need it to be if it is different.

Here is the second part, which you would place wherever you want the ‘recent posts’ to display (usually the sidebar or footer):

<ul>
<?php query_posts('showposts=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php echo "<li>"; echo "<span class=\"date\">" ; the_date(); echo "</span>" ; echo " - "; ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <?php echo "</li>";?>  	
<?php
endwhile;
?>
</ul>

The ‘ul’ I added because I wanted them to display in a list, so you of course do not have to add that. If you want to change the number of posts shown, it is pretty obvious which number to change (the ’3′ if you don’t). I then added ‘li’ tags around each one by echoing them out, and added a class of ‘date’ around the date code so I could target that seperately. Then you have the ‘a’ tag which wraps the title with the corresponding link, and the title code again to print out the actual title. And that is it! Pretty simple, but a very common thing web developers have to do. If you want to see it actually working, you can view it here, where I have a copy of my site redesign going.

With a little thought…

I have been told by some programmers that I work with, that the actual code that WordPress is built on is crap. If it is, I don’t care because of its ease of use. I don’t really know PHP, but by just looking at some sample code I can figure out how to do most of what I want in WP. This wasn’t that hard, I just didn’t like how deep I had to search to actually get what I wanted. I love the simplicity and ability to take this or that out of a WordPress site and stick it wherever you want. It is perfect for what I need to do. When I see stuff like this I think “Man, PHP doesn’t seem all that hard!” Of course I know this is example is really nothing. Besides, I’ve picked Ruby as my starting point so I can’t switch over. Maybe when I get that down, PHP will be a lot easier to understand. We shall see.

Coupon Code: webmachine

Yes I bought a theme, stop your yelling please, it is hurting my ears. I’ve bought WordPress themes from themeforest.net before, but it was to see how they did their admin panel. Worst idea ever, because they were obviously created by people who knew their PHP very well. So why in the name of all that is good, why I purchase a theme when I could very well have created a custom one that did the same thing for me? Time. I could have easily created something similar and more to my liking, but I had sent out an email to someone that responded back to send them a proposal. I wanted it to look good, and I wanted to have it out quickly so that the idea of redesigning her website didn’t leave her head.

If I had decided to create the theme myself, it might have taken me a couple of weeks because of how picky I am with my own designs. Designing for yourself, as you all know, is way different than designing for a client. By the title of this post, you know I purchased the WPBids theme, so let’s get on with the review.

Price

The damn thing costs $59! Ya, you read that right. This is a theme that thousands of others are going to be using, so why would anyone pay that amount? Because while the design is simple, it does exactly what you need it to do. Oh, and you can do it quickly. I figure that price is worth it because one project gained by it already covered the cost. It then became a no brainer.

Look and style

There are 4 different stylesheets to choose from: Teal (which I am using), Red, Black, and Blue. Red is ok but not great, and Blue is just plain bad. I did like the Black but some of the text was gray on top of the black, which made it very difficult to read. Teal had a more professional feel to it, and every thing was very clear.

This theme is built to do one thing: proposals. Don’t expect anything fancy, cause you won’t find it. No sliders, no crazy navigation – because there is really only one page for clients to see. It doesn’t need any of that anyway. Sure, you could spruce it up with whatever you want, but then you are taking away from what you are trying to do with it. I think in this regard, this theme is brilliiant. Get a nice looking online proposal to the client quickly – nothing more, nothing less.

The home page

There is a home page, but I would recommend what one of their videos say to do, which is make it private. Why? Because the home page is really for you. It is just a list of all the different proposals you have written up. You don’t want clients seeing what you are charging other clients, because that could cause some awkward situations. It is really easy to do this.

• Create a page called Home, and set it to the Root Template
• Go to your Settings and change the home page of the site to be that new page
• Go back to the Home page, and on the right side under Publish, click on Edit next to the Visibility option
• Set the visibility to private
• Go to Appearance – WPBids comes with its own options section there – and enter a url for the site to redirect to

After doing that, anyone who is not logged into the admin section, will be redirected to the url you entered if they try going to the home page. This is a must if you have multiple proposals.

The list on the home page also shows the url you will give to the client. I refuse to say URI by the way, its just a thing of mine.

The themes options

Besides being able to change stylesheets, there are a bunch of other options to edit. From what contact information to put in, adding a logo, what goes in the footer…stuff I would normally do manipulating a theme’s actual PHP files, but with this type of theme this is all you really need. I’m not sure what other options you would want other than what they give you, so I give them an A for this.

The proposal itself

The proposal is just a custom post type with a couple of additional fields. The title is what your are proposing to do for the client, but everything else works like a normal post. There are two fields added for the client’s name, and the company’s name. The main topic points that you would write about, like Goals and Objectives, you set to h2 tags, which all line up on the left. The content for each then lines up on the right. Very simple and quick. I like it.

Final thoughts

WPBids is a theme for exactly one purpose – sending out an online proposal. Would I use this for anything else? Hell no, but that is the point and why I think it will be successful, if it isn’t already. It isn’t meant for anything else. I bought it for the ease of use, the professional look, and quick deployment. If you do freelance work, I highly recommend buying this theme.

Coupon Code: webmachine

I used to think they were stupid, which is why I hard coded the sections pulling data for this blog. If you read my last post though, you will know I am building a theme for work and I had to use widgets. I gotta say, these things are handy. Now the client will be able to stick whatever he wants wherever he wants it. I did run into a problem though, which took me a while to solve.

I needed to get a widgetized sidebar onto a specific page, without showing up on any of the other pages. Luckily it was the blog page, which uses the index.php file within your theme folder, and not something where I would have to create a custom page for. I started the theme off of ‘TwentyTen’, and pretty much deleted all the content in all the theme files, meaning all I had left was the php that calls the header, footer, and sidebar. The function file remained the same other than adding the code to call jQuery from Google’s server, and renaming all the function names from ‘twentyten’ to ‘mythemename’ (not posting what it was really called, because it is irrelevant).

The functions page

You only need to do a few things, the first of which is to register the sidebars. Place the following code within your functions page (I dropped it all the way at the bottom):

if ( function_exists('register_sidebar') )
register_sidebar(array(
		'name' => __( 'Blog Widget Area', 'intmedreps' ),
		'id' => 'first-blog-widget-area',
		'description' => __( 'The first blog widget area', 'intmedreps' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Create a new php file

Pay attention to the id, because you will need that. Create a new php file, and call it ‘sidebar-whatever.php’. I called mine -blog.php because that is what it relates to. Within that new file, paste this code:

<div id="firstBlog" class="widget-area" role="complementary">
			<ul class="xoxo">
 
<?php
	/* When we call the dynamic_sidebar() function, it'll spit out
	 * the widgets for that widget area. If it instead returns false,
	 * then the sidebar simply doesn't exist, so we'll hard-code in
	 * some default sidebar stuff just in case.
	 */
	if ( ! dynamic_sidebar( 'first-blog-widget-area' ) ) : ?>
 
			<li id="search" class="widget-container widget_search">
				<?php get_search_form(); ?>
			</li>
 
			<li id="archives" class="widget-container">
				<h3 class="widget-title"><?php _e( 'Archives', 'intmedreps' ); ?></h3>
				<ul>
					<?php wp_get_archives( 'type=monthly' ); ?>
				</ul>
			</li>
 
			<li id="meta" class="widget-container">
				<h3 class="widget-title"><?php _e( 'Meta', 'intmedreps' ); ?></h3>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<?php wp_meta(); ?>
				</ul>
			</li>
 
		<?php endif; // end first blog widget area ?>
			</ul>
		</div><!-- #firstBlog .widget-area -->

Copy the id of the sidebar you registered in the functions.php page, and paste over the ‘first-blog-widget-area’ in the above code. Change the initial div id from ‘firstBlog’ to whatever you want it to be., then look at the comments on the bottom of the page and change those to whatever you want. The code above have the words ‘first blog’ in them, but they relate to your sidebar.

Where do you want it?

Last item to take care of. Open the file that pertains to the page you want to add the new sidebar to. Mine was the blog page, so index.php, but you might be adding a sidebar to a custom page, or the default pages of the blog…whatever it is, I can’t help you there, because I don’t know what page you will be affecting. What you will have to do is paste this code where you want the new sidebar to appear:

<?php include (TEMPLATEPATH . '/sidebar-blog.php'); ?>

Change the -blog.php to whatever you called the new sidebar page. That is it!

Conclusion

Main thing to remember is to remember what you are calling things, and change them in the appropriate places. Once you have that all finished, the new sidebar will only appear on the page(s) you placed the last bit of code on. In your admin section you will have a new sidebar ready to be widgetized. See below for how it will appear, which in reality, is no different than the other widget sections, it will just have your new name. You can easily add more sidebar areas by repeating this process, and adding them to whatever sidebar file you want.

Once I figured out how to do this, I am no longer afraid of adding widgetized sidebars to my themes. If you have any problems, let me know and I’ll help you work through it.

Coupon Code: webmachine

$('.allRed:header').css('font-weight', 'normal');

Today I was going to write about an awesome plugin a coworker found and is using, which I tried out. The problem is, that it didn’t work for me, but I don’t believe it is the plugin’s fault. We deal with a lot of custom things at my work place, and I believe something could have been interfering with it. Not sure though. I did see it in action though and it worked incredibly well for him. It’s called Page.ly MultiEdit and works with 2.9 and higher.

Ever need multiple places for a customer to be able to edit, that uses the same editor for posts and such? With this plugin it really makes WordPress a great CMS for regular sites, not just blogs. Not that it wasn’t before, this just makes it easier. To see screens, and instructions, visit there site. It was easy to install, and place the code, I just don’t think the environment I am working in played well with it. I’ll have to test it out in the project theme I am building.

It’s a learning process

So while I am building this theme, which is my first real jump into 3.0, I got to see the differences under the hood. The new navigation editor is actually really well done. Very simple to use, and get running on your site. The only problem, and this might or might not be for you, is that the drop down part of the menu, does not work in IE6. Did some searching, and found that with some scripts you actually can get it to work, but I didn’t feel the need for it, and I’m going to be using jQuery to display a full nav else where if the it detects IE6 as the browser being used. Other than that, it works great.

I am also working with widgets for the first time. I’ve used them once before, but on my blog here, I used other code to get what I wanted to display. The widgets seem a lot easier to use than before, but I could be wrong. If you start with the TwentyTen theme as a base, then you have a ton of widgetized sections to work with. There are two in the sidebar, and four in the footer. There is base code in the theme that displays things like Blogrolls, Categories and other such things if there are not any widgets being used. This might have been available in earlier versions, but again, I always used other code for that.

I learned a lot today by building through some of this theme, on what makes a good theme to be able to sell. Such as, if you haven’t widgetized your theme, it is probably not going to work well with someone’s site that is. I feel much better now to be able to create a WordPress theme for sale knowing how this works. Very easy to create more widget spots, too, if you need them.

One thing to note is that I upgraded to 3.0.1 from 2.7 code, and it worked well. All I did was turn off the plugins, delete the wp-admin and wp-includes directories (go and actually read the instructions, don’t follow what I am saying here, because I don’t know your setup), upload all the new files, re-activate the plugins, and everything was fine. I am now not so paranoid with upgrading The Web Machine to 3.0.1, since I am at 2.9.2.

Holy great amounts of CSS Batman!

Ok, so it is now using Eric Meyer’s CSS reset, which is good, but dear lord the TwentyTen CSS file just seems bloated as hell. I believe next time I am going to dump a ton of it and go from there. I saw a bunch of stuff that made it obvious IE6 wouldn’t be happy, like the ‘>’ selector and the :hover pseudo class being used on elements other than ‘a’ tags. If someone would care to explain why I would do this:

ul li > a {
color: #ffffff;
}

Over this:

ul li a {
color: #ffffff;
}

That would be great. I’m just not sure when you would use one over the other.

All in all, I am very impressed

It is a slow process right now, because I’m learning a little while I go, but overall I would highly recommend 3.0.1 to anyone. Seems tighter, and a little easier to read. Oh, and the TwentyTen theme is commented really well, so changing it up to a custom theme is easy. Not that I don’t know what I am doing, but there is some stuff I have to do in this site, that I am not sure how to accomplish.

Anyone have any experience with 3.0? Let’s hear how you like it!

Coupon Code: webmachine

$('ul ~ p').addClass('blueHighlight);

I wanted to create images that I could use for each post showing that it belonged to a certain type of category. You look at the image, and without reading the title, you would say “Oh, this post relates to WordPress.” Same with jQuery, Blogging in general, or whatever category I come up with. Something my readers would come to recognize over time. I also wanted to be able to do it without having to stick it in manually in the post like I do with the other images I stick in articles. If you are on the home page you will already see this. That is the one I came up with for articles relating to WordPress.

Now, I can’t take credit for what I am about to show you. I learned how to do this fromJustin Tadlock’s blog, but I wanted to spread the love. This was the best tutorial I found on the subject.

Just 10 Easy Steps!

Here is my quick and dirty paraphrasing of it. Meaning, do EXACTLY AS IT SAYS BELOW.

1) Create awesome post.
2) Scroll down in post editor, under Custom Fields, create a Key named “Thumbnail.”
3) The Value should be the url to the image: (Example: wp-content/themes/yourThemeName/images/imageName.jpg)

NOTE: It took me a while to understand where it was pulling the images from – images folder in your theme. I was trying to get it to load from somewhere outside the theme. I’m sure you can, but this was easier.

4) Click Add Custom Field. Ya! Part 1 is done.
5) Add another, by clicking Enter New. This time make the Key be Thumbnail Class
6) Make the Value thumbnail-class
7) Open the template you want the image to show on (index.php, single.php, category.php, archive.php, etc.)
8- Find this code:

if(have_posts()) : while(have_posts()) : the_post();

Post the following code directly AFTER it:

$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);

9) Find this code:

<?php the_content();  ?>
//OR THIS CODE, EITHER ONE
<?php the_excerpt();  ?>

And add this code BEFORE it:

<?php // if there's a thumbnail
if($thumb !== '') { ?>
	<img src="<?php echo $thumb; ?>"
	class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>"
	alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"
	/>
<?php } // end if statement
// if there's not a thumbnail
else { echo ''; } ?>

NOTE ADDED 7/30/10: If you read this post previously, I wrote a note here originally that was pretty much me being stupid.

10) Open your CSS file and add this class:

.thumbnail-class {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 15px 0 0;
	}

Done. Of course, you still have to create the images though. Note the size of the image is actually controlled through the CSS. Meaning, even if the image you created is 300 by 300, whatever you put in the css is what it will display at. You can also call the class, and Key names whatever you wish, just be sure to change them in the php code as well.

For a more detailed explanation, you will want to read the article I linked to above. I searched for quite a while before I found his tutorial and it rocks. I just had to read more to accomplish it. He also gives hints on what else you can do with it. Very good read though.

Compass’ inline image function

I am not recommending you do this, I am just showing you how. Let’s say you have a bunch of sprites, they are all small, and you don’t want the extra http requests on your website. Pretty understandable, which is why I use minify on my main site for the css and javascript files. Compass has a built in function that lets you actually embed an image into the CSS file. “Holy HELL! That’s insane!” That is what your head is screaming at the screen, right? That is what I said too when I saw it. I wish I could remember where, but I forgot to paste the url in my Evernote…just the code.

In your .sass file (yes Sass…I highly recommend it),you make a style like so:

.mySprite
  background-image: inline-image("images/mySprite.png") /* ! */
  height: 35px
  width: 35px

Compass then embeds the image into the CSS file. You can obviously think ahead on why this could be bad if you do this a lot. You are adding weight to the actual CSS file. Which of course this is why you would only do it with some small file size sprites. I can see this being good for small sites, but probably not anything of substantial size. Just use your head before you actually use this.

NOTE ABOUT THIS TRICK: IE6 and 7 do NOT support this. You will have to include the style the normal way for those browsers, if you are supporting them.

Last thoughts

Hope you learned something! I know I did today, which is what I strive for every day. If you are using Custom Fields for WordPress, I would love to know about how you are using them, and the code for doing it! Share the love people!

Coupon Code: webmachine

$('.myClass').after('<p>Even more content to read!</p>');

Let’s start with the most important:

Akismet - If you are NOT using this plugin, you are…not…smart. That is the least insulting I can be with that. This thing has caught more spam than you can imagine. I mean a LOT. 488 spam comments to be exact. I’m talking viagra, porn, random crazy…you name it, it has caught it.

WP-Spam Free – Along the same lines as the above. Guess how many this one has caught? 511 as of this post. Insane right? I highly recommend these two more than you can know.

Login LockDown – This is a security plugin. Two things: if you login with admin as the username…you are again, an idiot. Create a new admin account with a different user name, then delete that one. Google it for more info. This plugin adds another step of security. It restricts the number of failed logins that can be attempted from a given IP range. Mine is set very low. I’m paranoid about this kind of thing, but I recommend it.

Feed Statistics – This one just tells me how many rss subscribers I have, among some other stats (31 if you are interested).

Google XML Sitemaps – Creates an XML sitemap that helps search engines.

Light SEO – Says it all, SEO plugin.

TweetMeme Retweet Button – This creates the green retweet button on each of my posts. Not really doing much at the moment, but it might later.

WordPress Database Backup – I am at a point now, where I have a lot of data on this blog that I do not want to ever lose. This lets me perform timely backups, that can be emailed to you, downloaded, or stored on your server. I chose download, cause I don’t want that stuff just sitting on my server.

(Just stupid note…watching Deadliest Catch…sad that the one captain is dead)

WP-Syntax and WP-Syntax Colorizer – These allow me to drop in code to show you stuff, and to change the style colors of it. It is a bit tricky to set the styles, and a couple of them I couldn’t figure out. But awesome plugins none the less.

That is all of mine. I try not to add frivolous plugins. I don’t want it cluttered up. If it isn’t of any real use, then I don’t want it. There are literally thousands out there, and I am very curious what everyone else is using. Post what you have, and lets see if there isn’t something out there I’m missing.

Coupon Code: webmachine

$('.killerClassName').slideToggle(2000);

BAD IDEA. REALLY, REALLY BAD.

Because when i logged in, instead of going to dashboard, I got redirected to a completely blank page. This has happened to others apparently. I renamed my theme so it would it would load the default one. That worked, so I knew it was within the Web Machine theme. Then uploaded my old copy of the functions page, with the original formatting, and bam everything was fixed. But how do you know it was not something you coded? Because all I changed was a number, and after I figured out the formatting thing, I again changed the number and it was fixed. Scared the hell out of me though.