Redirect your old Blogger blog to your new WordPress blog

May 14th, 2008

A lot of you switched from Blogger (blogspot.com) blogs to WordPress in order to use the ProPhoto theme.

If you’re anything like me (and I know I am) you probably just posted one last time on your old blog saying “Our blog has moved!” and putting a link to the new address. Well, I was thinking today there’s got to be a better way, so I dug around a bit, found a few posts, and came up with this for my wife’s old blog: Click here to see it. Go ahead, click on it and come back here.

Pretty cool, eh? Here’s how to do it:

Log into your old Blogger dashboard and click on Manage: “Template” for the blog you want to redirect, as shown below:

Then, hunt around in the big editable text box, and just below the tag that says <head>, paste in these two lines:

<meta content='1;url=http://www.website.com/blog/' http-equiv='refresh'/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>

Be sure to change the address (highlighted in red) to your new blog’s address. The second line tells search engines not to read or index your old blog. This assumes that you’ve imported your old blogger blog into your WordPress blog. Search engines penalize you some for duplicate content (having the same exact content appear in several places on the internet) so this takes care of that. If you didn’t import your old blogger blog into your WordPress blog, then you can leave this line out. Also, the number “1″ in the first line is how many seconds the user will wait before they are redirected. You can adjust this if you want.

This code takes care of redirecting browsers to your new blog. Next we have to insert one more bit of code to display that cool yellow box so they know what’s happening to them.

To do this, scroll down a bit further and find a line that says:

<b:section class='main' id='main' showaddelement='no'>

Right below that line, paste in this chunk:

(NOTE: if you are still using an ancient Blogger template like I was, you might not have this line of code. Instead, just insert it right below the <body> tag.)

<div style='position: absolute; top: 0; left: 0; margin: 30px; border: solid 2px #333; color: #000; background-color: yellow; padding: 25px; width: 85%; z-index: 5; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px;'>
<p><strong>My blog has moved!</strong></p>
<p>You should be automatically redirected in a few seconds. If not, visit<br/> <a style="color:red;" href='http://www.website.com/blog/'> <strong>http://www.website.com/blog/</strong></a> <br/> and update your bookmarks.</p></div>

Again, be sure to change the website address twice in the above code (highlighted in red) to your blog’s address. Click save changes, and check your work.

Questions? Leave ‘em in the comments and I’ll try to get back to you in a jiffy.

Posted in Blogging, Pimp my Blog | 5 comments         Show Comments | Add a Comment

Import a FTP or SFTP Blogger blog into WordPress

May 13th, 2008

The fantastic WordPress import feature (which can be found under “Manage” => “Import”) does not support importing Blogger blogs that were set up to publish via FTP or SFTP.  It works fine for the other two types of Blogger blogs:  standard and “custom domain”, but for FTP/SFTP published blogs you can see the blog but it shows 0/0 posts and 0/0 comments.

I found out after a lot of digging today that it is possible to import this type of blog.  All you have to do is first convert it to a regular Blogger blog and then import it.  To do this, login to your blogger account dashboard and click on “Settings” => “Publishing.”  Then choose “Switch to: blogspot.com.”

Pick a random subdomain address and let blogger do its thing.  After you’ve converted it, WordPress will import it without a hitch.  You can even switch it back to publishing via FTP or SFTP after the transfer was a success.

Posted in Blogging | 2 comments         Show Comments | Add a Comment

How to change font & link colors in footer/sidebar area

May 9th, 2008

Jennifer sent me an email today asking how to edit the font (and I assume link) colors in the large footer area of her blog. That, combined with a conversation I had yesterday with Matt, who handles installations, kind of pointed out to me that my CSS doesn’t make it overwhelmingly clear how to make changes to this footer area. So, I’m going to make the code a bit more clear for future purchasers, and tell you all how to tinker with these colors in this write-up.

The area in question is this big footer area (technically its your sidebar, but since it’s a one-column theme, it’s more like a footer), shown below.

There are two types of text on in the footer area, and you can style them individually. We’ll start with non-link text (circled above in red) which basically is your widget headers.

If you don’t like the color that these headers are inheriting from other parts of your CSS, here’s how to change it. In your WP admin area, under “Design” (”Presentation” in WP 2.3.3 and earlier) = “Theme Editor” choose the “Stylesheet (style.css)” file to edit. Then scroll down to about lines 108-113 where you should see this chunk of code:

/* edit these to change background color and/or
padding of "sidebar" area at bottom of page */
div#sidebar_footer {
background-color: #F0F0F0; /* bg color of footer-sidebar area */
padding: 20px 0 10px 0; /* top, right, bottom, left padding */
}

Right before the closing “}” on the last line of this chunk, add the line highlighted in red so that it looks like this:

/* edit these to change background color and/or
padding of "sidebar" area at bottom of page */
div#sidebar_footer {
background-color: #F0F0F0; /* bg color of footer-sidebar area */
padding: 20px 0 10px 0; /* top, right, bottom, left padding */
color: #ff9900; /* color of non-link text in footer */
}

Except change the color code to whatever you want it to be. This will also change the color of the bullets next to the links, by the way. Save your changes by clicking “update file” and view your blog, refreshing your browser, to see you changes.

To change the colors of your links in the footer, we’re going to have to paste in some additional CSS code and then change the six-digit color codes to suit us. To do that, still in your “Stylesheet”, scroll to the very bottom, press return a few times and on a brand new line paste in the following code:

