New blog theme coming, need your input!

May 5th, 2008

Well, I’ve finally managed to clear out enough of my other web projects to focus a bit more on developing some cool new stuff for photographers. I’m beginning to work on a brand new blog theme (template) for photographers that hopefully will be available within 1-2 months.  When it’s ready I’m going to figure out a way to give a significant discount to anyone who has already purchased a theme from me if you’re interested in the new one.

My question to you all is, what kind of stuff would you like to see in a new blog theme?  What design elements do you want?  What new features or functionalities would be cool?  What do you wish your blog had?  Please leave me comments!

Some of the things I’m thinking so far:

  1. A new and different design, still featuring really big images and a prominent bio area, but departing somewhat from the look and feel of ProPhoto.
  2. A theme admin control panel area built into the WordPress admin where you could customize almost every aspect of the theme without ever touching the code through the theme editor.
  3. A built-in contact form
  4. Maybe a simple portfolio feature with a large slideshow for people who wanted to just have a blog and not also have a flash portfolio site

So, what do you think?

Change the height of the flashfader header slideshow

May 3rd, 2008

A few times I’ve gotten asked about how to change the height of the Flashfader header slideshow. It’s not terribly difficult, but it’s not as easy as you might think, either.

1. Step 1: Go to “Manage” –> “Flashfader” and set the height to whatever you want it to be. Click “save.”

2. Step 2: Go to “Design” –> “Theme Editor” and choose “Stylesheet (style.css)” to edit it. Scroll down to line 268 (there’s a line marker at line 265). This chunk looks like this:

/* LINE 265 */
 
#header-masthead {
height: 250px; /*height of masthead*/
background-image: none;
}

Change the height to whatever you want it to be.

3. Step 3: Finally, you’re going to need to use an FTP program or your File Manager to edit one more file, called “flashfader.js” It’s in your “prophoto” theme folder. Open it up with WordPad or TextEdit, and you will see two places where it says ‘height=”250px” or something like that. Change the height to your desired height in both places. Save your changes and reupload the file, overwriting the one on your web server.

4. Step 4: If you’ve already uploaded images into your Flashfader management area that are not your desired height, you’ll need to delete them and reupload new ones. Also, if you uploaded images that were something other than 250px high while your settings were still set at 250px, Flashfader may have cropped them. So, if they’re still not showing up right, delete them and reupload them.

5. Step 5: Empty your browsers cache and check your work.

Helpful related resources:
Using an FTP program
Using a web-based file manager utility

Questions? Leave them in the comments instead of emailing for support so everyone can benefit from the clarification.

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

Upload and insert multiple images in a post at one time

May 2nd, 2008

One of the cool features of WordPress 2.5 (have you upgraded yet) is that you can upload multiple images at one time.

If you haven’t already tried this yet, all you have to do is click on the “Add media:” image button, click on “choose files to upload” and use shift+click or command+click (ctrl+click for PCs) to select multiple images at once. You can also click on an entire folder to upload all the images inside it.

Well, that’s pretty cool and all, but wouldn’t it be even nicer if you could insert all your images into your post all at once instead of one by one? Well, you can, sort of. All you need to do is use WP 2.5’s new “gallery” shortcode feature, with a little special sauce thrown in.

Here’s how it works:

First, upload a bunch of pictures using the “Add media:” image button.

Once they’ve all finished uploading, click on the “gallery” tab of your little uploader box, and at the bottom you can click on “insert gallery into post.” What this does is add a little bit of special WordPress code to your post that says:

[ gallery]

(I added an extra space after the first [ that shouldn't be there so that the code wouldn't execute in this post). When you publish your post now, it will insert all your images into your post as small thumbnails. Go ahead, try it and then come back here.

Cool, huh? The only problem is, we don't want little thumbnails, right? Right. The next step is to modify the gallery shortcode just a bit so that we display our images full-size. To do that, just change the gallery short code to:

[ gallery size="full" columns="1"]

(again, leave out the space after the first “["). Now if you publish your post your images should display full-size, one per line, and centered. We're getting closer.

However, there is still a funky border that we don't want.

To get rid of that, we have to make one change to our stylesheet. We only have to do this once, and then from now on every time we use the gallery shortcode, we won't have those borders. To make the change, go to "Design" --> "Theme Editor" and open up "Stylesheet (style.css)". Scroll down to the bottom, add a new line, and paste in this line:

.gallery img {border:none !important;}

Click "update file" to save your changes, refresh your browser, and the borders should be gone.

Once you get used to this, this can save you a lot of time. Again, all you have to do is upload all your images, and then paste this line (minus the extra space) into your post where you want your images to appear:

[ gallery size="full" columns="1"]

The only real downside is that inserting your in this way does not allow you to type text between images, so if you like to do that, then this probably isn’t for you. But, if you like to write up your post and then post all of your pictures in a row, this could save you lots of time.

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

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