How to Upgrade WordPress

April 29th, 2008

Upgrading WordPress can be a little daunting, but it’s really not that hard. Here are the steps, broken down, with a video at the end showing you a WordPress upgrade in action. Please read all the steps first and then watch the video, as you will probably get more out of the video that way. :)

  1. Step 1: Backup your Blog. This is without a doubt the most important step. If you have a good backup, then you’re safe even if you totally mess things up. Do not skip this step, really. Here is a whole post showing how to use a plugin to backup your whole blog automatically. Make sure you’ve completed a backup and downloaded the backup before you proceed.
  2. Step 2: Deactivate all your Plugins. Just go to “Plugins” in your WP Admin area and click to deactivate all your plugins. Newer versions of WP allow you to deactivate them all with one click. You may want to make a mental note of which plugins were activated so that you can reactivate the right ones.
  3. Step 3: Delete Old WordPress Core Files. Next, using an FTP program, delete all your old WordPress core files. (A core file is everything WordPress uses to run itelf, excepting theme, plugin, and uploaded files.) Using your FTP program, navigate to the folder where WordPress is installed: often public_html/blog (or just public_html if your blog is the only thing on your website). When you are deleting files, DO NOT DELETE TWO THINGS. First, do not delete the file named “wp-config.php.” This file contains the information for connecting to your database. Second, do not delete the entire folder named “wp-content.” This folder contains your themes, plugins, and uploaded images.
  4. Step 4: Get the Newest Version of WordPress. Go to this page, the WordPress download page, and download the newest version of WordPress.
  5. Step 5: Dummy-Proof Yourself. Once you’ve got your new zipped file with the latest version of WordPress, unzip it and dig around inside it until you find the “wp-content” folder. Since we left our copy of this on the server in step 3, we want to delete this folder so that we don’t upload and accidentally overwrite our themes, plugins, and uploaded pictures. Delete the folder. You can also delete the file “wp-config-sample.php” if you want, although it is not necessary. But do delete the “wp-content” folder.
  6. Step 6: Upload the New Version. Next, we’re going to use our FTP program to upload the new version to our server. To do this, grab all the file and folders INSIDE the unzipped WordPress folder (which now should be missing the “wp-content” folder) and upload them into the main directory where your blog lives on your server. DO NOT upload the whole folder you downloaded from WordPress, called “wordpress.” You want to upload the files inside of that folder into the same directory where your blog is installed on your server. For a lot of people, if your web address is “http://www.myphotosite.com/blog/” that will be inside a folder called “blog” which is inside a folder called “public_html” or “www”. If your blog is your whole website, with an address something like “http://www.myphotoblog.com” then these file need to be uploaded into your “public_html” or “www” folder. Sometimes these names aren’t the same for everyone, so yours may be slightly different. Uploading can take a few minutes, so be patient. There are lots of little files to upload.
  7. Step 7: Upgrade your Database. Most, but not all, WordPress upgrades also do a little tweaking of your database. To upgrade your database, all you have to do is try to login to your blog after completing steps 1-6. If a database upgrade is required, you will be prompted to click a link saying its ok to upgrade. Go ahead and click to let it upgrade, safe in the confidence that even if something went terribly wrong, you have already backed up your database. When it finishes, you’re all set, except for…
  8. Step 8: Reactivate your Plugins. This is basically just step 2 in reverse. Just go to “Plugins” and reactivate the ones you were using. You may need to re-set some of the settings in your plugins, it is possible your settings were lost during upgrade. NOTE: if your comments don’t seem to be working after you upgrade, make sure you have reactivated the Ajaxed-WordPress plugin and retweaked it. Directions can be found here.

That’s basically it. Now, watch this video to see me do all the steps above, and give it a go!

NOTE: if you’re upgrading from WP 2.3.3 or lower to 2.5.x or higher, you may have to follow the directions here to fix a little bug with a new max picture width setting in WP 2.5.x.

Other helpful resources: Using a FTP program, Understanding Folders and Directories, Backing up Your Blog, Max picture width problem.

Backing up your blog

April 28th, 2008

Backing up your blog is an incredibly important thing to do. You don’t want to ever experience losing your data due to a web host server failure. Some higher-end web hosts automatically backup all your data, but most do not.

Also, if you are ever going to upgrade your version of WordPress, it is very important to backup your database and all your files first. That way you can proceed with upgrading with the peace of mind that even if you royally screw the pooch, you can always restore your blog to it’s previous state.