/*styles sidebar-footer links */
#sidebar_footer a:link {
text-decoration: none; /* no underlining default */
color: #3333CC; /* color of links not yet visited */
}
#sidebar_footer a:visited {
text-decoration: none; /* no underlining default */
color: #663399; /* color of links already visited */
}
#sidebar_footer a:hover {
text-decoration: underline; /* underlining as hover default */
color: #000000; /* color of links when being hovered over */
}

Then, just go back and edit the color codes for the three states of the links: normal (unvisited), visited, and hovered. You can also experiment with switching on and off underlining in the various states using either “none” or “underline” for the value of “text-decoration:”. Save your changes, check your blog, refresh your changes, and admire your work.

Related post: How to customize your footer/sidebar area

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

Posted in Customizing ProPhoto, Frequently Asked Questions | 1 comments         Show Comments | Add a Comment

How to add a signature image to your bio

May 7th, 2008

Kelly emailed me today asking how to add a signature image to her bio text area. I thought it was a good question, and something a few of you might like to know how to do, so I’m writing up the answer here.

I think the look Kelly is going for is something like what I did with Paige Elizabeth’s blog, shown here.

See the cute little signature below her bio? Pretty cool, huh?

Well, to pull this off yourself, first, create a signature image. Try to keep the file size fairly small, although the dimensions can be whatever you want. Write down the exact pixel dimensions (width and height) of the image–you’ll need them later.

Next, we’re going to upload the image to your website. Now, you could just use an FTP program or a file manager to upload your image, but for those of you who are a little bit intimidated by such things, here’s how to do it without leaving your comfy WordPress admin area.

To upload your image, just write a new post and save it as a draft. In that new post, upload your signature image and insert it, full-size, into your post, just like you were posting an image in a regular blog entry.

Once the image is inserted into your post, switch your post into “HTML” mode (”Code” in WP 2.3.3 and earlier) by clicking on the tab at the top of your posting box. You should see a bunch of code that looks like this:

<a href="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" title="picture-12333.jpg"><img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" alt="picture-12333.jpg" /></a>

Click and drag in that code to highlight the text in between the quotation marks right after “src=“, shown here marked in red:

<a href="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" title="picture-12333.jpg"><img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg” alt=”picture-12333.jpg” /></a>

That’s the address of your signature image that you just uploaded. (It might look a little different, don’t worry.) Copy that text into WordPad or TextEdit for a few minutes. Save your post as a draft in case you copied wrong and need to come back and grab that code again. Once you’ve got everything working, you can delete the post entirely–I’m 98% certain the image you uploaded won’t be deleted when delete the post.

Ok, we’re getting close.

Next, in your WP Admin area, go to “Design” => “Theme Editor” and choose the file “bio.php” to edit it. Near the bottom of that file, look for the end of the last paragraph of your bio, which is marked by a close paragraph html tag that looks like this: </p>.

After that </p> tag but before the two </div> tags, paste in this line.

<img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" width="50" height="50" id="mysignature" />

Once you’ve pasted that in, just replace the text after “src=” with the text you copied out of your draft post when you uploaded your signature. Also, change the width and height to the dimensions you wrote down when you created the image. Click “update file” to save your changes. Then just view your blog and refresh your browser to see your work.

If you’re really particular about exactly where the signature is placed relative to your text, you can reference this image from your stylesheet and fiddle with its margins a little bit. To do that, just go to your “Theme Editor” again, and edit “Stylesheet (style.css).” Pull down to the bottom of the document, press return to add a new blank line in and paste in these lines:

#mysignature {
margin: 0px 0px 0px 0px;
}

Then, just change those 0’s to different pixel amounts, and experiment by saving your changes and refreshing your browser to see changes. The four zeros represent, in order: top margin, right margin, bottom margin, left margin

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

Posted in Customizing ProPhoto, Frequently Asked Questions, Pimp my Blog | 12 comments         Show Comments | Add a Comment

Create a drop-down list of your pages in your nav bar

May 6th, 2008

A few people have asked me how to create a drop-down menu of your pages in your top navigation bar area. Here’s how:

In your WP Admin area, go to “Design” => “Theme Editor” => “topnav.php”. On a blank line in the middle (depending on where you want it to go) paste in this line of code on an empty line:

<?php wp_list_pages('orderby=name&title_li=<a href="#">Pages</a>'); ?>

Then, save your changes and, assuming you have some pages written, you should have a perfectly functioning drop-down list of your pages.

NOTE: Because you’re adding another feature to the nav area, you may run out of room and get your header bumped down covering up your bio. If this happens, maybe delete one of your nav items, like the search, or follow the directions here to squeeze it in so it fits.

Related resources:
Why is my header is covering up my bio?
How do I delete the search feature, or something else from the nav area?

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

Posted in Customizing ProPhoto, Frequently Asked Questions | 2 comments         Show Comments | Add a Comment

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?

Posted in Announcements | 34 comments         Show Comments | Add a Comment

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.

Posted in Customizing ProPhoto, Flash Header, Frequently Asked Questions | 5 comments         Show Comments | Add a Comment

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.

Posted in Blogging, Frequently Asked Questions, Posting, Using WordPress | 13 comments         Show Comments | Add a Comment

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.

Posted in Screencast Tutorials, Upgrading WordPress | 1 comments         Show Comments | Add a Comment

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!

Posted in Plugins, Upgrading WordPress | 3 comments         Show Comments | Add a Comment

« Older Entries
Newer Entries »