Just like last time, I’m going to give you a brief rundown of what was changed and why I felt those changes were necessary.

1. List styles in comments: Prior to version 0.12, when users would include list styles in comments (<ul>, <ol>, <li>), the styling would essentially “break,” and the template would completely mess up in IE 6. A couple of waves of my magic wand over the stylesheet fixed this problem easily, though, so now list styles in comments should look like this.
2. Number of posts on first page: After including support for the “Links” box in the sidebar in version 0.11, I felt as though showing only two posts on the front page didn’t properly balance the newer, longer sidebar. Therefore, I changed the default number of posts on the first page to 3 instead of 2, so now things look a bit more balanced. Of course, if you don’t use the <!--more--> tag to display teasers on your front page, then this likely will make little or no difference to you.
3. Structure of the zipped file: Thanks to George, I’ve changed the zip file so that it unzips a folder instead of just a bunch of files. I would like to note that Mac users have never had this problem, as the zip file automatically unzips to a folder that corresponds with the name of the zip file. Be that as it may, I am a firm believer that Windows still drives the ship, so I’m in favor of doing anything that improves usability on that end of things. As a result, version 0.12 now features a new and improved zip file!

If you want to upgrade…

Only two core template files have been changed in version 0.12 - style.css and index.php. Therefore, if you would like to upgrade to version 0.12 without overwriting any changes you’ve made to other template files, then simply copy style.css and index.php to the PressRow theme directory.

The Problem

The header code was constructed under the assumption that your permalink structure is date and name based. Unfortunately, the WP default permalink structure is not date and name based. Thus, whenever someone who is using the default permalink structure attempts to use the PressRow navigational bar, they will encounter this problem (i.e. their links won’t work).

At this point, you may be asking yourself, “Why did he create the theme to work with a permalink structure that differs from the default structure?” Luckily, I have a good answer this time! The WordPress default permalink structure carries absolutely no semantic meaning in terms of the URL construct. It’s got question marks, equal signs, and numbers, and it’s just plain ugly. The date and name based structure, on the other hand, carries quite a bit of pertinent information with it, including chronology and a shorthand version of the post name itself. Most WordPress “purists” opt for this type of permalink structure because there is a growing movement on the web to use URLs that actually mean something to humans (rather than just to servers).

Fortunately, there are two possible solutions to this problem, and you can implement whichever one suits your needs best.

The Solutions

Solution #1: Change your permalink structure
Log in to your WP Administration panel and click on the “Options” link. Next, click on “Permalinks” in the sub-navigation menu. Choose the second option (”Date and name based”) and then click on the “Update Permalink Structure” button. If you’re lucky, WordPress will automatically update your directory structure, and no further editing will be necessary. If you’re not so lucky, you’ll have to do a minor .htaccess modification in order to complete the permalink structure transition.

In the event that you have to do an .htaccess mod, WordPress will actually supply you with the necessary code to make everything happen. Simply copy that code, and then start a new document in the text editor of your choice (but not the standard Notepad that comes with Windows!). Paste the code in the new document, and save the file as simply “.htaccess” (the preceeding period is crucial). Once you’re done, upload that file to your core WordPress directory folder.

Obviously, if you already have an .htaccess file, then you’ll have to concatenate the existing file with this new snippet of code that WordPress has provided.

I realize that this explanation is somewhat cryptic, and if you’d like some more information, you ought to check this out.

Solution #2: Change your header file to work with your directory structure
If you don’t want to change your permalink structure as indicated above, then you can always modify the header to accommodate your newly-created “archives” and “about” pages. Whenever you create a page, it is assigned a unique identity number. In order to make your navigational links work correctly, all you have to do is modify the destinations of the “archives” and “about” links in the “Header” template file.

Before modification, your “Header” contains this code:

<li><a class="archives" href="http://analyticaasia.com/archives/">archives</a></li>
<li><a class="about" href="http://analyticaasia.com/about/">about</a></li>

After modification, it should look something like this (changes indicated in red):

<li><a class="archives" href="http://analyticaasia.com/?p=6“>archives</a></li>
<li><a class=”about” href=”http://analyticaasia.com/?p=7“>about</a></li>

If you still have problems, please let me know in the comments!

Here’s a complete run down of the fixes for those of you who are interested in that sort of thing:

• Navigational menu items were appearing stacked on top of one another in IE 7 because it did not recognize the “hacks” that were in place to help with IE 6. Essentially, these hacks were unnecessary to begin with (my fault), so I removed them and implemented smarter code. Not surprisingly, this fixed the IE 7 problem.
• The spacing of the posts on both the home page and the individual post pages was inconsistent in IE 7, sometimes rendering entire posts within a box that was only 100px wide (or less). Once again, this was the result of an unnecessary hack, and the solution was simply to define a standard post width. The post column is 500px wide, and once that was declared on the stylesheet, the problem was fixed across all browsers, and a second hack was eliminated. The lesson here is that when it comes to spacing, if you can define a width, be sure to do so!
• When commenters would begin their comment with a blockquote, the blockquote would actually encompass the introductory part of the comment, which includes the name of the commenter along with the time it was posted. I added a simple clear: both; declaration to the actual comment portion of the comment styling, and this fixed the problem.
• When I released version 0.1, I was doing my best impersonation of a lobotomy patient, because I forgot to include a link to the RSS feed! Thankfully, I came to my senses, and now a box on the sidebar is dedicated solely to displaying your feed. Whew!
• Continuing with the lobotomy theme, I had also left out support for the Link Manager, which is a very handy feature of WordPress that tons of people rely upon. The bottom item in the sidebar (at right) is an example of what the links will look like, and all of this comes nicely pre-packaged for ya. Hat tip to Frank on this one.

