Directory Permissions

Set premissions on all directories to 755.

find path/to/wordpress/ -type d -print -exec chmod 755 {} \;

File Permissions

Set permissions on all files to 644.

find path/to/wordpress/ -type f -print -exec chmod 644 {} \;

The following is my personal collection of useful SQL queries & references for moving WordPress.

WordPress Address (URL) & Site Address (URL)

Use the following SQL query to change the Site URL and Home URL in the wp_options table.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.old-domain.com', 'http://www.new-domain.com') WHERE option_name = 'home' OR option_name = 'siteurl';

GUID

Use at your own risk! Please read this before executing the following query.

UPDATE wp_posts SET guid = replace(guid, 'http://www.old-domain.com','http://www.new-domain.com');

wp_posts

This query will fix all the internal links in the wp_posts table.

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.old-domain.com', 'http://www.new-domain.com');

References

These articles in the WordPress Codex are also quite useful:

• http://codex.wordpress.org/Changing_The_Site_URL
• http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory
• http://codex.wordpress.org/Moving_WordPress

<?php
/* ===============================================
  Add page name classes to body_class function
=============================================== */
add_filter('body_class','page_class');
function page_class($classes) {
	global $wp_query;
	$page = '';
	$page = $wp_query->query_vars['pagename'];
	// add 'pagename' to the $classes array
	$classes[] = $page;
	// return the $classes array
	return $classes;
}
?>

Step 1: Permalink Settings

The first thing we need to do is make sure our permalinks are set to anything other than the default settings. Our pagination will not function properly with the default WordPress permalink structure. Resetting our permalink structure is easy. Login to your WordPress administration panel and navigate to settings->permalinks. Below is a screenshot of the permalink structure I prefer to use, but feel free to use any of the preset options available. Make sure you save your changes and we’re ready to get started paginating our blog.

Step 2: The Code

In order to keep our theme folder nice and tidy, we’re going to create a new folder called ‘includes’ inside our TwentyTen theme folder. Inside our ‘includes’ folder, we’re going to create a new file and name it ‘pagination.php’.

The following code was taken directly from the WordPress codex here. Simply copy and paste the code below into your new ‘pagination.php’ file.

<?php 
global $wp_rewrite;			
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;

$pagination = array(
	'base' => @add_query_arg('page','%#%'),
	'format' => '',
	'total' => $wp_query->max_num_pages,
	'current' => $current,
	'show_all' => false,
	'type' => 'plain',
	);

if( $wp_rewrite->using_permalinks() )
	$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg('s',get_pagenum_link(1) ) ) . 'page/%#%/', 'paged');

if( !empty($wp_query->query_vars['s']) )
	$pagination['add_args'] = array('s'=>get_query_var('s'));

echo '<div class="pagination">' . paginate_links($pagination) . '</div>'; 		
?>

Step 3: Paginate It!

Open up ‘loop.php’ in your TwentyTen themes folder and locate the following code around line 24.

<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '← Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts →', 'twentyten' ) ); ?></div>
</div>
<?php endif; ?>

Replace it with this.

<?php get_template_part('includes/pagination'); ?>

Find the following code in ‘loop.php’ around line 172.

<?php if (  $wp_query->max_num_pages > 1 ) : ?>
	<div id="nav-below" class="navigation">
		<div class="nav-previous"><?php next_posts_link( __( '← Older posts', 'twentyten' ) ); ?></div>
		<div class="nav-next"><?php previous_posts_link( __( 'Newer posts →', 'twentyten' ) ); ?></div>
	</div>
<?php endif; ?>

Replace it with this.

<?php get_template_part ('includes/pagination'); ?>

Step 4: CSS

Here’s a little basic CSS to make our page numbers look a little more like buttons.

div.pagination {
	margin-bottom: 30px;
}

