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.

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.

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 Tips and Tricks – Template Files, Styles, and Themes
• The WordPress Loop
• The WordPress Loop in Action
• Customizing the WordPress Read More Tag
• WordPress Template Tags
• New to WordPress Template Tags? Stepping Into Template Tags
• WordPress Conditional Tags
• Alphabetizing WordPress Posts
• Common WordPress Support Questions
• Creating Multiple Single Posts for Different Categories

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.

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 →

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.

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.

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

When 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:

• Information on hiding CSS from different browsers
• CSS filters – What filters work with which browsers
• Hiding CSS from browsers
• W3 Development – Summary Chart of How to Hide Different Things from Browsers
• You’ve Got to Hide Your Styles Away
• Star HTML Bugs

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.

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.

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.

• Bugs in Mozilla/FireFox
• Bugs in all browsers

Changing Default or Kubrick Theme

The 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.

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 →