ProPhoto - Premium Wordpress Theme for Professional Photographers - Single Column, big pictures - Blog Template

Hi everybody, this is Jared from www.ProfessionalPhotographerTheme.com, and you’ve arrived at the ProPhoto Tips blog. It’s a blog for bloggers–specifically professional photographers who use the ProPhoto theme for WordPress. I’ll be adding lots of posts in the coming days and weeks covering WordPress installation, ProPhoto theme customization, ProPhoto bug fixes, search engine optimization tips and tricks, ProPhoto featured blogs, advanced customizing tips, must-have WordPress plugins, lots of screencast video tutorials, and much more.

I’m also hoping this will be a community gathering hub for ProPhoto users and me, it’s creator, where we can interact through the comments. So don’t be shy! Comment early and often!

You won’t want to miss any of these tips, so check back often or even better yet, subscribe to my RSS feed right here.

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

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

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!

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.

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.

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

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!