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 →

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

• WordPress Administration Panel Themes – There is a growing list of WordPress Themes for the Administration Panels to quickly change the look and layout.
• Changing the Quicktag Buttons in the Write Post Admin Screen
• Showing the Bad Behavior Stats Plugin in the WordPress Administration Panels
• Linking to Posts, Pages, and Categories in WordPress – From the Write Post Administration Panel, creating links is easy, but links to other posts, Pages, and categories within your own site offers up more challenges.
• Creating Colored Quickags in the Write Post Administration Panels
• Using the WordPress Press It Feature to Quickly Add Posts While Surfing the Internet
• Taking Notes with the Notepad Plugin in WordPress
• WordPress Housekeeping – As administrator of your site, remember to take time to clean up your WordPress site and that includes cleaning out and updating plugins and themes.
• WordPress Maintenance – Like housekeeping, as the site administrator, your WordPress site needs to be maintained to keep it up to date and running smoothly.
• Writing Code in your WordPress Posts – If you share information with others on how to use WordPress, WordPress Themes or Plugins, or other reasons for using code within your posts, here is where you can learn how.
• Using Javascript in WordPress
• Administrating Your WordPress Site
• My Daily Tasks With WordPress – Showing How I Administer My WordPress Site

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:

• Codex Cleanup Week Signup List
• Codex Task List
• Contributing to the Codex
• Styles and Formatting used on the Codex

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!

After months with little or no comment spam, I got hit with a bunch. In the newest versions of WordPress, right out of the box, I don’t see the comment spam unless it slides through, and those are very few. I use a plugin by ColdForged called Paged Comments, which allows me to view the comment spam that is caught, and then delete it. This saves space in my database.

When a ton of caught spam came through, I decided I would try more harsh measures, especially after a few managed to slip into the regular comments. WordPress is really good about catching these, but these particular posts “appeared” safe but weren’t. So I decided to go with the popular Bad Behavior Comment Spam Plugin and see if that made a difference.

Indeed, it did. The result was that I saw a huge reduction in comment spam viewed when using the Paged Comments plugin feature for “include spam”. But it also got my curiosity up. What was it catching and how many?

Continue reading →

I bravely entered the WordPress core programming again and made a few customization changes – nay – improvements. These are for me, but you might learn something from the process of changing your WordPress quicktags javascript file yourself.

Quicktags in WordPress are buttons that sit above your editing box in the Write Post panel of the Administration. They allow you to quickly add bold and italics, links, images, blockquotes, the “more” and “nextpage” tags, and other things. There are even plugins you can use to add more buttons to your quicktags buttons, but I wanted to get into it and fix what was already there.

BEFORE DOING THIS, either get out pen and paper or create a text file called “quicktagchanges.txt” and save it to your wp-admin folder next to your quicktags.js file with the following notes on what you are or have done to this file. This will remind you of the changes and if this file is overwritten in future upgrades, you will have your notes to remind you of how to re-fix things. You have been warned.

As you may have noticed, we have a fairly unique looking blockquote, used for highlighting quotes and blocks of comments or important points that need to be made. It requires some special CSS handling to generate the look of the two hands framing the quote.

In WordPress 1.5x, the quicktags.js is found in the /wp-admin directory. In WordPress 2.x, the file you need to edit is still called quicktags.js but it is found in the /wp-includes/js/ directory. Open the quicktags.js javascript in a text editor and search for blockquote. It should look like this:

edButtons[edButtons.length] = 
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote>'
,'</blockquote>\n\n'
,'q'
);

I added the CSS to style my blockquote look:

edButtons[edButtons.length] = 
new edButton('ed_block'
,'b-quote'
,'\n\n<div class="nickwrapper"><blockquote class="nick"><div>'
,'</div></blockquote></div>\n\n'
,'q'
);