And there you have it, folks. If you ever come across any bugs, I want to know about them! Send in a tip via comment on this site, and I’ll get cracking on a fix right away. Thanks!

There are four main header images pre-packaged with PressRow, and they apply to the following pages:

• Your main blog page: viewable on this very page, just scroll up!
• The archives page (or any page created with the “Archives” template): view here
• The “about” page (or any other page created with the default template): view here
• 404 error pages: view here

All of the header images have the same width and height specifications, as they are each 770px wide by 200px tall. Find some pictures that you like; use your favorite photo editing software to crop them into these dimensions; and then upload them to the “images” folder that lies within the “PressRow” theme folder. In case you’re not familiar with the process, you’ll need an FTP client to access these directories.

Once you’ve uploaded your pictures, you’ll need to modify a few lines of code in the PressRow stylesheet. To begin, log in to the WordPress administration panel and click on the “Presentation” link. Next, click on “Theme Editor” in the sub-navigation menu. Once you’ve done that, a list of your theme files will appear on the right side of the page. The very first link in this list should read “Stylesheet,” and you’ll want to click on that. This action will load up the stylesheet in the editing box, and your screen should now look something like this:

Scroll down through the style.css file until you see a line of code that looks like this:

/*---:[ header styles ]:---*/

Underneath that header, you’ll want to change the lines of code indicated below:

.blog #pic { background: url('images/churchill.jpg') no-repeat; }

.archive #pic { background: url('images/books.jpg') no-repeat; }

.about #pic { background: url('images/deuce_stream.jpg') no-repeat; }

To make the appropriate changes, simply edit the .jpg files in the image references in those lines of code. To illustrate, if you wanted to change your main blog image to the file “my_cool_pic.jpg,” then your new line of code would look like this:

.blog #pic { background: url('images/my_cool_pic.jpg') no-repeat; }

Easy as pie!

The Keen Observers Among You…

may have noticed that I did not include any reference to the 404 page header image in the above code. This is because that image must be handled differently, due to what I believe is an absolute file path issue with the way that the server “serves” 404 pages.

At any rate, if you would like to modify the header image on your 404 pages, all you have to do is edit the header_404.php file within the Theme Editor. Simply upload your new image following the instructions in the first part of this post, and then change the “oops.jpg” file reference by adding the name of your new image. Cool?

To begin, log in to your WordPress administration panel and click on the “Presentation” link. From there, choose “Theme Editor” from the sub navigation menu. Once that page loads, you should see a vertical list of links on the right that correspond with the PressRow theme files. Click on “Sidebar” from the list, and you should end up with a screen that looks like this:

Essentially, the sidebar is a list of items (elements), and each block of content - such as the search block or the download block on this page’s sidebar - is an individual list item. Items are denoted by the outermost <li> tags.

As you might expect, elements in the sidebar appear in exactly the same order that they are coded. Therefore, if the search block appears first in the sidebar code, then it will also appear first in the sidebar on the live site. Gravy, right? Groovy.

Add Your Own Block of Content

Now that you know what’s going on, let’s add a block of content to the sidebar to get you started. For the purposes of this example, we’re going to add a simple block of content that tells visitors a little bit about you, the author. Think of it as a mini “about” page.

Insert the following code between the “Search It” <li> tags and the “Recent Entries” <li> tags:

<li>
   <h2>About the Author</h2>
   <div class="sidebar_section">
      <p>Hi, my name is Press Row. I was born on May 10, 2006, so I'm not very old yet!</p>
   </div>
</li>

If you’ve done everything correctly, you’ll get a result that looks like the picture here. Certain tags - <p>, <ul>, and <li> - have been pre-formatted for use in the sidebar, so you’ll be safe as long as you stick to those.

Pictures are one of the very few universal elements you can use to really seize the attention of your audience, and the more effectively you are able to display them, the better off you’ll be. With that in mind, PressRow comes with a set of pre-defined CSS classes that are dedicated solely towards image handling. When you want to include an image, simply add one of these classes and voila! Instant image presentation gratification!

Here’s a brief summary of the included classes along with their behaviors:

• left: aligns the image to the left, adds a frame to the image, and wraps the text around it
• right: aligns the image to the right, adds a frame, and wraps the text
• center: aligns the image in the center of the column, adds a frame, but does NOT wrap text
• left_off: aligns the image to the left, wraps the text, does NOT add a frame
• right_off: aligns the image to the right, wraps the text, does NOT add a frame
• center_off: aligns the image in the center, does NOT wrap text, does NOT add a frame

