writing a page?

[billbenson]

I'm completely new to wp. I have a zen cart site with the catalog as a subdirectory and a static index page and a couple of other pages in the root directory. I want to use wp to replace those static pages at the root level and add more. This seems like a fairly simple way to get my feet wet with wp. I have a template that matches the zen cart pretty much. Changed colors etc last night, added logos...

The template is very basic. Header, footer, left nav, body to the right of that.

I want to write a very simple index page which will have images on the left and a description of the image product to the right.

This is fairly simple to do by adding a html table where you write the page in wp admin. The pages could potentially get a lot more complicated over time.

The question is this: should I be doing this in tables or using div's?

I think I know the answer, but I wanted to see how others are doing this.

[Patrysha]

If I understand what you are doing correctly...then I'd be doing that with a different sidebar file for the page.

[vangogh]

You probably know if I were coding it I'd be using divs and css as opposed to tables, unless of course the page in question will be presenting tabular data.

It's really up to you though for how you go about coding the single page. Since you're trying to get your feet wet with WordPress, I'd say code it however is easiest for you. That way you'll be able to learn more about WP and how it works and not have to spend time worrying about the code.

Down the line what you could do is develop a new page template specific to the image/description format and even create a plugin that would let you enter both the image and description for single products into the database along with some extra info that would let you specify which page the image/description should be used on.

But for now, you're fine setting things up as a table as you create a new single page, though I'd still probably use css.

[billbenson]

Patrysha, I'm just talking about the content section ie where you fill in the form for a blog or page. The page sidebar which is part of the template would not change.

VG, that's what I figured you'd say . CSS is definately one of my weak points which is why I want to do this in CSS. The actual post / page is quite simple, so its a good starting point.

Keeping this to the equivalent of a 2 col 5 row table for now, I was thinking of simply adding a couple of classes at the end of the css and using those for this and do the layout with div's. To do this, should I use relative positioning or floats. I'd like to keep this theme independent. Using a table should be pretty much theme independant. Would doing it with css also keep it theme independent?

[vangogh]

Positioning sounds like the better approach, but floats are usually the way to go.

What you could do is simply create a paragraph with the description. At the start of the paragraph add your image and give it a class of alignleft (I assume the images will be to the left) The reason for that class name is because it's the one in the default theme and many other themes end up using the same name. Also if you upload an image through the media icon and tell it to align to the left you'll see it gets a class="alignleft added".

If your description does go vertically more than your image, you're probably all set. If the description does go beyond the bottom of the image it'll wrap below the image, but we can easily fix that.

So let's assume instead of uploading through the media link and instead of going with the default class name, you've gone with a new class name (floatleft) specific to these images. Here's the html I would use.

<p><img clas="floatleft" src="path-to-product-image" alt="Text describing image" />Your description for the product here here.</p>

and the css

.floatleft {float: left; margin: 0 10px 10px 0}

You could use img.floatleft if you want, but you shouldn't need to. The margin is shortcut code and the numbers are for top, right, bottom, left, respectively (think of the word trouble to remember the order). I used 10px, but you could use whatever you like.

Above I mentioned how the description text would wrap if it goes beyond the bottom of the image. That includes the margin we added to the image so the text would need to go 10px below the image before it started to wrap. You could simply increase that so the text would need to be longer before wrapping.

While none of the above is really a column it should still achieve the look of a column with images on the left and text on the right. If the images are all the same width it'll work great. If the images are different widths then we'll have to come up with some different css, but I figured it was best to start with the simple.

I think the keep the css theme independent you need a plugin. There's at least one, maybe more that let you add css to the specific page or post only. It does that by using custom fields which you should see below the area where you write the post. If you can't find the plugin let me know. I'm sure I can find it for you.

[billbenson]

Thanks VG. I'll start with that.

However, what I have is:

image1 Descritpion for image1
image2 Description (paragraph) for image 2
image3 Description for image3
etc.

will the float left for each image keep the description paragraph for that image next to it?

I'll start playing around with it shortly. Phone calls are done for my sales day...

[billbenson]

That worked VG, but I want to play with it some more. A couple of unrelated questions however:

• I have a template that has top and side Nav. I'd like the pages to go into category -> pagename in the left column. I read that pages don't have categories. Is there a way to add categories to pages?
• The default location for images is under your theme. This means that if I play around with different themes after having some content, my images will only show up under the original theme. Does it make sense to add an images directory under the root and use that. I realize that that would prevent the image uploading feature from working unless I modified the code.

[vangogh]

Unfortunately categories are for posts and not pages. What you can do is create a hierarchy of pages. You would set up a page called Category and then a page called pagename. If you look to the right, just below where you publish the post there's a dropdown under the Attributes heading that will let you choose a parent page for the new page. So you'd select Category as the parent for pagename.

Your theme may not be coded to display the hierarchy the way you want though it could be coded to display it that way. I think there are some plugins that will also help set up the navigation.

Another option would be to make those pages posts and categorize them as you would with posts. Then when displaying your navigation you could tell your theme to display only certain categories in one place and certain categories in another.

Your images can be anywhere you want. The images specific to displaying the theme will stay in that theme's folder, but every other image can be anywhere you want. If you use the WordPress media link to upload images, by default they'll go into an uploads folder inside of wp-content, but outside the themes folder. Usually you're images will go inside folders specific to the month and year inside the uploads folder, but you can change that if you want.

[billbenson]

back on the floats. Your code works fine, but the text wraps. That's actually fine, but just so I know how to it; if I want to have a true table style. That being image - description to the right. Next image, description to the right (I wasn't able to get the images to line up with the descriptions text), how would I do that?

[vangogh]

Could you send me a link to the site via PM? I may need to take a look at the code to see what's going on and how to fix it.

My guess is it's something in the margins or padding that's not letting things line up, but it could be on any of several elements so it's hard to know which.