I needed to do the same with my links. I use a lot of external links on my site and they have a special class to make the funky little arrow to indicate that by clicking this link, you will be leaving our site. I also am very clear about making our site be as accessible as possible, so all my links should have a title element to help screen reader programs.

I found the default code in the quicktag.js by searching for href, but then I found two listings. A careful check found that the one I need to change looks like this by default:

function edInsertLink(myField, i, defaultValue) {
	if (!defaultValue) {
defaultValue = 'http://';
	}
	if (!edCheckOpenTags(i)) {
var URL = prompt('Enter the URL' ,defaultValue);
if (URL) {
	edButtons[i].tagStart = '<a href="' + URL + '">';
	edInsertTag(myField, i);
}
	}
	else {
edInsertTag(myField, i);
	}
}

I did some research and found that I needed to completely replace this entire section to this:

function edInsertLink(myField, i, defaultValue) {
    if (!defaultValue) {
        defaultValue = 'http://';
    }
    if (!edCheckOpenTags(i)) {
        var URL = prompt('Enter the URL' ,defaultValue);
        if (URL) {
            edButtons[i].tagStart = '<a href="'
            + URL
            + '" title="' + prompt('Enter a title for the link', '')
            + '" class="external">';
            edInsertTag(myField, i);
        }
    }
    else {
        edInsertTag(myField, i);
    }
 }

Thanks to Carthik at Wordlog for the help.

Now, the last little change I made was to the “bold” and the “italic” tags. I have my bold and italics styled in my CSS style sheet, so I want to use them and not the WordPress default tags of <strong> and <em>. I want the good old <b> and <i> tags. So I changed them. This is how I changed the bold reference. You can figure out the italic one, which is just below this:

edButtons[edButtons.length] = 
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);

Easily became:

edButtons[edButtons.length] = 
new edButton('ed_strong'
,'b'
,'<b>'
,'</b>'
,'b'
);

Quicktag Plugins and Resources

For more information on changing your own WordPress Quicktags or adding more:

• WordPress Quicktags Tutorial – on adding Quicktag buttons
• A Passion for ‘Puters: WordPress Quicktags Documentation
• Weblog Tools Collection: WordPress Javascript Quicktags
• Updated WordPress Quicktags Script for Colorful and Better Quicktags
• RedAlt’s Edit Button Template Plugin – Adds a button to Quicktags
• Add Amazon Links – Quicktags Buttons Plugin

The WordPress Codex has a new look. Not a complete change, but a good start towards a new and more efficient online manual for WordPress users.

Since it’s conception over a year ago, developers wanted to provide a quality documentation site for the anticipated release of WordPress version 1.5. Between the WordPress developers and some awesome volunteers, they came up with the concept of the WordPress Codex. Codex is a “book formed of bound leaves of paper or parchment”, a name worthy of WordPress, coming from the idea of “words” and “printing presses”.

Volunteers began contributing articles, tips, and information and gathering information from the old WordPress wiki and from answers on the WordPress Support Forums, and slowly the Codex started to expand.

Front of old Codex – Click to see full screen version

At first, all links to articles were added to the front, then they were broken down into categories, and then the first design for the front page look came into being, a group of boxes forming two columns down the front page.

This was an interesting and classy look to begin with, when there were only a few links to articles within the Codex. As the documentation grew, so did the links. As more documents came in, more categories were developed to encompass them. Soon the front page became littered with links and the boxes lost their charm. It became harder to read and more difficult to find the information the users needed.

It was now time to really start thinking about the audience.

Identifying Users

The WordPress Codex documentation team of volunteers started talking about how users “use” the Codex. A few things became clear.

Front of old Codex Section Table of Contents – Click to see full screen version

• They want the information now.
• They don’t want to hunt for the information.
• The majority of WordPress users are at the beginner to intermediate level.

In order to get the information they need, as fast as possible, we needed a look that would be easy to use, and to structure the information to match ability.

Getting Started With WordPress