Luckily, as with many things WordPress, there is a plugin that basically will handle this for you. BackupWordPress is a pretty sweet plugin that automatically backs up your WP database, uploaded pictures, config-file, and all your files. It even will do regular, automatic backups and email you the zipped files of the backups.

The following video shows how to use this powerful plugin.

Download the plugin right here.

Related Posts: How to upload and install a Plugin and Upgrading WordPress

Questions? Instead of emailing for support, please leave your questions in the comments so that others can benefit from the clarification. Thanks!

WordPress 2.5.1 has been released

April 25th, 2008

Hey all, you’ll probably start noticing soon that your WordPress blog may start telling you that  there is a new version of WordPress and that you should upgrade.  WordPress just released version 2.5.1.

2.5.1 should fix a bunch of bugs with 2.5, so if you have version 2.5, this will hopefully fix a couple issues, in particular problems with the image uploader.  If you’re still running version 2.3.2 or 2.3.3, then I think this is the version you want to jump on and ugrade to.  2.5 was a major release and was kind of buggy, and this 2.5.1 version is basically the same release just with a bunch of bugs corrected.  

HINT:  you can find out which version of WordPress you’re running by scrolling down to the footer of your WordPress admin pages.

So, now that I’m finally telling everyone to upgrade, I do want to tell you to wait just a few more days before upgrading.  Why?

Because, starting this Monday, April 28, I’m going to start posting a bunch of videos and tutorials designed to show you how to safely upgrade WordPress.  I’m going to start with a video on how to backup your database and entire blog, so in case you screw something up, you can be confident you won’t lose anything.  Then, I’m going to have a detailed video tutorial on how to upgrade to the new version.

Why not just post it all today?  Well, frankly, I’m on vacation and I don’t feel like it.  But I’ll do it Monday. ;)

If you’re a WordPress power user, then just go ahead and upgrade.  Otherwise, wait a few days and I’ll have a lot of information here.

Related posts:  Info about WordPress 2.5 and upgrading, Bugs in WordPress version 2.5

Have a random bio image displayed each time your blog is viewed

April 24th, 2008

One cool feature on some blogs is having a random bio picture display each time you refresh or load your blogs home page. Examples are: my wife’s blog, and spencer’s blog. (I coded my wife’s, but Spencer did his own.) Refresh the pages to see the new bio pictures load. In the past I’ve always accomplished this using a bit of moderately complex (to a non-developer) external javascript.

Yesterday I was working on coding something like this up again and thought of a way that was much simpler than writing some javascript, so simple in fact that I figured with a short tutorial, any of you could pull it off yourselves. So here goes.

First, in your WP Admin area, go to “Design” (”Presentation” in old WP versions) –> “Theme Editor” and select the file called “bio.php”.

Then, on the the line that says:

<img src="<?php bloginfo('template_directory') ?>/images/biopic.jpg" width="215" height="312" id="biopic" />

Insert your curser right between “biopic” and “.jpg” and add in this text:

<?php echo(rand(1,5)); ?>

So that the line now looks exactly like this:

<img src="<?php bloginfo('template_directory') ?>/images/biopic<?php echo(rand(1,5)); ?>.jpg" width="215" height="312" id="biopic" />

Then, all you need to do is use a file manager or FTP program to upload 5 bio pictures with the exact same dimensions (312px tall by 215px wide) into your “prophoto/images” folder. The path to that folder is this: yourblogdirectory/wp-content/themes/prophoto/images.

Name them (THIS IS IMPORTANT!) exactly biopic1.jpg, biopic2.jpg, biopic3.jpg, biopic4.jpg, and biopic5.jpg. You probably already had an image uploaded called “biopic.jpg”. This image will no longer be used if you are randomizing them according to these instructions. To continue to use that image as one of your random images, you’ll need to rename it biopic1.jpg or one of the other numbered names.

If you want more or less than 5 images, you can upload more or less, but start with “biopic1.jpg” and move up sequentially from there. If you are using a number of images other than 5, then you will also need to edit the second number of the code you inserted earlier so that it says

<?php echo(rand(1,7)); ?>

…if you want 7 images, or the second number can be whatever number you want.

A little fuzzy on how to upload images into the right folder using a file manager or FTP program? Check out:

Tutorial on using a File Manager Utility

Tutorial on using an FTP program

If you’re having any trouble getting this to work, put your question in the comments instead of emailing for support. Hope this was helpful!

FAQ: Can I change the background color of just the top header area?

April 23rd, 2008

If you want to change the background color of just the top header area, so it looks something like this:

