Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Matt Campbell
9,767 PointsLinking two WordPress loops
Here's what I'm trying to achieve, I have two loops acting on what piece of content.
Example can be seen here: http://www.ultimatewebdevs.co.uk/testspace1/
Clicking on each image brings up the relevant content, left is 10, middle is 9, right is 8. This is fine because all the images have relevant content.
I'm trying to build in an absolute fail safe, what if someone only want to put an image in? This should never happen as this isn't what the slider's for but...just in case.
Problem I have is if I take the middle image's content away, the number 9, then that image takes 8's content so it read as follows: left 10, middle 8, right no content.
How do I link the two loops to not allow content to shuffle along, for lack of a better description? Would really really appreciate some guidance, I've tried using the orderby=>ID query but it's not worked as I'm guessing with no content, there's no ID.
If you could take 5 to help out anyway or Zac Gordon, that would be marvelous.
Thanks.
5 Answers
Matt Campbell
9,767 PointsJust getting into it but, it may be simpler then expected Zac Gordon. It looks like the loop.php files are mainly just processing files, much like what Randy teaches us about sending contact forms. Just link to the php file in question, in this case add-to-cart, and that's that....I think. Nothing has broken yet but I've a long way to go with putting in the wishlist pages and checkout pages etc.
Talk on Facebook if you like Zac, think I popped a friend request over to you.
Zac Gordon
Treehouse Guest TeacherCouple of things:
- If you use a custom post type for this you can make the image required
- I'm not sure how/where/why you're using two loops. I would think it would be one loop and when you click on one image JS or CSS reveals the relevant content, no?
If you could just explain a little bit more about how you're using two loops I think I could give a better response.
Thanks!
Matt Campbell
9,767 PointsHi Zac Gordon.
I'm using two loops due to positioning basically. For the DOM flow, the right arrow needs to go between the content box and the image sliders.
I am already using a lot of JS and CSS to control the reveal and hide. It works fine as long as each post as the same content, image and writing etc as the other posts. Which, thinking about it, is ok as this is for WooCommerce and as such will be a WooCommerce theme.
The issue I'm now facing is adding the add to cart button and price to the box that is revealed once an image is clicked. Not sure where to even start with this little challenge but I'll work it out.
With regards to the two loops being one loop, I'd need to put half the loop in another div and then reposition this to where it is but leapfrogging the arrow. Would putting it in one loop solve this problem?
I've put the slider codes into this codepen: http://codepen.io/Th3M8dH8tt3r/pen/IxBta
So the pen doesn't work but you can see the code now.
Thanks again Zac...you're always an immense help. :)
Zac Gordon
Treehouse Guest TeacherI think if you can put everything in one loop I think that's a really good idea. If not you can reset the loop and output the same loop twice, which I assume you're doing. Adding a class with the post ID to a wrapper around each element can help you easily match components, but I still think it's better to do as one loop.
You can also say if an image isn't there don't display it. I think it's a better approach to prevent wackness from appearing in the first place rather than trying to handle it once it comes up for you.
As for the WooCommerce buttons and the such, yeah... I would suggest installing a basic WooCommerce site so you can examine the code side by side to see what you need to enter. You're gonna need to start exploring the docs and file structure to really figure out all the right calls and such.
Hope this helps!?
Matt Campbell
9,767 PointsThanks Zac. I think I have been trying to overcomplicate things. The slider works perfectly if it's used as it's intended. I don't think it'll actually be possible to break simply down to the nature of what it pulls. If title isn't there, no big deal. It just needs an image, product image, and some text, that fact the price will be in the same second loop and the add to cart will mean that there will always be something there so it's not going to shuffle things.
As for the WooCommerce thing....yeah, not an easy one. I'm delving into the code as we speak.
Think I'll get the site up and running, as I'm going to be webmaster, it won't break, and then I'll revisit getting it down to one loop. Problem at the moment is that the images get totally screwed up despite everything being in at least two containers.
Zac Gordon
Treehouse Guest TeacherOh how we complicate things the first few times around :p
Yeah, let me know what you discover with the loop issue and all the WooCommerce goodness ;)
Zac Gordon
Treehouse Guest TeacherOh yeah, you're absolutely correct. It's just a matter of knowing what file to look for.
Sometimes when you think you should be able to edit source code though you actually have to use the theme hooks instead. Not the biggest pain, unless you're really trying to customize things.
Matt Campbell
9,767 PointsAre you thinking of doing a series on WordPress hooks and packaging plugins because I'd quite like to turn this slider into a plugin as it's received some positive feedback and I'm not even sure what hooks are. I'm sure I'm probably still writing code like a novice, but it's working and I'm getting things done. :)
Zac Gordon
Treehouse Guest TeacherThe plugin course I'm working on now will give you enough to build a slideshow plugin. As for hooks and packaging.. not anytime soon, unless I did an advanced workshop on WooCommerce, which could happen since we already did an intro one.
I would recommend documenting some things as you go, its one of those curves that's definitely worth learning but can take a bit of trolling around before you get exactly what you need.
Good luck!
Matt Campbell
9,767 PointsI look forward to that course Zac. It's not 100% as easy as doing a slideshow normally to doing one in WordPress.
Is that the right link BTW, seems to be a little different to what we were mentioning???