Nightmare Upgrade of WordPress 2

I apologize in advance for the nightmare conditions of Taking Your Camera on the Road. I’m in the middle of an upgrade from hell with the latest version of WordPress.

Every time I turn around, I’m finding more problems. If you spot any problems, errors, or odd things, please let me know so I can fix them. I might know and be struggling to find an answer, or I might not. With so much customization and tweaks on this site, I’m having a tough time trying to track them all down. Any help would be appreciated.

Why do I always pick the last minute before heading out the door traveling to do stupid things like this? Huh? Slap me next time. Sigh!

Using CSS to Create a Photo Gallery

I have quite a few examples in my CSS Experiments on showcasing your photographs, as a single image or in a gallery format, and I found a very simple, easy-to-understand explanation of how to use CSS to create a photo gallery from Web Reference.

With this article I hope to show you how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS). I will take you through the styling one step at a time and end up converting an unordered list of photographs into a professional photograph gallery. Each step will be thoroughly explained and will have an example page showing the effect of the additional styling so that you can see what to expect.

The technique presented puts the images in a HTML list and then uses CSS basics and the hover style to create a photo gallery so when you move your mouse over the thumbnail, the enlarged version of the image will appear in the showcase.

This is a great technique which worked on only a few browsers when I first started experimenting with it, but with most people upgraded to newer Internet browsers, and so many people switching to , this technique will work across most browsers now.

Enjoy!

Writing I’m Most Proud of in 2005

As a professional writer, writing on a wide variety of topics, I posted this article and list of the my favorite articles that I wrote in 2005 on my other website, Lorelle on WordPress, and I thought I’d share it here. But before I do, I wanted to say that of the writing I’ve done on this site this year, I’m most proud of the Know Before You Go series under the Planning for the Road category. Here are some highlights from the Know Before You Go series:


I know it’s blatant bragging, but I have never gotten blase about reading an article I wrote and finding it not only good but awesome. How can I explain this better?

See, I really don’t think that what I write is very important or even very interesting, though people tell me that it is all the time. And I get paid to write. Yes, I’m a paid writer. Still, I think my writing is mediocre. I just do what I do and live my passion to write on a daily basis. I live to write. I can write about anything, anytime and just about anywhere. But I don’t think my writing is that good.

Then I stumble across something I’ve written and read it as if it was the first time. I read it as if I didn’t write it. I think, “Wow, this is really great!” Then I remember that I wrote it and I’m impressed with myself. Actually, I’m not so impressed with myself as I am shocked that I actually created a good piece of writing that has some value. I giggle and then laugh, and tell my husband, who nods and just understands this strange thing I do to myself. Within a few hours, I’m paranoid and fretful that my writing sucks again, and my life returns to its normal insecurity.

Does this ever happen to you? I hope I’m not alone in this strange ritual of self-gloat and self-deprecation.

Anyway, while I’m in a moment of gloating, here is a list of some of the articles I’ve written recently on this blog that I’m especially proud of..that is at least until tomorrow. ;-)

Clearfix CSS Hack: Solving Stair Stepping Images

While I deal with this and other design issues I had with my site in the article WordPress Tips and Tricks – Template Files, Styles, and Themes, the issue keeps coming up. So I decided we needed to address it specifically.

What to do when images start shoving other images round?

Generally, we try to avoid browser hacks, but there was one in particular we couldn’t avoid. It causes floats within floats, especially those with images floated within floating containers, to fail to recognize the height of the floated image within the container and stair step or wrap itself around neighboring containers. Does that make sense?

Let’s spell it out.

One of the biggest problems I had is with floats within floats. A division with a float inside scrambles your layout in FireFox, though it looks great in MSIE. The inside floats don’t line up and when they reach the virtual “end” of the parent container, they overlap past the end and into the next container. The problem is that the float doesn’t “clear” or stop at the end of the container where it should. It needs to be told when to stop with the “clear” function, but unfortunately different browsers need different instructions to accommodate those instructions.

Example of the step stepping of image without using the clearfix hack

After playing around with this for days, here is my final fix from
Positioniseverything’s Easy Clearing.

For example, on the front page of our site, each post excerpt features a bar along the left side in green and often an image in the right side of the container with the text wrapping around the image. The image’s position is controlled with a float selector. In Firefox, since a height was not established in the parent container, it ended when the text ended. If the text went below the image, then it wasn’t a problem. But if it ended before the end of the image, the next container would then begin, stair-stepping into the container above it.

I needed to apply a “clearing” to the container so that the container below it would wait until the container above was finished, and then begin it’s positioning.

The clearfix style is as follows:

