Sensorial’Org

http://www.signedbyv.com

I’m still not completely satisfied with how some of the pages are laid out, but that could wait. Please let me know if you run into any problems.

Problems Solved and Lessons Learned

Multiple Loops

First to refresh your memory of the WP Loop:

<?php if (have_posts()) ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Do stuff... -->
<?php endwhile; ?>


have_posts() checks the post array to see if there are more posts. the_posts(); increments the post counter and populates $post object with the relevant post information. See documentation for more info.

What I wanted: A static WordPress page with some content, and a list of posts of category X.
What I did: I had the page implemented the default Page Template which included the header, the footer, and The Loop as its body. The page content was a script (executed with ExecPHP) that set up another query using query_posts to get the list of posts. I reasoned that the template would grab the page content–the script, which would be executed in turn.
What I got: A page displaying every post twice
What the problem was: Pages are modeled like posts in that the content is accessed through The Loop. Furthermore, query_posts uses the same $wp_query object that The Loop uses but creates a new posts array and resets a new counter. I don’t know the details of the implementation, but I suspect that after the inner query (my script) is executed in the first iteration of The Loop, the counter and the array is somehow reset so that The Loop iterates through the entries again.
How I solved it: Create a new page template that has the structure: get_header(); The Loop; My Loop; get_footer. The shortcoming is that, you cannot nest page-dynamic content between The Loop and My Loop.

IE6 Messed Up Columns

What I wanted: Two column structure of X width.
What I did: I floated both columns to the left, with respective margins and paddings.
What I got: Two column structure of X + x width which broke my layout.
What the problem was: IE6 doubles the margin in the direction of the float. For example, if you have a left margin of 10px and that container is floated to the left, the left margin will appear to be 20px in IE6.
How I solved it: Add display: inline; to the element that is being floated. With a specified width the block behaviour of the element shouldn’t change.

IE6 Peek-a-Boo bug

While I didn’t encounter this problem in my redesign, I figured I should document it while I’m at it.

The symptom: You have a background associated with a container that’s being floated, but the content that said container holds seems to disappear when you view it in IE6. However, when you scroll the page, the content magically reappears with a choppy background.
Possible Fixes:

1. Add min-width: 0 to the affected element.
2. Add position: relative to the affected element and/or the parent element.
3. Add padding: 1px to the parent element and margin: -1px to the child element.

IE6 PNG Fix

What I wanted: Transparent PNGs
What I got: Opaque PNGs
How I solved it: IEPNGFix developed by Angus; to get it compatible with WordPress and its themes, upload the HTC file along with blank.gif into the themes directory. In the theme’s stylesheet, reference the HTC file (or the PHP file if the server isn’t returning the correct MIME) using absolute paths (i.e., paths starting with “/”; it should be something like /path/to/your/wordpress/installation/wp-content/themes/iepngfix.htc), and be sure the reference the image in the HTC file with the same absolute path.

Furthermore, to ensure that it does not break your layout, make sure that the affect elements (elements that are, or uses, a transparent PNG image) specify its dimensions. If you’re using transparent PNGs as a background, you’ll need to specific the container’s width as pixels or percentages. In the event that you’re specifying width: 100%, you’ll have to pass on all paddings and margins to the children because the browser box model (except for IE5) does not include paddings and margins in the width.

Changing URL Woes

What I wanted: Since the portfolio was already online, I did the development elsewhere (say /folder/ in case I broke something. When the new site was ready to be launched, I needed to redirect my domain to the new folder.
What I did: Go into Wordpress’ General settings and change the URL.
What I got: All the images to YAPB broke because they were still looking into /folder/…/upload/ for the images.
How I solved it: When you change the URL in Wordpress’ general settings, the upload directory is not automatically corrected. You need to change that explicitly in Miscellaneous settings. This will correct the broken thumbnails.

However, if you have YAPB’s “Display as Thumbnail…” turned off (Settings > YAPB), i.e. you’re getting the actual image instead of the thumbnail, the actual images will still be broken. That’s because the image source is stored in the database. If you don’t have a lot of images, the easiest way to correct it would be to reupload the image. It will give you an error–about being unable to unlink the image because it does not exist, which is correct because the URL has changed. Error aside, the image source in the database is corrected, and everything should be fine now.