Easier way to list items?

Hi,

You certainly can do that if you feel it’s necessary, however a link to a page to see the problem will probably be sufficient for simple CSS tweaks, i can test CSS changes without needing access (using browser tools).

Any problems aside from display/layout ones?
Sounds like you’ve got the hard parts done.. ??

Here’s a link to the ferret page: https://hide-e-hole.com/ferrets-awaiting-adoption/

As you can see there’s two empty entries with just numbers, at the top and the bottom. I have no idea what is causing this or where they are coming from. I only posted three ferrets so far and only two of them are showing.

It was fine a while ago, but then it started acting funny and one of the posts disappeared and the extra numbers appeared at the top.

I went in and deleted a field entry then added a new one and used the move arrows to position them. I’m wondering if this is what screwed up the posts.

I got rid of the gray border – it was in her theme’s sylesheet for “alignleft”.

The numbers are the paging links, the results are paged when they go over a certain value, i had it set to 2 for my testing (which is what it looks like you have per page), but i’m certain i set this value to 10 prior to zipping the files (knowing you’d have more entries on the actual site).

I’ll provide some CSS for the paging and to fix the borders making a start now, but i’ll probably need to finish up with you tomorrow as i’m off to bed very shortly.

I’ll see what i can manage in the next few mins though …. ??

I’m not sure I understand about the numbers. Is that something you have to change in the code?

Add this to the bottom of the theme’s stylesheet.

ul.page-numbers,
ul.page-numbers li
ul.page-numbers a
ul.page-numbers span { list-style: inside none;padding: 0;margin: 0;}

ul.page-numbers { float: right; }
ul.page-numbers li { float: left; }

ul.page-numbers span,
ul.page-numbers a  { display: block;float: left;padding: 3px 6px }

ul.page-numbers a { text-decoration: none;color: #fff;background-color: #333 }

ul.page-numbers span.current { background-color:#fff;color:#aaa; }

Should look a little better now.. ??

RE: Page numbers
If there are 15 ferrets to display on the page, and the “posts per page” value in the query (which should be 10, or possibly 2 at present) is less then the total, then the results are split across pages, these links represent the amount of pages these results(posts) are spread across.

To clarify code wise, the two page templates (adopted / not-adopted) both have a couple of lines of code that look like so..

// Setup query parameters
$ferrets->query( array(
	'post_type' => 'ferret',
	'posts_per_page' => 10,

Or possibly..

// Setup query parameters
$ferrets->query( array(
	'post_type' => 'ferret',
	'posts_per_page' => 2,

The 10(or 2) represents how many ferrets posts to display before splitting the results into multiple pages.

I’m off to bed now, but i hope that helps explain things a little.. i’ll catch up with your progress tomorrow, and don’t worry, the CSS bits are easy parts, it’s the home stretch now!… ??

Hey, that’s neat. So those were pagination numbers, eh? Is there a way to set it so that more than two posts appear on a page?

Nevermind, I figured it out. I changed the number of pages in the PHP file to 4.

Updated the post above, just bumping a reply on so you spot the update.. ??

I’ll check back on you tomorrow, but feel free to add any additional questions/queries you may have here ready for me tomorrow… ??

Awesome. Thanks, Mark. I got it figured out now. I’ll contact my client and tell her all about this. Goodnight.

I sent some instructions along with a screenshot to my client so she can start using your procedure to add her ferrets. I linked her to your video so she can see how to add the images. I added a few myself last night and they look great. The only question I have is where do the ferrets go if you click “yes” to adopted? Is that already coded into this setup to produce a separate page? If so how do we find it?

Nevermind, I figured it out. They go to that second template page you had me create for the “adopted” ferrets, doh!

It all seems to work pretty slick. I don’t think we need to worry about the styling, unless you want to tell me what elements I need to find in order to style the two pages.

Thanks! I’ll let you know what my client thinks once she’s tried it out.

Hi Doug,

The ferret posts don’t really go anywhere so to speak, the templates simply pull in ferret posts based on the adopted key.

The adopted template pulls in posts that don’t have the adopted key set to No
The non-adopted template pulls in posts that don’t have the adopted key set to Yes.

If it’s not set at all for a given ferret entry (unlikely to happen unless the more fields plugin is uninstalled), then it won’t appear on either page with one of the above templates attached.

The more fields plugin uses custom fields, just like we doing before, the advantage it gives us though is the ability to have these fields on screen, without the need to select the appropriate fields from a dropdown, as we initially had to do using the regular custom fields box.

Hope that helps… ??

EDIT:

I don’t think we need to worry about the styling, unless you want to tell me what elements I need to find in order to style the two pages.

Would you mind clarifying what you want to style and i’ll do what i can to help.. ??

I just meant basic styling, like borders, colors, what not. It’s not really a big deal, unless my client wants something styled. But I think it looks fine the way it is for now.

Depends what you want to style, but any page featuring ferret posts does have two unique classes.. ourferrets and description ..

The container div with the ferret description (the post’s content).

.entry-content .description {  }

The container div with the ferret post image and the bio.

.entry-content .ourferrets { }

Each page also has a set of unique classes applied to the body so you can make the CSS above more selective (one of them being the page template name). For example to target pages using the adopted and non-adopted templates you could do the following…

body.page-template-ferrets-adopted-php .entry-content div.ourferrets { border: 3px solid #fff }
body.page-template-ferrets-adopted-php .entry-content div.description { border: 3px solid #ccc }
body.page-template-ferrets-notadopted-php .entry-content div.ourferrets { border: 1px solid #666 }
body.page-template-ferrets-notadopted-php .entry-content div.description { border: 1px solid #a00 }

Of course the borders are just an example.. ??

Hi Mark,

My client is very happy with what you did for her. She’s been having a great time making ferret posts. The only odd thing is that when she picks the featured image, sometimes it doesn’t re-size it and it ends up being posted at it’s regular size. Did you write some code for the featured image to be thumbnailed? I was thinking you did.

Thanks for everything ??

I can’t say i’ve used the post image facility alot myself, i was under the impression that happened automatically for images attached using the post image feature..

However, when you’re setting up the post image, just above the link is a set of radio buttons to set the size, i think selecting the size here prior to clicking the “Use as featured image” will appropriately set the size.

Once you’ve selected a size, if it’s the wrong one, i think the only way to fix the size issue is to detach and reattach that image, but setting the correct size(eg. thumbanil) when reattaching..

??