The Getting Started section became the starting place. Here, the documents involved in installation and upgrading, the documents for getting started, would all be kept together. We broke down the information more to match beginner information with beginners, and then specific features for more experienced users.

Working With WordPress

The Working With WordPress section became the hands-on area, with information about the day-to-day process of using WordPress’s functions and features. We introduce the concept of plugins, administration issues like author and user levels, permalinks, comment spam, and website development issues.

Design and Layout

With WordPress version 1.5, having more control over a WordPress site became very important with the introduction of Themes. While applying a Theme to a WordPress site takes only a few clicks, customizing the theme to the user’s needs and imagination becomes more complex, introducing concepts and tools that are new to them. We broke this section into expertise levels, too, highlighting information for the beginner new to CSS, HTML, and PHP.

Advanced Topics

The Advanced Topics provided more comprehensive and intermediate level topics for the more experienced user, giving them the tools and information they need to handle the more challenging aspects of WordPress like customizing WordPress templates and template tags, customizing feeds, learning more about plugins and how to use and create them, and how to learn more about the WordPress database.

Troubleshooting

While WordPress is amazingly easy to use, people run into problems and can find many of the solutions in this section, from troubleshooting installations, dealing with comment spam, design and layout, and how to find more help about WordPress issues.

Development Documentation

With so many people now involved in helping WordPress, as open source code, evolve, documentation for the programmers needed a good repository, and we provided one here. It helps those very experienced users familiar with the inner workings of PHP, MySQL, and programming languages learn more about how WordPress works and what they can do to help.

About WordPress and Announcements

What also became clear is that the majority of WordPress users who visit the Codex have already made up their minds about using WordPress. A lot of them are convinced by friends and family, or it came installed on their server site. The About WordPress section was important to WordPress, but not to the users. Same for the Announcements. They are important to those who volunteer their time within the WordPress Community, but not to the people who visit the WordPress Codex to get help, and that’s the most important purpose of the site.

We now had an order for the front page, based upon user needs.

• Getting Started With WordPress
• Working With WordPress
• Design and Layout
• Advanced Topics
• Troubleshooting
• Development
• About WordPress
• Announcements

Finding the Codex Look

The New Look of the WordPress Codex – Click to see full screen version

The WordPress Codex Volunteers working on this project visited a lot of wikis, many done with the software the WordPress Codex uses, Mediawiki. For the most part, while they come in different colors and a few different looks, many of these are cluttered and packed with massive links and boxes of information. WordPress’ is growing into a very clean site in general and we wanted to keep the clean, low key, look in the Codex.

After all, it’s about the information not the look that is important, and we wanted to keep the look as clean and easy to read as possible.

Carthik, one of the senior documentation team members, talked about making the Codex like a book, an online manual that would guide a user through the process, rather than a jumble of links to information. That triggered the inspiration for creating a clean table of contents look for the Codex.

The New Look of a section table of contents on the WordPress Codex – Click to see full screen version

Basically, we had the main sections, we just needed to help people get to the right subsection of those sections. For instance, if you want to change the design and layout of your WordPress Theme, and you only want information about changing your Theme and Template files, one click will take you to a collection of articles that will help you. Fast access to the information.

We also used the Codex site statistics to help us determined the most visited pages on the Codex. These we added links directly to the page to help the user again get immediate access to the information they need.

The plan was to create a look that was:

• Easy to read
• Easy to scan
• Put the most important information at the top

Through some very creative use of HTML, CSS, and Mediwiki tags, we created a uniform look that complements the WordPress site and puts the focus on the information and access to it.

The Featured Article

The New Featured Article Section of the New Codex Look

Now that the WordPress Codex was about to have a new look, it was also time to take advantage of the amazing amount of documentation available on the Codex. At the bottom of the page we created a “Featured Article” section that highlights a different article or collection of related articles every week. We used the features of Mediawiki to make this change automatic.