You can pull it off by adding one line to your stylesheet. Open up your stylesheet by going to “Design” (”Presentation” in old versions of WP) –> “Theme Editor” and selecting “Stylesheet (style.css)”. Scroll down to line 158, which looks like this:

#header {
    height: 108px; /*height of header: logo & top links - see 5 lines below*/
}

Add a line in like so and change the color code to whatever you want it to be.

#header {
    height: 108px; /*height of header: logo & top links - see 5 lines below*/
    background: #ff9900;
}

Click “update file” to save your changes, visit your blog and force your browser to refresh to see your changes.

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

FAQ: My comments don’t seem to be working, people can’t leave comments

April 22nd, 2008

I get lots of emails that basically say this:  my comments aren’t working, people can’t leave comments unless they visit the single-page permalink for the post.  If you’re having this problem, your comment area probably looks like this:

You can see how many comments there are, but there are no links to add a comment or show comments, just a lonely pipe line-thingy floating out in the breeze.

Fixing this is super simple.  It is caused by skipping a step in the installation.  This is what happens when you forget to activate and tweak the Ajaxed-Wordpress plugin which allows for the inline comments on the main pages.

To fix it, go back to this section of the tutorials, watch the video and carefully follow the instructions and your comments will work just fine.

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

Site & email down yesterday

April 22nd, 2008

Hey all, my server was down for most of yesterday.  Sorry for the inconvenience.  I know some of you were trying to use the tutorials.  Also, I didn’t receive emails almost the entire day, and it is probable that some emails were lost.  So, if you emailed me yesterday, I probably didn’t get it.  Send it again, and I’ll get back to you asap.  Sorry!

Jared

Firebug tutorial video

April 21st, 2008

Firebug is a free extension for the Firefox web browser that allows you to inspect, edit, analyze, and debug any website. It has a truly awesome set of features that includes:

  1. mouse over page elements to visualize invisible attributes like height, width, padding, and margins
  2. inspect html, css, javascript for any element
  3. edit css, html and view changes in real time
  4. find height and width of any element
  5. turn off and on individual CSS styles to see the effects
  6. find exact line numbers and names of stylesheets referenced by CSS
  7. lots, lots more

Every single web developer I know uses firebug on a daily or near daily basis. Whenever I get an email from one of you asking why this part or that part of your blog looks funny, I almost always turn on Firebug to quickly determine what the issue is, and usually can test a fix without ever leaving Firebug.

But Firebug is also great for non-developers who like to hack at their code. If you’re just trying to make a few small changes and don’t know much about HTML or CSS, Firebug can be a lifesaver. It allows you to try out all sorts of little changes to your websites code, without actually making those changes. If you get things working in firebug, you can just go and edit the actual files in the same way.

A lot of photographers do tinker with their own websites, and I think that very very few of them know about this invaluable tool. I made the following tutorial video to help you get a quick overview of the basics of installing and using Firebug. Let me know if this was helpful!


How to center your post-titles

April 19th, 2008

Someone just emailed me and asked how she would center her post-titles. I thought it was a good question, so I’m sharing the answer with all of you.

If you want to center your post-titles and post-dates, so they look like this:

Just open up your “Stylesheet (style.css)” with your Theme Editor (under the Design tab) and add a line at the bottom and paste in this code:

h2.entry-title, h3.entry-title, div.entry-date { /* center post titles & dates */
text-align:center;
}

If you only want the title centered and not the date, change it to this:

h2.entry-title, h3.entry-title { /* center post titles */
text-align:center;
}

Click update file and you’re set!

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

WordPress Tip: Increase the size of your post-writing box

April 18th, 2008

In my opinion, I think the default size of the post-writing box (shown below) is a little too small. Then, again, I do have a 24″ monitor. But still, especially with the size of images we tend to post on ProPhoto blogs, this area is a little cramped.

Luckily, there is a simple way to increase the size of your posting box. Just click on “Settings” (”Options” in WP 2.3.3 and earlier) in your WP Admin area, and then click on the “Writing” subtab. Then, where it says “size of the post box” just bump it up from the default 10 lines to something bigger.

I like 20 lines or more. Depends on how big your monitor is. Or, if you really want a lot of room, click on the “Toggle Fullscreen Mode” button, and really get comfortable.

Update:  if what you’re really after is more WIDTH to your posting box, try using this plugin.  It’s pretty sweet.

Update #2: If you want to make just a quick temporary adjustment to your posting box height (it won’t be remembered next time you post) you can also just grab the lower left-hand corner of the box (shown below) and drag it.