div.pagination span, div.pagination a {
	font-size: 14px;
	padding: 7px 11px;
	background: #f9f9f9;
	border: 1px solid #ccc;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

div.pagination a {
	color: #888;
	text-decoration: none;
}

div.pagination a:hover {
	color: #333;
	border-color: #c0c0c0;
}

Use the following code on any page and/or sidebar to display a single random post anywhere on your site.

<?php 
$my_query = new WP_Query('posts_per_page=1&orderby=rand');
while ($my_query->have_posts()) : $my_query->the_post(); 
?>		

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>

<?php endwhile; wp_reset_postdata(); ?>

As always, with WordPress there are multiple solutions to almost every problem. If you have an alternative solution to using WP_Query, please feel free to share.

New versions of WordPress are released so frequently that the update reminder can become a bit of a nuisance lingering at the top of your administration panel. In order to completely hide the update notice, just add the following to functions.php:

<?php
function hide_update_notice() {
    remove_action( 'admin_notices', 'update_nag', 3 );
}
add_action( 'admin_notices', 'hide_update_notice', 1 );
?>

Below is the code to prevent everyone but the administrator of the site from seeing the update notice.

<?php
function hide_update_notice() {
    global $user_login , $user_email;
    get_currentuserinfo();
    if ($user_login != "admin") {
        remove_action( 'admin_notices', 'update_nag', 3 );
    }
}
add_action( 'admin_notices', 'hide_update_notice', 1 );
?>

This is simply a brief overview of the HTML5 video tag and the first of several articles that I intend to post as I begin learning and experimenting with HTML5. It’s been a while since my post, “Why I Decided to Abandon Flash and Focus On HTML5, CSS, and JavaScript“, and I’ve been itching for a chance play around with the HTML5 video and audio tags. So, let’s get started…

First, let’s take a look at the HTML5 video tag:

<video></video>

It just couldn’t be any sweeter! As simple as it is, we still need to add some guts in order to get it to work. First we need to add the playback controls to our video player. This is as simple as adding the word ‘controls’ inside our opening video tag. The great thing about HTML5 video is that the browser handles all the functionality and display of the controls behind the scenes. Just be aware that each browser handles the controls a bit differently. For example, a fullscreen button is available directly in the player controls in Safari, whereas in Firefox, the user must right-click to bring up the fullscreen option.

<video controls></video>

Next we need to specify the source of the video we would like to display. Currently, HTML5 supports three video types, mp4, webm, and ogg. Since the majority of video on the web is found in the flv format, you will most likely need to convert your flv video to mp4, webm, and ogv. A number of video conversion tools can be found on the web. Personally, I like to use the Miro Video Converter. It’s free, super easy to use, and can convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and more.

In order to ensure that our video is accessible in all major browsers, we need to include the source to mp4, webm, and ogg formats. Here is the final code with a custom fallback message that will display if the user’s browser does not support HTML5 video:

<video controls>
    <source src="http://video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="http://video.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="http://video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

I have tested the previous code in the latest versions of Firefox, Safari, Chrome and Opera, as well as on the iPhone and iPad. In my next post, I will explore how we can customize our HTML5 video player with a little CSS and javascript.

It all started for me with Steve Jobs holding up the new iPad for the first time and seeing that little leggo-like icon we all know so well. What…no Flash? I was attending the Art Institute of Pittsburgh at the time and had just finished up a project in which I built my first custom Flash player. I had fallen in love with the smooth, seamless video, audio, and animation capabilities of Flash and had really begun to dive head first into ActionScript 3.0. After working with Flash for only a short time, it became abundantly clear that this was entire field in and of itself. It was time to make a decision. Either totally immerse myself in a potentially dead language or find another direction. With the unveiling of the iPad, a question came to me that stopped me dead in my tracks. Why no Flash?

And so, for the time being, I decided to put Flash on the shelf until I could come to a more informed decision. At first, I was a little put off by Apple’s decision not to embrace the Flash player on their new devices, but Steve Job’s reputation for being ahead of the curve forced me take another look. After some obsessive Googling and pouring over the onslaught of tweets on the subject, I put my decision on the back burner and started focusing on my bread and butter…PHP and JQuery. I could always come back to Flash later, right?

Back to the big question, “Why no Flash?” With my tendency to not believe everything I read on the web, I began to come to my own fanatical conclusions:

1. Apple has become an evil corporation. Evident by it’s announcement that they will no longer be attending the annual MacWorld event.
2. Apple has decided to take on Adobe and monopolize the creative software market.
3. Apple is unwilling to yield in some sort of corporate power struggle between itself and Adobe.

These conclusions are obviously not facts, but I think there is some validity in all three. Well, maybe with the exception of the “evil corporation” bit. Actually, I think the reality is more to the contrary. Adobe has complete proprietary control of all of it’s software. Whereas, Apple has decided to embrace open-source technology and web standards. All evidence points to Apple, once again, positioning itself one step ahead of the competition. The open-source movement has driven the industry to heights that it never would have been able to achieve otherwise. In my humble opinion, Apple seems to be playing off of exactly that. On the other hand, there is a valid argument that Apple is merely throwing around terms like “open-source” and “web standards” to lure in developers, only for them to later find themselves so deeply invested in Apple’s platform that they can’t get out. If you’ve ever tried to develop an iPhone app, then you will surely know that you can develop all you want for free, but when it comes to selling it, you have to pay the piper (Apple). That doesn’t really seem all that “open-source” to me (hence the “evil corporation” bit).

As for Apple’s plan to monopolize the creative software market. Well, I have a sneaking suspicion that this is exactly what they plan to do…at least on the mac platform. Apple adding “curves” to Aperature seemed like a dead giveaway to me. Whether or not they will actually succeed is another story. By no means do I intend to give up my Adobe Creative Suite, but in terms of delivering video and animation on the web, I think that Flash may have seen it’s day.

And to address my third fanatical conclusion, concerning some sort of cooperate power struggle going on between Apple and Adobe. Well, let me remind you of my disclaimer at the beginning of this article. Whether or not there is any validity to it at all is beyond me, but you never know…

Okay, so what’s the point of all this? That’s right, I was trying to decide whether or not to abandon Flash and move onto other things. Obviously, it’s been many months since the release of the iPad, and I hadn’t really given the whole Flash question a lot of thought until yesterday. On a late night whim, I decided to play around with the new HTML5 video tag. All I have to say is, “Freakin’ awesome!” I’m well aware that HTML5 video is not fully supported by all browser versions. But it is supported by the LATEST VERSION of ALL browsers, even IE9. It even works on the iPhone and iPad. Again, all i have to say is, “Freakin’ awesome!” And so, with a little HTML5, CSS, and JavaScript, who needs Flash anyway? I would much rather play the waiting game with HTML5 than waste my time learning a dead language.

Here is the closing quote from Steve Jobs’ post, “Thoughts On Flash”:

“New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”

I look forward to any feedback, criticisms, whatever…Cheers!

Just add the following code to your wp-config.php file:

/** Disable theme and plugin editors. */
define('DISALLOW_FILE_EDIT',true);