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

I got an email today from someone who was having trouble typing below and between images that she had uploaded and inserted into her post. She said that in the past when she tried to do this…

“several of my images were “stuck” together so I couldn’t get in between the images very well to type — and when I did once it deleted the image.  so i got frustrated.”

This type of problem is pretty common for people new (or not-so-new) to WordPress.  It’s tough sometimes to get your cursor in the right spot and type without deleting stuff or clicking on images.  Here are a few tips and tricks to make this a bit easier.

1. Increase the height of your post box (<– click the link to find out more)

2. Increase the width of your post box (<– click the link to find out more)

3. When you’ve inserted an image and want to type below it, or if you want to type between two images you’ve already inserted, put your cursor just to the right of an image, click there, then press “Enter”.  If you then start typing, you should be on a new line under that image.

4. Try switching to full-screen editing mode when posting (<– near the bottom of that post)

5. In a pinch, switch over to “HTML” mode and put your curser after the code for the image in question.  Then press return TWICE and start typing your next line.  If you then switch back to visual mode, you should be able to continue typing.

Probably one of the most important things for Search Engine Optimization (SEO) - the art of trying to get your website to rank high in Google and other search engines - is building lots of high-quality inbound links.

Inbound links are other websites that link to your site. Search engines view these as metaphorical “votes” for your site, and rank websites that have lots of inbound links higher than those that don’t. (This is a major oversimplification, but this is a SEO 101 lesson, not a nuanced article.)

How many inbound links do you have? Good question! Here’s a simple trick to find out approximately how many inbound links search engines are counting for your website. Just go to www.altavista.com (you can do this in Google too, but Google doesn’t show you but a small percentage of the inbound links it has indexed for your site) and type in

link:www.mywebsite.com

In the search bar, like so:

…and press Enter. On the next screen you should be able to see an approximate count of how many links to your site have been indexed by search engines.

You can also use this trick to hunt the backlinks of any sites you want. Frustrated by that other photographer in your area who ranks higher than you in search engines? Check out how many links they have! Chances are it’s more than you.

In future posts I’ll give some tips on building inbound links and making sure that you get credit for all of the ones you do have, but for now, happy hunting!

If you’re anything like me (and I know I am) then you love BIG monitors. My main computer is a 24″ iMac (primal grunting here). I just think that I’m a lot more productive on a big monitor. And there is scientific evidence to prove my point. But I digress…

If you have a big monitor like me, then you may have been a little frustrated when WordPress 2.5 came out and one of the new “features” was an admin working area limited to 980px. Especially when posting big, ProPhoto-sized pictures, more width can be really nice.

I already posted about increasing the write-post box’s height, but today I tried out a cool plugin that removes the max-width setting on your admin area.

You can download it here. I like it! What do you think?

Related posts:
Increase the size of your post-writing box
Installing and using plugins

Dennis recently commented on a post asking how to change the comment text color on main page comments.

Here’s how:

In you WordPress admin area, go to “Design” => “Theme Editor” and select “Stylesheet (style.css)” to edit it. Scroll down to lines 121-123 which look like this:

body.home #comments {
background-color: #E3E3E3; /* bg color of mainpage commment area */
}

Add a line inside the curly braces, like so…

body.home #comments {
background-color: #E3E3E3; /* bg color of mainpage commment area */
color:#ff990; /* color of comment text */
}

…except use the six-digit color code of your choice. Click “update file” to save your changes, then view your blog (remember to force your browser to refresh) to check your work.

I still get a lot of questions about size of images to post and how to resize and optimize them, so I thought I would throw up this post for the sake of clarity.

ProPhoto is designed for images that are 900 pixels by 600 pixels, vertical or horizontal. You can post images smaller than that, but you can not post images WIDER than 900px. Some people (Mark Ridout comes to mind) post a lot of pictures that are 900px wide and MUCH taller than 600px, but they still don’t go any wider than 900 pixels as this will break the layout of the blog. (By the way, I don’t personally recommend using images bigger than 900px tall because of page load speed and because most monitors are big enough to see all of the image at once).

All image editing programs (most photographers use Photoshop or Lightroom or Aperture) allow you to resize images. If you’re interested in how I get images ready to post to the blog using Photoshop, read on:

First, I resize it to 900px by 600px by going to “Image” => “Image Size…” (Note, if you’re using a PC, things might look a bit different for you.)

Then I set the wider dimension to 900 and click OK. As long as you leave “constrain proportions” checked the other dimension will take care of itself:

Once I’m done resizing, I usually add a bit of sharpening–I use Kubota’s Magic Sharp action–but you can sharpen with whatever action you like, or use a built-in sharpening filter from Photoshop, or don’t sharpen at all, it’s up to you…

Finally, I optimize it for the web by shrinking the file size (not the dimensions–how big the file is in terms of memory used to store it and download it) as much as I can without sacrificing too much quality. I do this by going to “File” => “Save for Web and Devices…”

And then making sure that “JPEG” is selected as file type, and turning down the quality to around 80. I keep my eye on the file size in the lower left corner and watch how the quality looks on the “optimized” tab preview. I’m trying to get the file size as small as possible (this will help your blog load fast) without sacrificing image quality too much.

(By the way, that is my bald 8 month-old daughter on the left of that picture.) Then, I click save, and I’m ready to upload to the blog.

If you know your way around Photoshop a bit, you may want to create a couple of actions that automates all of this for you–this can save a lot of time.

Just found out I got written up on this website. Here’s the link to the post about ProPhoto. I like this guy, whoever he she is…he she called me smart.

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.

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.

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

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