It also gives us a chance to show off some of the great articles, writing, and information the Codex has to offer. A lot of effort goes into each article, from conception to editing, and they are always being monitored to make sure the information is as accurate as possible. Thank you to everyone who contributes to the WordPress Codex. This featured article section is just a small way of saying “thanks” to the many who have given so much time to the Codex.

To help you understand the why of things, again, we looked at our user’s needs. While most sites want to have information about their site and purpose, as well as events and activities, at the top, our users want information and help and they want it now. As fun as the featured article section is, it is information that is helpful and entertaining but not critical to the use of the Codex. After a lot of debate and design options, we choose to put it at the bottom, where it stands out and neatly closes the list.

Understanding how a user moves through a site and looks for information plays a very critical role in a site’s layout. We will continue to examine the pages that are most visited by users and evaluate their inclusion in the front page or placement in the subsection table of contents, and maybe we will change our minds and move this new toy, featured articles, up higher, but the goal is to get the information the user needs to him or her as soon as possible. We hope the new look meets that need.

Thanks to the WordPress Documentation Volunteers

We’ve been working on this new design, at least to this stage, for well over seven months. The changes have been small. The documentation team on the WordPress Documentation and Codex Mailing List helped tremendously, as did many of the volunteers who hang out on the very popular IRC Channel for #Wordpress (Direct Link) helping WordPress users get answers to their questions live.

The look of the Codex will continue to change and evolve, but we are really happy with this new look and we hope you will be, too. And if the new look inspires you to get involved, the WordPress Codex needs you. We need fixers, editors, writers, experts, and just folks to help us make the decisions that need to be made about the documentation users like you need to make WordPress work for you.

In order to learn more about WordPress, I started hanging out in the WordPress Codex and on the WordPress Support Forum. Over time, as I became more familiar with the inner workings of WordPress and read much of the documentation in the WordPress Codex, I started answering a few questions in the Forum. Part of giving back to the WordPress Community.

After a while, I found that many of the same questions were being asked over and over again. This is typical, and most of these are addressed in the Codex, but I thought I’d give people another opportunity to find some answers to common questions about using WordPress.

The WordPress Header

The main focal point for most websites and blogs, the header, seems to be of great importance and fascination to many users. Along with that fascination, they come up with a lot of problems with their headers in WordPress.

There is an article in the WordPress Codex that tackles just about all you could want to know about designing, styling, and figuring out your WordPress header called Designing Headers. It takes you into the two main versions of the header’s tags and structure, their styles, and the template tags used within them. It shows you examples of some of the award winning headers from recent WordPress Theme contests, and shows you how to change the header image or header art to better suit your site’s needs.

Here are a few of the most common questions people ask about their WordPress headers.

What are those strange things in my header?

Inside the WordPress header of your Theme’s template files are strange looking code that WordPress uses to generate information you provide in your Administration Panels. These are examples of template tags.

<a href="<?php echo get_settings('home'); ?>">

Inside of this link is a WordPress template tag that looks in your database for the settings for “home”, the front page of your WordPress site.

<h1><?php bloginfo('name'); ?></h1>

The template tag bloginfo() is one of the busiest template tags in WordPress. It features a wide selection of parameters to get different information from your database. In this instance, it gets the “name” of the site as you set it in the Administration Panels. The parameter “description” gets the website description, and “url” gets the URL or address of the website.

How Do I Change the Header Image?

To change the image in the header, the style references are found in the style.css style sheet file or in the head of the header.php template file. Look there for a reference to header, headerimage, or h1 and change the background image reference to the graphic image file you want to replace it.

If you are using a Kubrick/Default WordPress based Theme, a utility tool called Kubrickr changes the header image quickly and easily for you.

How Do I Center My Header Title

Each WordPress Theme positions the text within the header in a different way, often moving it around to accommodate the header art within it. To position the text to the right, left or center, find the h1 styles and add or change the text-align:right, text-align:left, or text-align:center.

Sometimes you want more control over the positioning of the title. You can use CSS positioning properties to move the text around within your header. The positions are left, right, top, bottom, and vertical-align.

