Archive for May, 2008

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

Tuesday, 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?

New blog theme coming, need your input!

Monday, 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

Saturday, 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.

Upload and insert multiple images in a post at one time

Friday, 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.