CODEWITHSUNDEEP
phphtmlloopswordpress
Asaf Lopez
Asaf Lopez

Reputation: 557

Wordpress nested loop prints wrong de html code

I have a problem with my nested loops in wordpress, my code is printing html elements out of their places, here is my code:

<div id="content">
    <div class="page-content">
        <ul class="menu-children">
        <?php
        $children_args = array(
            'post_type'      => 'page',
            'posts_per_page' => -1,
            'post_parent'       => $actual_page_ID,                               
            'order'             => 'ASC',
            'orderby'           => 'date',
        );

        $children = new WP_Query($children_args);
        //var_dump($children);

        if ( $children->have_posts() ) : ?>

            <?php while ( $children->have_posts() ) : $children->the_post(); ?>


            <a class="menu-child" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <li class="menu-child-li">
                    <?php the_title(); ?>
                    <?php
                    //I get the title of the child page because is the name of the category i want to retrieve
                    $the_post_title=get_the_title();
                    $products_args = array(
                        'post_type' => 'alquiladora_product',
                        'category_name' => $the_post_title
                    );

                    $products = new WP_Query($products_args);

                    if ( $products->have_posts() ) : ?>
                    <ul class="sub-menu-child">

                        <?php while ( $products->have_posts() ) : $products->the_post(); ?>
                        <a class="menu-child sub-menu-child-a" href="<?php the_permalink(); ?>">
                            <li class="menu-child-li sub-menu-child-li">
                                <?php the_title(); ?>
                            </li>
                        </a>
                        <?php endwhile; ?>
                    <?php endif; wp_reset_query(); ?>
                    </ul>
                </li>
            </a>

            <?php endwhile; ?>

        <?php endif; wp_reset_query(); ?>
        </ul>
        <script>
        $(document).ready(function(){
            /* navigation sub-menu display */
            $('ul.sub-menu-child').parent().hover(function(){
                $(this).children('.sub-menu-child').slideToggle(300);
            });
        /* end navigation menu */
        });
        </script>
    </div>
</div>

It is supposed to print an ul inside an ul if the category name matches the page child title, and I have 2 examples: in this page it works fine: http://mginteractive.com.mx/alquiladora/productos-para-eventos/

but in this one doesn't: http://mginteractive.com.mx/alquiladora/productos-de-construccion/

After inspecting the elements in the second example, shows that the code prints only the first -li- element inside the -ul- and the other -li- elements out of the -ul- container. What am i Doing wrong within the loops? or How can I fix it?

Upvotes: 0

Views: 109

Answers (1)

VolkerK
VolkerK

Reputation: 96159

                if ( $products->have_posts() ) : ?>
                <ul class="sub-menu-child">

                <?php endif; wp_reset_query(); ?>
                </ul>

The opening <ul class="sub-menu-child"> is conditional, the closing </ul> isn't, which leads to output like

<ul class="menu-children">



            <a class="menu-child" href="http://mginteractive.com.mx/alquiladora/productos-de-construccion/modulos/" title="Módulos">
                <li class="menu-child-li">
                    Módulos                                     </ul>
                </li>
            </a>

see the </ul> after Módulos? Módulos doesn't have posts therefore the "sub-ul" hasn't been opened, but closed ...the outer <ul>.

Upvotes: 1

Related Questions