To move the h1 to the upper right corner of the header, you might use:

h1 { position: absolute;
  top: 10px;
  right: 20px
  }

Experiment with the different positions to find the right placement for the text.

How Do I Add/Eliminate the Description in My Header

Many WordPress Themes include the blog or site description in the header. To remove or add the description, open the header.php template file.

To add the description to the header, below the h1 tag, add:

<div id="description"><?php bloginfo('description'); ?></div >

To remove it, find the above tag and delete it.

To style your description, add #description to your style.css style sheet and add the styles you want.

Changing Styles and CSS

Since 1999, all web pages are to be styled with style sheets called Cascading Style Sheets or CSS. Basically, the HTML page holds the structure of the page with descriptive titles to each section called “selectors”. In an attached file, called style.css in WordPress, all of the presentation instructions or style properties are set for each selector or HTML tag.

Let’s say that you want to modify your header’s text. It’s centered and you want to change it to right justified. To find your CSS styles in WordPress, you need to do the following:

• View your page in your web browser.
• From the menu choose VIEW > PAGE SOURCE. It will pop up a page with the generated HTML version of your page.
• Look through the code. It may seem overwhelming, but concentrate on finding your header section. Using the browser’s search functions, search for header.
• When you find it, it should be inside of a “container” looking something like this:
  <div id="header"><h1 ><?php bloginfo('name'); ?></h1 ></div >