.clearfix:after {content: ".";
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End clearfix */

In the index.php template where the excerpt or post content is displayed, I used this:

<div class="excerpt-post clearfix">
<h2 id="post-">......

The main styles of the excerpt area are controlled by excerpt-post but the addition of the clearfix style adds style instructions to the first style. You can learn more about using combination styles in our article on Understanding CSS Selectors and Attributes.

Example of the step stepping of image without using the clearfix hack

I also used this same technique in our Book Recommendations and Reviews. The ads and review section containers would begin to stair step their way as each container bumped up against the other, unable to determine the previous container’s height. I simply added the clearfix style to their styles.

<div class="clearfix books">
<img scr="blah.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah2.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah3.jpg" title="Amazon books" class="bookads" height="260" width="120">
</div>

The same technique would apply if the layout was like this:

<div class="clearfix books">Text here.
<div class="bookads">Book Ad here</div>
Text here.</div>

A lot of people blame Microsoft Internet Explorer for having the most bugs, but I did find some major bugs in other browsers.

Search WordPress Codex and Forum from the Admin Panels

WARNING: This Plugin is no longer working under WordPress 2+. It is currently not supported, though the author may be contacted if you are interested in taking over support of this Plugin. To search the Codex, visit it directly and use the search function.


As one of the many volunteers helping give back to the WordPress Community and helping with the WordPress Codex and WordPress Support Forum, I join the chorus of those who recommend to all WordPress users: Search First.

There is now an amazing assortment of sites and resources for WordPress users to get the information they need to the questions they have and the help they need. And when it comes to getting help with WordPress, the two above resources are top of the list, the Codex and the Forum.

Now, with the amazing coding skills and talent of two friends of mine, Andrew (also known as Jalenack) and Owen (also known as Ringmaster), searching the WordPress Codex and Forum is easier than ever. They developed the Codex Search Plugin.

Codex search plugin search bar in the WordPress administration panelsThis WordPress plugin doesn’t just search the Codex, it searches both the Codex and the WordPress Forum, and does it from within the WordPress Administration Panels. You don’t even have to leave your control panels for WordPress to find the help you need. Wow!

It’s simple. Download and install the plugin to your WordPress site. Activate it from the Plugin panel. On every page of your Administration Panels, at the top next to the title of your site and the link to “View Site” you will see the quiet and unimposing search box. All it says is “Search”.

Type in the information you are searching for and while it is searching, it displays a box that tells you it is searching. I like helpful programs like this that say “Hey, I’m working here!”

Codex search plugin searches for the words with the word Searching

It then displays a two part list of results. To hide the list, click “Hide List” at the top, but for now, let’s explore the search results.

Top of the Codex search plugin shows the results of the Codex part of the searchIn the upper part of the list you will find titles and excerpts of articles from the WordPress Codex. There are usually enough words in the excerpt to help you determine if the information in that article is what you need.

At the bottom of the list is a collection of links to posts and threads on the WordPress Forum that also contain the words from your search. While the results are few, the more specific you are with your search keywords, the more likely the appropriate information will “rise to the top of the list”. For example, don’t just search for “plugins” but search for “writing plugins” or “comment spam plugins” or “gallery plugins” to help narrow the search results.

bottom half of the Codex Search highlights links to Forum topicsTo open any of these results and not leave the comfort of your WordPress Admin Panels, right click on the link and choose “Open in New Window” or “Open in New Tab”. That will open a new browser window or tab and load that link into it so you can keep WordPress open and read about how to solve the issue at hand or answer your question. You can quickly click between the two pages if you need to attempt the solution and continue to refer to the information. Nice and easy.

If this isn’t information at your fingertips, I don’t know what is. WordPress volunteers get lots of requests for a downloadable manual and instruction book. With this easy to use plugin for searching the Codex and Forum, the manual and information is literally right at your fingertips!

Thanks, Jalenack and Ringmaster, and everyone who helped them.

WordPress Backup Week July 23-30 – Get Backed Up

WordPress is celebrating blog security and protection with WordPress Backup Week July 23-30.

WordPress, one of the most popular blogging and website management tools, is sponsoring WordPress Backup Week July 23-30. Step-by-step backup instructions will be available in the online manual, the WordPress Codex, and online in the WordPress Support Forum to help you through the process.

Having lived on and off for the past month with numerous computer crashes and bleeding my fingers and brain all over the place trying to stay online and working, I can appreciate this reminder from WordPress a LOT.

Your database contains every post, every comment and every link you have on your blog. If your database gets erased or corrupted, you stand to lose everything you have written. There are many reasons why this could happen and not all are things you can control. But what you can do is backup your data, after all, it is important isn’t it? Making backups is essential because problems inevitably occur and you need to be in a position to take action when disaster strikes. Spending a few minutes to make an easy, convenient backup of your database will allow you to spend even more time being creative and productive with your web site.

Backing up your WordPress database has never been easier with WordPress plugins which allow you control over how, what, and when you backup, even emailing your database backups to you – all pain free. Documentation is available to take you through the step-by-step process, as well, for backing up your WordPress site and database with cPanel, vDeck, DirectAdmin, Plesk, and others.

For your own protection and security, and peace of mind, join us in learning how to backup and protect our valuable data and writings during WordPress Backup Week. Consider using this Backup Week as an incentive to backup all your valuable documents and software, too.

If you care about your friends and you don’t want to see them suffer through the same agonies as I and you may have had, tell them about this. Help them learn from our pain and suffering. Remind them BACKING UP IS A GOOD THING.

Tell the world.

Customizing the WordPress Loop for Excerpt Queries

I talk a lot about the powerful features and ability to customize WordPress on our site. One of the behind the scenes power WordPress “tricks”, if you will, featured on our site is found on our site’s front page. It involves some queries that ask several rather uniquely styled questions, and generates what you see based upon the answers from the database. Let me explain this better.

When you view the “home” page or front page of our site, you are greeted with a combination of excerpts or full short posts. On the left side of each post is a green bar. Each post features the title and post categories. Each post also features the excerpt summary, or first paragraph or two of the post, or the full length short post.

View of excerpts on front page of our website
Each excerpt on our page is defined by a green bar along the left edge. The first excerpt at the top uses the “more” tag to define the excerpt section within the post. The second excerpt is an explicitly defined excerpt using the Excerpt textarea window in the Write Post panel. The third excerpt is the full post. Note there is not “Continue Reading” link at the end of the post.

Now, let me break that down into PHP query talk. Inside of the WordPress Loop, which generates the page results from your database, is a query. The default query states “if there are posts, show the posts”. Very simple. It looks like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php endwhile; else: ?>
<?php endif; ?>

A query is a bit of code that begins with an IF and then provides the answers based upon something like this in plain English:

If X then Y else Z

In PHP query language, the terms “if” and “then” are replaced by “if” and “else”. The query looks more like this:

If X else Y else Z

Most people use queries to say something like “if this post is in category 4, print it with a red background” or “if this post is in category 6, don’t show it”. Or they use queries to alphabetize the posts found on the front page, or to only show posts from a specific category, leaving the rest visible through category templates or other means. These are the traditional and most requested types of front page queries.

There are also two other elements to the query that need to be considered. They are two WordPress template tags, the_content() and the_excerpt().

Used within the WordPress Loop, the_content() displays the content of the post. It features a parameter which allows the site administrator to use a tag called “more” in a post. This shows the post’s beginning content until the “more” tag as an excerpt. If the “more” tag is not used, then the whole post is shown on mutli-post pages. The post author or administrator controls where the “more” tag is used.

The other tag is the_excerpt(). It replaces the_content() tag and displays one of two things. Either the explicit excerpt as written in the Excerpt textarea box on the Write Post panel, or the first 120 words of the post. It is used to force only excerpts to be seen on the multi-post pages.

Generally, a WordPress site owner or Theme author will use one or the other template tag. The problem is that I’m not your ordinary user.

That’s right. I had to have something different, something to challenge the WordPress experts. I challenged them, and this is what Michael Adams of MDAwaffe came up with just for me.

I wanted to use the explicit excerpt, the “more” tag, and the two template tags and have WordPress do the work of figuring out when I needed which, and to use it appropriately. The question put forth on the front page of our site is this:

If post content has an explicit excerpt, 
            display the explicit excerpt.
If post content uses the <--more--> to mark the ending post of the excerpt, 
            display this excerpt.
If post content uses NO EXCERPT, 
            display the entire post.

Here is the loop, without all the styles and references so you can see the actual code that asks the three questions. Comments are in place to help you follow the process.

<!-- Start of the Loop -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( $post->post_excerpt ) : // If there is an explicitly defined excerpt ?>
  <!-- Display explicit excerpt-->
    <?php the_excerpt(); ?>
<?php else : // If there is not an explictly defined excerpt ?>
  <!-- Display post or post until READ MORE tag -->
    <?php the_content(); ?>
<?php endif; // End the excerpt vs. content "if" statement ?>
<?php endwhile; else: ?>
  <!-- Display Page Not Found Page if post is not found -->
<?php endif; ?>

The key is in the line that says:

<?php if ( $post->post_excerpt ) : ?>

It provides the condition that looks for the explicitly defined excerpt. The rest of the query within the Loop is fairly normal.

The template tag the_content() has a parameter to set the “read more” statement. The template tag the_excerpt() does not.

This created a bit of confusion. It meant that if I set the_content() to say “Continue Reading”, it would only show up on the posts that used the “more” tag and not on the posts that used the_excerpt() template tag. Not very consistent looking. I needed to add the same look and text for the “Continue Reading” tag to the explicit excerpts.

The usage of the “more” within the_content() looks like this:

<?php the_content('<span class="readmore">CONTINUE READING <?>

The addition of a “faked more” tag to work with the the_excerpt() tag looks like this:

<?php the_excerpt(); ?><br />
<div class="readmore"><a href="<?php the_permalink(); ?>">CONTINUE READING </a></div>

Here is the entire customized Loop query. Note the use of the clearfix CSS style which is discussed in the article on WordPress Tips and Tricks on Themes and Templates.

<!-- Start of the Loop -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( $post->post_excerpt ) : // If there is an explicitly defined excerpt ?>
<div class="excerpt-post clearfix">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" accesskey="s"><?php the_title(); ?></a>
</h2>
<div class="catslist"><?php the_category(' and '); ?></div>
<div class="entry">
<?php the_excerpt(); ?><br />
<div class="readmore">
<a href="<?php the_permalink(); ?>">CONTINUE READING</a>
</div>
</div> <!--end of entry -->
<!-- <?php trackback_rdf(); ?> -->
</div><!-- end of excerpt-post -->
<?php else : // If there is not an explictly defined excerpt ?>
<div class="excerpt-post clearfix">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
</h2>
<div class="catslist"><?php the_category(' and '); ?></div>
<div class="entry">
<?php the_content('<span class="readmore">CONTINUE READING</span>'); ?>
</div><!-- end of entry -->
<!-- <?php trackback_rdf(); ?> -->
</div><!-- end of excerpt-post -->
<?php endif; // End the excerpt vs. content "if" statement ?>
<?php endwhile; else: ?>
<h2 class="center">Page Not Found</h2>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<p><?php _e('To help you find the information you seek,
we recommend you check out our
<a title="Camera on the Road Site Map" href="sitemap.php">Site Map</a>
to help track down what you are looking for.'); ?></p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
<!--end Loop -->

More WordPress Resources

This a powerful example of one of many options and queries possible within the WordPress Loop. For more information see the following resources:

WordPress Feed Titles

I’ve been trying to create a list of the various feeds available on my site. I created such a list but when my feed reader scans the page for feeds, it lists every single one with the title of my site. This would be fine, but I wanted the title to reflect the names of the categories. It helps no one to have a list of 15 feeds and all of them titled “Taking Your Camera on the Road”. That’s no help.

With help from the WordPress Support Forum and Kafkaesqui from Guff Szub.net, here is the answer:

Note: This only works with RSS 2.0 feeds.

On our new Taking Your Camera on the Road – Feed List, we have listed a variety of the feeds available on our site. One example is to our Learning Zone, our most popular category covering educational material about photography, web, Internet, and more. The feed link looks like this:

http://www.cameraontheroad.com/wp-rss2.php?cat=8

The instructions on how to get the category “title” to show up in your RSS 2.0 feeds are as follows.

  1. Open the wp-rss2.php file in the root directory of your WordPress installation.
  2. Towards the top of the file, find <title><?php bloginfo_rss('name') ?></title>.
  3. Replace it with this:

    <title><?php bloginfo_rss('name'); ?><?php if(is_category()) echo ' : ' . wp_specialchars(get_the_category_by_id($cat)); ?></title>
  4. Save the file and upload it, if necessary, to your server.

Now, this comes with a price. You are changing one of the core programming files for WordPress. When you update WordPress, you will need to do this again. Save a text file in your root directory and in a safe place on your computer with a copy of these instructions so you will remember next time how to change this back.

WordPress Tips and Tricks – WordPress Plugins

There are a lot of WordPress Plugins I can’t live without. And I love talking about them, because the more I talk about them, the more people will learn about how awesome WordPress plugins are, and maybe, just maybe, the WordPress developers will see how useful they are and put them into the core code. Maybe.

For those unfamiliar with plugins, they are files that are written for free by anyone with an idea and willing to learn how to write a plugin. Or they come already equipped with the skills and expertise to write fantastic code that increases the flexibility and capabilities of WordPress.

While they are all free, some plugin authors ask for donations if you feel their plugin really helps you out. So consider donating if you really like what you try.

Now, for a list of some of my favorite, here they are. And for a look at all of the WordPress plugins used on my site, check out our List of WordPress Plugins. Continue reading

WordPress Tips and Tricks – Template Files, Styles, and Themes

I’ve put together a collection of WordPress tips and tricks, a three part series that looks at the various tips and tricks I discovered while turning over my entire site to the management of WordPress software. In Part One of my WordPress Tips and Tricks Collection, tips and tricks were offered for dealing with the Administration Panels. In the next one, I’ll deal with some of my favorite WordPress Plugins. This one is for tips and tricks for WordPress Template Files and Style Sheets and the amazing WordPress Themes.

WordPress Template Files and Style Sheets

The template files in WordPress are found within your WordPress Themes. They are the building blocks which come together to create the structure of your site’s generated web page. Combined with the fact that each WordPress Theme has it’s own style sheet, things can be very simple or complex, depending upon what you want to do.

Having the style sheets associated with each Theme is great, but if you make a change to a style you want seen on every Theme you switch to, you have to add it to each of the Themes you use on your site. While this is only necessary for those using Theme Switchers, if you do change your Theme, it’s something to remember.

Here are some things you can add or change in your WordPress Theme that might improve things.

Labeling Your Template Files

The switch from WordPress 1.2 to the newest version and WordPress Themes left me going crazy trying to track down which parts belonged to which template files. I love the modular system, once I got my head around how it worked, but I still needed to track down which CSS div and HTML tag started and ended in which template file.

I went through each template file and labeled it with a comment that identified it.

<!--header begins-->

And at the end of the template file, I put a comment to mark the ending of the code within that template file.

<!--header ends-->

As I developed my site, I started to create custom template files for categories, and for different sidebars and headers, which appear based upon a query which asks which category the post is in or which type of page is being viewed, such as single or multiple post views.

I now had two different headers, three different sidebars, and two different single post template files. That’s a lot to remember and track.

Again, I went through and labeled which one was which so I could check to see which one was generated in which view, making the tracking of my query statements much easier.

<!-- single 1 -->
<!-- header 2 -->
<!-- header 3 -->

I also went through and traced and labeled all of the CSS divisions to make sure I knew where one started and where it ended. Makes the whole testing process much easier.

Adding Categories Back to Excerpts

After working so hard on the design of my excerpts on the front page, I realized that I was missing a major navigation tool by not having the categories the post was in highlighted in some way. So I decided to add the categories back into my design.

<div class="catslist"><?php the_category(' and '); ?></div>

This produces a list of the categories the post is in with an “and” between each category. Very simple. Added this to my index.php just under the h2 heading where I wanted the categories to show and thought I was done. Nope.

example of list of categories under the title in the excerpts

Remember, if you change one thing in a multi-post page, you better change it in all of them. Because I have a custom search page and custom category pages, I had to go in and add the same tag to the WordPress Loop in each of my template files. They included:

search.php
category.php
category-1.php
category-2.php
category-3.php
, etc.

I don’t use archive template files, so if you do, make sure you change this information in them, too.

Finding Your Images

While working on WordPress to get it going before I decided to move it into my root directory and allow it to totally control my site, I had terrible problems trying to FIND my images. I tend to use relative links rather than absolutes and having my images in a directory in the root and WordPress in another directory in the root, finding those images became really painful. I certainly didn’t want to go through and search and replace every image reference in my database after importing it. The move into the root directory would mean another search and replace.

I found an easier way to help the browser locate those relative image links.

By using a feature called base href in the head of your header.php template file, you can establish the artificial “root” from which to look for file references.

<base href="http://example.com/" />

This instructs the browser to work from the root directory to find the links. So a link to an image at images/photos/ball.gif, even though the file sits at example.com/test/wordpress/wp-content/themes/yourtheme/ would automatically look under the root for images/photos directory. Nice trick.

For more information, read Base Reference in the HTML and XHTML Reference Guide.

Image Tags

In FireFox, if an image doesn’t appear, the alt description appears. To change the size of the font for this text description, which distinguishes it from the rest of your content, use the following in your style sheet, changed to your own preferences:

img {border:0; font-size:60%;}

You can expand upon this and make it bold, green, small caps, or whatever, but this is how you make the change.

Sorting Out the Categories

We have a lot of pages on our site and a lot of categories and subcategories. I wanted to customize each of the main category pages to help people move around the site. WordPress allows you to create custom category templates, allowing control of the content on each category page.

In the most simplest of explanations, if your WordPress Theme has a category.php template file, use it. If not, then go find one from another Theme like the Default WordPress Theme. Copy it and change the copy’s name to category-3.php with the number representing the category ID you wish to have in a custom category. You don’t have to have this on every category, just the ones you want customized.

Example of our custom category page on our site

Then you can customize it. To simply add text, slap in a paragraph tag and write what you want just above the WordPress Loop. Save it and it’s done.

I wanted to create a table of contents of all the subcategories under the parent category in this category page. This example highlights category 8 – The Learning Zone on our site. There are a variety of subcategories underneath the Learning Category. The table of contents section looks like this in the category-8.php template file:

<div id="cattoc">
<ul>
<li><a href="index.php?cat=8" title="<?php echo single_cat_title(); ?>">
The <?php echo single_cat_title(); ?> Zone</a></li>
<?php wp_list_cats('sort_column=name&optioncount=0&list=1&use_desc_for_title=1&child_of=8'); ?>
</ul></div>

Using the wp_list_cats() template tag, I set the options to show the “children” of the parent category number 8.

I then added some descriptive text, of which here is an abbreviated version:

<p>The Learning Zone offers a wide variety of educational 
articles such as nature photography techniques, composition and 
close ups, the business of nature photography, equipment,....Hopefully 
you won't make the same mistakes as we have!</p>

Using the Coffee2Code WordPress Plugins for customizing post listings, I added a small table of contents list for Article Highlights:

<h4>Article Highlights</h4>
<ul>
<?php c2c_get_random_posts(20, "<li>%post_URL%</li>", "8"); ?>
</ul>
<hr />

Then the WordPress Loop begins and the posts within that category are showcased. A minor drawback to this system is that if there are enough posts within that category to justify more than one page, when the user clicks the “previous posts” link, the next page within that category will feature the same information at the top again. Hopefully I’ll be able to find a work around for that soon.

Testing Test for Testing Posts

example of the latin filler of loren ipsumWhen you are starting out, it helps to be able to create some test posts. You can slam away at the keyboard, hitting the spacebar once in a while, or you can take advantage of the long held tradition of the Lorem Ipsum.

Lipsum’s Lorem Ipsum website automatically helps you generate and copy the text you need to fill up the empty space.

Hiding CSS From Browsers

While it is slowly being “bad mannered” to have your style sheet feature hacks to accomodate the various problems different browsers have with the features you want to use, there are times when it is necessary. While there are plenty of web pages with information on how to add CSS hacks to accommodate browser’s needs, there isn’t much information on HIDING CSS from browsers. Here are a few:

Dealing with XHTML and CSS bugs

Now that I’ve just said it’s bad manners to hack up your CSS to deal with browser issues, switching from HTML to XHTML meant new bugs to deal with. Also adding the fast-growing web browser FireFox to the mix meant taking even more things-that-can-go-wrong into account.

One of the biggest problems I had is with floats within floats. A division with a float inside scrambles your layout in FireFox, though it looks great in MSIE. The inside floats don’t line up and when they reach the virtual “end” of the parent container, they overlap past the end and into the next container. The problem is that the float doesn’t “clear” or stop at the end of the container where it should. It needs to be told when to stop with the “clear” function, but unfortunately different browsers need different instructions to accommodate those instructions.

Example of the step stepping of image without using the clearfix hack

After playing around with this for days, here is my final fix from
Positioniseverything’s Easy Clearing.

For example, on the front page of our site, each post excerpt features a bar along the left side in green and often an image in the right side of the container with the text wrapping around the image. The image’s position is controlled with a float selector. In Firefox, since a height was not established in the parent container, it ended when the text ended. If the text went below the image, then it wasn’t a problem. But if it ended before the end of the image, the next container would then begin, stair-stepping into the container above it.

I needed to apply a “clearing” to the container so that the container below it would wait until the container above was finished, and then begin it’s positioning.

The clearfix style is as follows:

.clearfix:after {content: ".";
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End clearfix */

In the index.php template where the excerpt or post content is displayed, I used this:

<div class="excerpt-post clearfix">
<h2 id="post-">......

The main styles of the excerpt area are controlled by excerpt-post but the addition of the clearfix style adds style instructions to the first style. You can learn more about using combination styles in our article on Understanding CSS Selectors and Attributes.

Example of the step stepping of image without using the clearfix hack

I also used this same technique in our Book Recommendations and Reviews. The ads and review section containers would begin to stair step their way as each container bumped up against the other, unable to determine the previous container’s height. I simply added the clearfix style to their styles.

<div class="clearfix books">
<img scr="blah.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah2.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah3.jpg" title="Amazon books" class="bookads" height="260" width="120">
</div>

The same technique would apply if the layout was like this:

<div class="clearfix books">Text here.
<div class="bookads">Book Ad here</div>
Text here.</div>

A lot of people blame Microsoft Internet Explorer for having the most bugs, but I did find some major bugs in other browsers.

Changing Default or Kubrick Theme

Example of the WordPress Default Theme sidebar arrowsThe Default WordPress Theme, aka Kubrick, is an amazing piece of web page design. It pushed the envelope on what a web page could do using WordPress. It’s also a bad bit of coding. I’m not here to debate whether or not the way Kubrick was handled was right or wrong, but I do have some tips for dealing with some of its eccentricities.

Working on the WordPress Forum as a volunteer, I look at a LOT of websites. I can spot a WordPress Theme based on Kubrick in a hot second. The dead give-away? The sidebar.

The sidebar features the use of » in the sidebar bullets. I personally don’t like them. The technique to put them there is also a hack, since you can’t use character entity codes to represent images in lists.

To replace them with graphic bullets or to use the default CSS bullets like circle, disc, or square, comment out the following in your style sheet using /* to start and */ to end the comment around the entire area:

/* Comment out starts - 
Special stylized non-IE bullets 
Do not work in Internet Explorer, 
which merely default to normal bullets.
html>body .entry ul { margin-left: 0px; 
   padding: 0 0 0 30px; 
   list-style: none; 
   padding-left: 10px; 
   text-indent: -10px; }
html>body .entry li { margin: 7px 0 8px 10px; }
.entry ul li:before, #sidebar ul ul li:before { content: "\00BB \0020"; }
.entry ol { padding: 0 0 0 35px; margin: 0; }
.entry ol li { margin: 0; padding: 0; }
Comment out ends */

Now, set up your .entry ul and .entry li and so on with your own styles and bullets.

Relatives Suck

That’s right. In FireFox, position: relative sucks. I had to remove every reference of position:relative from my CSS because Firefox breaks on any container with that reference that has a link. The link turns off and is inactive. It also is influenced by any nearby float that has a position:relative in it that aligns with a non-relative container. The area where the two align, the links in the non-relative container will turn off. Argh.

Check All the Template Files

I thought I’d made all the modifications to all of the template files, but doing a simple search on my site brought up a look I wasn’t too happy with. I had forgotten to modify the search.php page.

Make a list of all the template files within your Theme directory. As you go through them, making modifications if necessary, make sure you check them off the list. For example, if you change the index.php template file so your excerpts will have a specific look, make sure you make the same structural changes to your other multi-post pages like archives.php, search.php, category.php, and any custom category template files you’ve made.

Taking Notes in WordPress

Updated July 7, 2005

I was using a notes plugin which I talk about below, then Chris J. Davis came up with an EVEN BETTER mousetrap for taking notes in WordPress. I love it when competition makes life better for everyone.

Chris J. Davis’s WordPress Notepad Plugin takes the concept of “taking notes” in WordPress and makes it not only a useful tool, but an invaluable one.

The plugin installs as with most WordPress plugins today, with an upload and an activation click. It adds two “menus” to your WordPress Administration Panels. One is under Manage and the other under Write Post. You click Add Note and enter in your notes however you want them. When you are ready to turn them into a post, choose Convert to Draft and instantly the note is added to your Write Post Drafts. You can then edit it, assign it categories, and turn your note into a post, fast and easy.

And it doesn’t stop there. He’s added a bookmarklet similar to the WordPress Press It Bookmarklet which you can click and drag to your Bookmark or Links bar in your browser and when visiting a page, click the link and that page’s link and title will appear in a new window holding a condensed version of your Write Post Admin Panel. You can add information from the article or any other notes and then save it. It will later appear on your Manage > Notes Admin panel. WOW! That is fast note-taking. Continue reading

WordPress Tips and Tricks – Administration Panels

WordPress Stamp LogoAs I developed my WordPress site, I found a lot of tips and tricks along the way. While I’ve written about the more extensive ones, I wanted to share a bunch of the smaller tips to help you with your WordPress site. We start with the WordPress Administration Panel.

Administration Panel

While the WordPress Administration Panels are evolving, there are still a few things you can do to improve them. Remember, when you upgrade, all of these changes are lost so take notes and store them in a text file in your WordPress root directory to remind you of the changes next time you upgrade. You may or may not want to include them. If you don’t, then delete them. But if you do, you’ll be very thankful your notes are there to help you put in your little tweaks and hacks in the Administration Panels.

Write Post Panel

To change the size of the Excerpt box on the post.php which handles your Write Post Panel content, edit the wp-admin/wp-admin.css file section that states:

#excerpt {
	height: 1.8em;
	width: 98%;
}

to:

#excerpt {
	height: 5em;
	width: 98%;
}

Be sure and hit SHIFT+F5 (Refresh) or Cntrl+Shift+R in FireFox to completely reload a fresh version of the page.

To change the size of the Write Post textarea, giving you more room in which to write your post, with a text editor, open wp-admin/edit-form-advanced.php and change:

<?php
$rows = get_settings('default_post_edit_rows');
if (($rows < 3) || ($rows > 100)) {
$rows = 10;
}
?>
<div>
<textarea rows="<?php echo $rows; ?>" cols="40" name="content" tabindex="5" id="content">

Change $rows = 10 to $rows = 30 or whatever height works for you.

Save and upload the file to the site server.

Post Preview

The Post Preview is definitely inadequate. If you, like me, are tired of seeing the images and graphics not line up right in the Preview, add this to the wp-admin/wp-admin.css, or whatever your Theme image alignment styles are:

img.centered { display: block; margin-left: auto; margin-right: auto; }
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.right { float: right; }
.left { float: left }

Preview Draft Posts

Working on a complex layout in your Write Post panel? Need to see what the results will be before you post? Since the Post Preview window only shows text and what styles you provide in the wp-admin.css style sheet, you can go one step further and actually preview your post before you publish it.

  • While the post is still marked as DRAFT, click Save and Continue Editing.
  • At the top of the screen in the browser address bar, note the post ID number.
  • In another browser window, type in the address for a normal post on your site, replacing the permalink address, if you use them, with the post ID
    example.com/index.php?p=432

The page in the browser will be a “preview” of your post within your Theme. If you see something that needs fixing, make the change in the first browser window where you are editing your post, click Save and Continue Editing and then click over on the second browser window and do a complete refresh. You should see your changes. You can also run this page through a validator to check for errors.

Remember, this can only be done when the post is a DRAFT. If you have published a post for future posting and you want to check it, you can change the status back to DRAFT and then you will be able to use this method.

Customizing Number of Posts on the Manage Panel

By default, the number of posts viewed on the Manage Posts panel is 15. Well, I often have just that many posts awaiting future release. This doesn’t help me see back to the post that is coming out today. Fifteen posts was just not enough information.

To change the number of posts viewed within the Manage Posts panel, open the wp-admin/edit.php file in a text editor and around Line 70 look for:

$what_to_show = 'posts';
$posts_per_page = 15;

and change that to

$what_to_show = 'posts';
$posts_per_page = 50;

Make the 50 whatever number you want. Do not make it too high as it can eat up a lot of resources pulling so many from the database, if you are worried about things like that.

Below it a few lines is a line that displays on the screen that says:

_e('Last 15 Posts');

Change that to:

_e('Last 50 Posts');

More Administration Panel Tips and Tricks

Here are some more tips and tricks for changing the WordPress Administration Panels and administering your WordPress site or blog.

Our Website Design

DESIGNERS MUST SEE THIS!
If you are considering designing a web page, or if you have ever designed a web page, check out this wonderful series on the evolution of a website from Webreference. You will learn more about what it takes to create, maintain, and establish a successful web page than you will ever get out of a book. Totally brilliant!

As a long time graphic designer and having worked in the advertising and related marketing industries since I was 16, tackling web page design was a natural step. I’ve designed many web pages, some winning honor and recognition. As the first nature photographer with a regular column on a webzine, I’ve had my hands in quite a few “webs”.

Site History

Taking Your Camera on the Road has had a long history. It began as one of the first personal websites on the World Wide Web in 1994 as Compuserve started offering websites to users. Having been on the Internet in one form or another for many years, it was only natural to expand into this new “Internet billboard” venue.

Soon I was designing sites for others and heading up projects for websites for several non-profit organizations. In 1996, I gave up the majority of that work to hit the road full-time with my husband, creating what would eventually become one of the earliest “weblogs” which we called “Journal Thoughts”. Stories of our adventures on the road were put out by email and on our website. Soon the list of email recipients became to large and in 2001 we began posting them solely on our website.

Our domain name changed from vanfossenpro.com to a better title of cameraontheroad.com took place in 2004 after much too long of a debate and research.

In 2003, after two years of movement in that direction, we officially converted our site to be even more accessible through the use of CSS stylesheets. NO MORE TABLES. That’s right. We took the leap and now all of our layout is table-free, except where tables are appropriate such as providing a chart of numerical or text information, like a spreadsheet. As much work as it was to convert the entire site, it is now easier than ever to make formating changes to the pages, and they load even faster than before.

In 2004, with such a vast amount of resources in web pages, images, and content to manage, we switched the entire static HTML site over to WordPress, a very popular weblog tool that we’ve manipulated into a Content Management System (CMS). It is now MUCH easier to maintain our site and add content even faster.

In making these changes, we’ve also received validation and website awards from a variety of sources that prove our pages are designed with accessibility in mind (for disabled and physically challenged folks) and pass inspection with the HTML inspectors out there. We’ve also passed the PIC Platform for Internet Content Selection) validation which ranks documents for content, such as age-sensitive material. We’ve been validated and rated as totally safe for parents to allow their children to view our pages. YEAH!

Validation Certification

Validation for web page design is serious stuff. It is an honor to get the high score that tells the world that we’ve accomplished something in return for all those long hours of problem-solving, overcoming technical and mental challenges, and the sore eyes, back, and butt that comes with the physical investment of time and energy to create accessible and viable web pages. Here are some of our “awards”.

Valid HTML 4.01!World Wide Web ConsortiumBobby World Wide ApprovedBobby WorldWide Approved 508Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Best Viewed With Any Browser CampaignViewable with LynxBackwards Compatible with Old BrowsersICRA - Internet Content Rating Association Approved

Site Statistics

As of October 2003, this website hosted 428 web pages, 88 javascripts, 4,125 graphics and images, and over 1500 links to external websites. As of July, 2005, it now has over 700 web page articles, over 5,000 graphics and images, and about 3,000 external links. That’s a lot to manage.

Management of all this is made much easier through the use of WordPress.

The average number of unique visitors to our site averages about 22,000 a month. We get an average of 500,000 hits a month, though many of those are from search bots.

While the majority of our visitors are from the United States or using English based operating systems and software, over 20% of our visitors are from non-English speaking countries. People visiting our site are mostly equally divided between those seeking information about photography and web page design.

Web Design Directory

We write a lot about web page design and development, mostly sharing our own experiences and expertise. For information on the various topics we write about concerning web design and the Internet, check out these categories:

For information specific to our web page design:

HTML Instruction

Hyper Text Markup Language (HTML) is the code behind the visual presentation of a web page. Created in the 1980s, this “universal language” talks to Internet Browser software giving instructions on how the page should look. In 2004, we moved up to the “modern” HTML to XHTML. Here are some links to help you better understand how HMTL works:

Cascading Style Sheets

A well designed web page consists of two “pages”. The structural page called “HTML” and the presentation style called “CSS” (Cascading Style Sheets). While the html pages hold the content of the page, the CSS holds the coding controls the size, style, and color of fonts, design elements on boxes and other graphic elements, and the page’s design overall. Here are some sites to help create CSS for your website:

Grahpics

JavaScript

Javascripts are “programs” that function on web pages. They come in all shapes and sizes and help the web designer create interactive web pages, and they help the user get more information, fun, and control as they browse. We rarely use Javascript in our pages today, having many of these features replaced by PHP scripts. But these still are extremely helpful. If you would like to use Javascripts in WordPress, we have an article to help you out.

Web Design for Accessibility

If you are designing a web page or work with web page designers, please insist on making web pages accessible for everyone. Simple steps include labeling all graphic images in a way that describes them instead of using a vague caption, and putting a “title” tag in every link which describes the link, and making sure that all of the tag definitions, the text that defines a tag such as font size=”+2″ go into quote marks, whether needed or not. This helps text readers define what is readable and what is not. Incorporating these easy changes allows screen reading software to describe what is on the screen and to not just read the coding as “link here http://www.something.long. and/undescribe/able”. More than 25% of internet and web users are physically and visually challenged, and the number is growing as software becomes more available and reasonably priced. If one in four of your customers had specific needs, wouldn’t you want to meet them?

You can learn about our accessibility policy on our Accessibility Policy.

Web Design Elements

It’s the details that make a page interesting. Here are some sites dealing with a few of those design details:

Designed with help from the W3C organization HTML 4.0

Graphic Programs

The magic of web pages comes from the graphics and here are a few of the programs we enjoy using to create our pages:

Our Web Page Design Credits

In college, my professor in Advertising told me that there was no such thing as a new idea, just new ways of using old ideas. After 25 years in the business, I have to agree with them. We all get our inspiration from somewhere and here here are some of the resources for the inspiration that created these pages:

  • WordPress: We’ve turned this weblog software into a Content Management System (CMS) and we love it. It is easy to use and very powerful, allowing us to do so MUCH more with our website.
  • WordPress Plugins: We use a lot of WordPress Plugins on our site and are externally grateful to the volunteers who create these wonderful extensions to WordPress.
  • Javascript Maker: While we don’t use this any more, having this technique replaced with WordPress and PHP, we still recommend this software. From Byte-Size Software, we use this wonderful software to take redundant text and code within our pages and create javascript “text” from it. For example, all the text, links, and the photograph at the bottom of every page comes from one script file that “writes” the code for that section on every page. If I need to make a change to the content, I can change the script file and not all 400+ pages on our site. It’s a sweet and easy to use program.
  • BladePro: a great plug-in for PaintShop Pro that creates instant wonderful graphic effects on text or anything else.
  • Paint Shop Pro by Jasc: PhotoShop is good but we keep using Paint Shop Pro. Check out their unique BROWSE feature for thumbnail preview images.
  • No Right Click on Images: After ages of fighting the paranoia that comes with displaying images on websites (theft and copyright violations), I found this great javascript from Dynamic Drive Javascripts that allows the user to easily right-click all over our pages but NOT right-click on our images. Excellent!!
  • WordPerfect: If you are into power writing or publishing, nothing can beat WordPerfect.

Other Resources

Help and resources for business, life, and writing

Special Thanks

Everyone works at their own pace and with their own beat. These artists helped Lorelle find her own rhythmn as she wrote.

Software We Use

Favorite Games for the down-time on the road

We all need some time wasters to get through our life on the computer and on the road. Here are a few of ours.

Living in an 800×600 World

My laptop’s motherboard gave up the ghost and had to be shipped out for repair. That left me with two choices: Using Brent’s laptop, or hooking up my new rebuilt server/desktop and borrowing an old monitor from a friend. I went with the latter.

I’ve been living for over two weeks in an 800×600 world and I wanted to tell you about it. Why? Well, mostly because it is important as a web page designer to understand this small screen and low resolution world. And more importantly, because I want to whine. This has been a learning lesson and a pain in the ass arm for the past two weeks.

The Lessons of Living in an 800×600 World

There is a lot to learn when you leave the comfort of your wide screen and high resolution graphics card behind. I learned that eye strain is a choice. Yes, with the lower resolution text gets BIGGER. So it was much easier to read. I didn’t have to squint or enlarge the text size of a single page I viewed. Amazing! I could actually SEE the text on every page.

Unfortunately, only part of most pages were visible per screen so I spent a lot more time scrolling down through pages and pages and pages of what would have been only a few pages with a higher resolution.

I found that on average, I had two, sometimes three, scroll downs to get to “content” on a per page basis compared to what I would scroll down on my high resolution laptop monitor. Continue reading

WordPress Codex Cleanup Week

As part of my ongoing efforts to volunteer within the WordPress Community, to give back a little for the fabulous software program I use, I’ve been working for the past few months to create a “Codex Cleanup Week” from June 18 – June 26.

During the entire week there will be plenty to do to cleanup the Codex, like simple things of copy editing, spelling checks, validation, and general housekeeping. There is also a drastic need for a wide range of articles.

Here is what you need to know if you would like to join us and help:

Volunteers will be ready to help live on the IRC FreeNode #wordpress-docs channel as well as on the WordPress Support Forum.

All help of all levels is welcome. Come join the fun and BYOB and Pizza!