You are advised not to use images larger than 486px wide within the context of the design, as that could “break” the design in Internet Explorer. Technically, images that use the “center_off” class can be 500px wide, but don’t press your luck, ok?

Although it may seem strange to some, it is not recommended to use the built-in WordPress image handling functions. Specifically, I’m talking about the alignment option that accompanies image inclusion in WordPress 2.0+. If it were up to me, I would blast the WYSIWYG editor all to hell, and then I’d require that everyone use the regular old post editor. The WYSIWYG editor throws tags around where they’ve really got no business, and the end result is usually some very sketchy formatting. In order to avoid this altogether, I recommend only using the old-style post editor.

Using Sub-Headlines in Posts

See that headline above? You can easily include elements like this in your posts without having to do any on-the-fly styling. All you have to do is switch to the HTML viewer and enter your headline between <h3> tags. When you’re done, click on update, and you can continue writing your entry.

Lists

There are three types of lists you can use in your posts: unordered lists, ordered lists, and definition lists. First, let’s look at an unordered list:

• Item one
  • Nested item 1
  • Nested item 2
  • Nested item 3
• Item two
• Item three
• Item four

If you prefer to number your list items, you can use an ordered list like this one:

1. Numero uno
2. Numero dos
3. Numero tres
4. Cuatro!

If you’re really into content presentation and organization, then perhaps you also like to make use of definition lists. You could use one of these in the following context:

Press Row, familiar

Where writers sit while covering sports events

Press Row, new

Where writers blog while covering the new media revolution

Blockquotes

Occasionally, you may wish to include a quotation to help relay a message to your audience. PressRow makes this both easy and beautiful via the incorporation of blockquotes, which look like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra velit vel purus. Nunc tempor, urna sit amet euismod elementum, erat tellus auctor erat, non condimentum dui wisi non orci. Nam fringilla leo sed dui. Vestibulum ac elit sit amet diam vehicula scelerisque.

To use a blockquote in your posts, simply place the quotation text between <blockquote> tags!

Images

Excellent handling of images can bring your blog to life, and because this topic is so important, it’s been given its very own post, which you certainly ought to read!

Learn more about image handling with PressRow.

Front Page Post Display

On this test site, I’ve employed a method of displaying posts on the front page that I think is far superior to simply listing a bunch of posts one after another in their entirety. What you see on the PressRow home page are “teasers,” or snippets of text that are designed to pique your interest and to get you to click through to read the rest of the article. Displaying posts in this manner has a twofold benefit for your site:

• First, it encourages putting additional thought into the introductory copy of your post. The more enticing you can make it, the more you’ll be able to draw in your readers and establish a true connection with them.
• Second, it increases the total number of pageviews on your site. If your copy is good, then readers will want to click through to read the rest of your articles, and thus you’ll gain at least one more page view per reader. One aspect of this that you may not have considered is the fact that once users have clicked on one link on your site, they are far more likely to click on another. Additionally, by getting users to click at least once, you’ve gone a long way towards focusing their attention on what you have to say and what you have to offer. This is a powerful connection that should not be overlooked, and I absolutely recommend doing whatever you can to enhance user/site interaction.

In order to start using teasers on your front page, all you have to do is use the <!--more--> tag at the beginning of the first paragraph that you don’t want included in the teaser. So, if I had the following paragraphs:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus urna, volutpat nec, congue eget, congue id, lectus. Sed rhoncus lectus at orci. Pellentesque sit amet lectus et nisl iaculis accumsan. Donec massa. Aliquam non nulla.

Donec lorem odio, dignissim a, mattis eu, molestie in, sem. Nunc condimentum sodales est. Fusce non ligula sed nisi aliquet fringilla. Curabitur nec enim vitae libero dictum egestas. Curabitur lobortis molestie libero. Nulla vestibulum consequat quam.

Now, I only want the first paragraph to appear in the teaser, so I’m going to edit my post to make it look like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus urna, volutpat nec, congue eget, congue id, lectus. Sed rhoncus lectus at orci. Pellentesque sit amet lectus et nisl iaculis accumsan. Donec massa. Aliquam non nulla.

<!--more-->Donec lorem odio, dignissim a, mattis eu, molestie in, sem. Nunc condimentum sodales est. Fusce non ligula sed nisi aliquet fringilla. Curabitur nec enim vitae libero dictum egestas. Curabitur lobortis molestie libero. Nulla vestibulum consequat quam.

Booyah! Only the first paragraph will be displayed on the front page, and you’ll get all kinds of page views!

Classy yet simple, PressRow deftly handles all of your dynamic publishing needs. Special care and attention have been given to post styles so that you can benefit from the professional impact that accompanies a well-crafted blog entry. Our development team believes that you deserve a set of tools that will enable you to produce the best online publication possible, so we developed PressRow to accomplish just that.

To learn more about getting the most out of PressRow, please check out the following resources:

• Professional posting tips
• Image handling
• Customizing your sidebar
• Modifying header images

A special thanks goes out to the fine folks over at Find Credit Cards, as they’ve been kind enough to sponsor the continued development of PressRow.