• This information tells you that the title of your site is in two selectors: h1 and header.
• In a Text Editor program, open the
  

  style sheet file in your Themes subfolder (usually in wordpress/wp-content/themes/themename/. This is your CSS file that holds the presentation styles for your page’s structure.

• Scroll or search through it and look for header. Inside of that will be the first set of formatting references that form the header’s styles.
• If you do not see a reference to text-align:center, search for the next selector involved: h1
• In the h1 section, look again for text-align:center.
• If text-align is listed, change it to text-align:right to make the text be right justified.

If you cannot find references for the header or h1 styles in your style sheet, or if you change it there and it still looks centered, some WordPress Themes put this information in the head of the header.php template file. Look there for the styles.

This technique applies to any of the styles you want to change within your WordPress site. If you are new to CSS, we have some articles that may help you learn more, and you can find more information about WordPress and CSS on the WordPress Codex.

• CSS: The Things You Need To Know
• Understanding CSS Selectors and Attributes
• CSS Design Experiments
• CSS Tips and Tricks – Jazzing Up the Content
• CSS Book Recommendations

Help Me Find a WordPress Theme

There are now more than 300 WordPress Themes available to choose from. From among those, there are many variations on a theme, changing colors or number of sidebars. This number is growing rapidly as more and more people experiment with WordPress Theme designs.

With all these variations and choices, most WordPress Support Forum volunteers can’t keep track of which Themes look like what, so many times this question goes unanswered, or poorly answered.

If you are looking for a WordPress Theme, here are some tips to help you decide.

Look Past the Frosting

For the most part, there are only a few variations on layout and the rest of the look is “paint”. To learn about the core layouts that are most commonly found on the Internet, read Mezzoblue’s Web Page Layouts: Columns and Grids. Basically, you have a header, content area, sidebar, and footer. There are themes with no sidebars (1 column), one sidebar (left or right), two sidebars (one right or left, or two side-by-side on the right or the left), or three sidebars, or even the rare four column, which is more of a newspaper style. Some have a prominent header, some smaller, or none. Some have a footer, some don’t. Everything else is just frosting.

Look For The Architecture

To find the one you want, first decide the layout architecture you need and forget about graphics and color. Do you want the sidebar on the left or right? Do you want a fixed layout or flexible or elastic, stretching the full width of the screen?

All WordPress Themes are Simple

The WordPress Support Forum gets a lot of requests for a very simple Theme layout from which people can play and develop their own Theme. Reality is, most WordPress Themes are simple once you take away all the colors and pictures. In theory, most of them house the same core structure and reference selectors. Most of the modifications happen in the style.css style sheet. There are some Themes that you can completely change the look by only replacing the style.css from another Theme. Can’t get much simpler than that.

Use WordPress Codex Theme List Sorted By Column

Once you have decided upon the layout you want, you can use the WordPress Codex WordPress Theme List which is sorted by column layouts. That will narrow down your search.

Colors, Fonts, Graphics, and Styles Can All Be Changed

Remember, all the colors, graphics, fonts, and titles can be changed from within the style sheet. Ignore the pretty or garish use of colors and concentrate on what you want the site’s layout to appear. After you find a good layout, then you can go through and style it any way you want.

If you need more information on the different parts and pieces of how a WordPress Theme works, read First Steps With WordPress. It will take you through the default and classic WordPress Themes right after your installation, helping you learn what each thing is and how it works. The more you understand about how WordPress works with your site’s content, the better you can style the page to maximize those uses.

• WordPress Approved Themes
• WordPress Theme Viewer
• Blogging Pro WordPress Theme Category
• The “official” WordPress Theme List
• Alex King’s WordPress Theme Competition
• WRC: 1.5 Themes List

I Want to Design My WordPress Theme From Scratch

A lot of people are martyrs and want to get their hands in the dirt and design their own WordPress Theme from scratch. That’s okay. I did that, and then got smarter. Let’s start with the smarter choice.

• First, find a WordPress Theme architecture that you like, be it one or two sidebars, or no header, or whatever you want. Forget about the colors, graphics, and fonts. Just concentrate on the layout.
• Download a couple of Themes you like and put them through their paces on your test site. Do you like the way the single post looks different from the front page, category, and archive pages? If not, try another. If yes, then it’s time to start to work.
• Copy your chosen Theme to a new folder with a different folder name under your wp-content/themes folder. Open the style.css style sheet file in a Text Editor and rename the header section at the top to something different, like “My Test Theme” or “Ripping and Tearing”. Just give it a different name. Depending upon how much you will end up modifying the Theme, you can either leave the author credit inside or not, it’s up to you and the copyright terms of the WordPress Theme.
• Upload the new Theme Folder to your website. From within the Administration Panels, under Presentation, find the new Theme and activate it. You now have a test Theme to work with.

If you aren’t worried about bandwidth on your website or your Internet connection, you can style your site right on the Internet. If you are worried, then use one of the “Sandbox” methods below.

Get familiar with your site’s layout and structure by checking the source code and the style sheet, and begin your modifications one at a time. I recommend that you backup your test Theme folder frequently as you go, in case you make a big mess and you need to go back, but not to start over.

Determined to Start from Total Scratch

If you are determined to redesign your WordPress Theme from scratch, you probably already know how to do this. Here are some basic instructions if you need a checklist.

• Using either the Default or Classic WordPress Themes, generate a test post in your browser.
• Copy the ID and class selectors and HTML tags from the top to the bottom of the site into a Text Editor page. This is the list of the architectural features you can change, also known as your style sheet.
  • If necessary, add selectors to the sections lacking them, like each of the template tags that generate different lists within the sidebar and/or footer. These need to be added to the various modular template files within the test Theme folder.
  • Different tags may appear on different views of your test Theme. Be sure and check the pages generated by the front page, category, archives, search, single, and Page views to find more selectors and tags.
  • When you have your list finished, then save it and call it style.css, replacing the style sheet that came with the Theme.
• Start applying styles to the various structural HTML tags, ID and class selectors within the style.css.

Making WordPress Themes in a Sandbox

If bandwidth is an issue, or you want to really dig in and do a lot of the work on the style sheet before uploading it to the public eye, then consider using one of the following sandbox techniques.

The sandbox technique involves creating a test post with all of your headings and the various ways you may use a post, using blockquotes, bold, italics, and lists. View this file in your browser and then save it to your hard drive. Go into the file and change the style sheet reference to the style sheet on your hard drive that you wish to use. Now you can make changes to the style sheet and use the sample web page on your hard drive, testing and experimenting with looks, before you upload it to the site for final testing.

• Elastic Dog’s WordPress Design Sandbox Article
• Working On CSS and the WordPress Theme (using a sandbox)

WordPress Theme Design Help

Here is a list of articles and resources you may find helpful when designing your WordPress Theme, from scratch or just for tweaking.

• WordPress Lessons
• Finding Your CSS Styles
• WordPress Blog Design and Layout
• Using WordPress Themes
• WordPress CSS Information and Techniques
• Creating individual Pages
• Stepping Into Template
• Template Files
• Stepping Into Template Tags
• Template Tags
• Using WordPress Themes
• Developing WordPress Themes
• Template Tag Layout in simple to read form
• The Loop in Action
• Anatomy of a WordPress Theme
• WordPress Templates and the is functions
• Secrets of WordPress Themeing
• Secrets of WordPress Themeing Part 2

My WordPress Theme is Broken

Generally, before a WordPress Theme is released to the public it should have been thoroughly tested on different browsers and computers, and validated for errors. WordPress Themes usually break after the user gets in and messes with it.

If this isn’t the case, check to make sure that you followed the Theme author’s instructions to the letter. Consider downloading another version, making sure it is the most current version, and uploading it again. Make sure all the parts and pieces are in the right place and called the right names.

Then deselect the Theme for another one, test to make sure that one, the default or class, works on your site, and then switch to the new one and see if that works.

Run a validation of the code on your site and fix any errors found. That often fixes a lot of the problems.

If none of these work, contact the Theme author and check their website to see if anyone else is having similar problems, or if there is a new version, since many authors are updating their templates as people begin to play with them and find little ickies that need fixing.

If you are unable to get help from the Theme author or their site, and you are sure it isn’t you, search the WordPress Support Forum for help and the Internet to see if someone else has had the same problem. If not, then post your question, including your attempts to solve it, in the WordPress Support Forum Themes and Templates section.

I Broke My WordPress Theme

If you are the guilty party and your WordPress Theme is messed up because of something you did, here are some things to check and do before you coming running to the WordPress Support Forum.

• Validate your web page and fix all errors. Be sure to validate specific pages like the front page, single post, Page, archive, and category to be sure the error isn’t within those template files.
• Read through and use the testing and checking resources in the WordPress Codex article on CSS Troubleshooting.
• If you haven’t already, install FireFox Internet browser and the Web Development add-ons. Using these, try the following:
  • Using Outline > Block Level Items puts borders around the different containers on your page to help you track down the specific troublesome area.
  • Using Edit CSS, manually edit the styles for that page that appear in the sidebar, watching the changes take place live as you add or delete styles. If you solve the problem, be sure and copy or save the file so you can put the changes in your style.css file permanently.
• Search the Internet, WordPress Codex, and WordPress Support Forum as someone may have had the same problem and came up with a solution.

If all else fails and you can’t figure out how to solve this, then check with the WordPress Support Forum’s Theme and Template section and ask. Explain what you have already tried to eliminate the normal suspects.

The Sidebar is at the Bottom of the Page

As you start manipulating your WordPress Theme layout and design, often copying codes and styles from other Themes and putting them into your own, you will get structural problems. The header, content, sidebar, and footer are all within “containers”, HTML structures that contain information. Within the style.css style sheet are instructions which tell these containers where to sit on the page, how big to be, and how to look.

Think of these structural containers like dominos. When you change one, they all are affected. If you widened the content container, it will push the sidebar down because now the position of the container next to it has changed and the positioning of the sidebar hasn’t. Go into your sidebar’s styles and change them to accommodate the rest of the structural changes.

Sometimes something else in the container will push the sidebar around. Comment forms feature wide text input areas for names, email, website address, and text that need to be sized so they sit within the content area and not stretch across into the sidebar area. Make sure your comment inputs have a width set to keep it within their container area.

Long words, graphics, links, or blocks of code that don’t wrap will also push the edges of your containers around. If you have a long link featuring no spaces in your sidebar, it can push it’s edges out to overlap the content container, even possibly pushing that container down below your sidebar. Check carefully for long words or graphics that can push the width of your containers around. Either resize the graphic, or put a space in the word, or make whatever change you need to accommodate the “pushy” content.

Sorting Category Lists

Categories are displayed usually in the sidebar and many people want to change the order they are listed in.

There are two template tags that control how the category list is generated:

• wp_list_cats()
• list_cats()

Both work the same way but use different commands to get the same results. By default, you have two ways of sorting your categories: name and ID.

<?php list_cats(FALSE, ' ', 'name'); ?>

<ul>
<?php wp_list_cats('sort_column=name&sort_order=desc'); ?>
</ul>

If neither of these work for you, and you want to control the order, set the order before you start using WordPress. If you want to change it after, it involves a lot of work and digging into the database. So plan your categories ahead of time.

I Have a Picture that Overlaps the Text

If you have a container, such as an excerpt or the content on the front page, category, or archive page views with a graphic inside, it may overlap the next post below. The problem comes from the browser’s lack of ability to determine it’s height compared to the content within it. The image may push down the bottom of the container, overlapping the container below it. The fix comes by forcing the overlapping container to resize its height to accommodate the content within it, pushing the other container down.

If you are sure you want each of these to be the same height, set to accommodate the images which are all the same height, then you can look in the style sheet for that container’s selector and set the height to be a fixed height. But what about the times when that container won’t have a graphic. You’ve now just set the height for everything.

There is a fix or hack that will fix this problem, allowing the container to be whatever height it needs to be to hold the content within it. Developed by Positioniseverything.net, a website dedicated to developing bullet-proof CSS styles and troubleshooting browser bugs, the “Clearfix” hack also fixes another browser bug called the “Guillotine-Bug”.

In your style sheet add the following:

/* add a class of .clearfix to any element 
containing a float needing to be cleared */
.clearfix:after {
  content: "."; 
  clear: both; 
  visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End fix */

To use this, in the container that overlaps the others, like the excerpt container, add the following

<div class="excerpt clearfix">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></h2>
<div class="entry">......

The container will apply the first style and then the second style, which will “fix” the height problem.

I Need to Search and Replace Text in My Database

There are times when you change your website name or address, or you change a particular HTML reference, or need to change a lot of data within your website. Instead of going through every single post where that information is, editing and changing it, which is fine for less then ten changes, you can make a global search and replace within your WordPress database tables.

This is not for the weak of heart, timid, or those who do not regularly backup their WordPress site.

Begin by backing up your WordPress Database. You will find step-by-step-instructions in the WordPress Codex on Backing Up Your WordPress Database.

From within PHPMyAdmin, open your database and check the names of the tables holding the information you want to change. To search and replace text within your post-content table, click on the SQL tab and enter the following with the exact item you want to search for in the third line, and what you want to replace it with in the last line.

UPDATE wp_posts SET post_content = REPLACE (
post_content,
'Item to replace here',
'Replacement text here');

Check and triple check that everything is correct, and when you are ready, click GO. It will go through your database’s wp_posts table in the post_content field looking for the item to replace, and replacing it. The results will tell you how many records were changed.

While setting up my test site, I wanted to have all pings and comments closed. When I moved the test site out to the public, these needed to be turned back on. To turn all the pings back on for every post and Page within my site, I used the following search and replace in my database.

UPDATE wp_posts SET ping_status="open";

If the ping_status was “closed”, it was now “open” and if it was blank, it was also now “open”. I then went through the Pages for my “About”, “Contact”, and other posts and Pages I didn’t want open to comments or pings and turned them off manually.