Listing all categories on a single page and all pages that belong to a category within a jquery slider in wordpress

Question

I really need some help. I've been banging my head since yesterday morning trying to build a custom design for my girlfriend's baking and cooking recipe blog in wordpress and I'm getting pretty frustrated at this point. I followed the Lynda.com tutorial on making a custom design in wordpress and I managed to separate the template into header, main section and footer, but I kinda got stuck after that. Here is a raw html page to see what the site should look like: http://natalija.co.nf/index.html

And here is where I need some help. I want the main page to be divided into sections, each with a unique ID and data-stellar-background-ratio="0.5" for parallax background effect. These sections would represent categories (cakes, cookies, drinks, dishes etc.). Each category should contain an article with it's own class and data-stellar-ratio="1.5". Within an article there would be an h1 tag with the category title and a jquery slider that would contain links to recipes from that category. So the structure of a section should look like this:

<section id="teroteikolaci" data-stellar-background-ratio="0.5">
    <article class="torteikolaci" data-stellar-ratio="1.5">
        <h1>TORTE I KOLAČI</h1>
        <div class="wrapper">
            <ul class="slider">
                <li class="slide">
                    <a href="#">
                        <img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb01.jpg" alt="random">
                        <div class="bubble">
                            <h5>Čoko mousse torta 1</h5>
                        </div>
                    </a>
                </li>
                <li class="slide">
                    <a href="#">
                        <img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb02.jpg" alt="random">
                        <div class="bubble">
                            <h5>Čoko mousse torta 2</h5>
                        </div>
                    </a>
                </li>
                <li class="slide">
                    <a href="#">
                        <img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb03.jpg" alt="random">
                        <div class="bubble">
                            <h5>Čoko mousse torta 3</h5>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </article>
</section>

As I said, I managed to separate the template into header.php, footer.php and home.php, however I only managed to place the raw html code into home.php which I would like to replace with dynamic content, but I got lost following the guy from the tutorial. I don't want the categories to be separate pages. I want them all to be displayed within the home page. How do I accomplish this? I'm new to wordpress so the dashboard kinda confuses me and I'm not familiar with the wordpress php functions so I would really appreciate if someone could give me some guidelines on how to pull this through.

edit:

        <?php
    $args = array(
        'orderby' => 'name',
        'order' => 'ASC'
    );
    $categories = get_categories($args);
    foreach($categories as $category) {
        ?>

    <section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
        <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
            <h1><?php echo $category->name; ?></h1>
            <div class="wrapper">
                <ul class="slider">

        <?php
    }

    $args = array (
        'post_status' => 'publish',
        'category_name' => $category->slug,
        'nopaging' => true,
    );
    $custom_query = new WP_Query( $args );

    if ( $custom_query->have_posts() ) {
        while ( $custom_query->have_posts() ) {
            $custom_query->the_post();

                // begin your slider loops in here
                ?>

                    <li class="slide">
                        <a href="<?php echo get_permalink(); ?>">
                            <?php the_post_thumbnail(); ?>
                            <div class="bubble">
                                <h5><?php echo get_the_title(); ?></h5>
                            </div>
                        </a>
                    </li>
    <?php }
    } else {
        // no posts found
    }

    /* Restore original Post Data */
    wp_reset_postdata();
    ?>

                </ul>
            </div>
        </article>
    </section>

Jared Cobb Jared Cobb · Accepted Answer · 2014-03-23T16:37:57

WordPress fetches posts / pages using the WP_Query object (and the nice thing is that it's well documented and you have access to use it and customize it). I would recommend that you create a dedicated loop (using WP_Query) for each section. Let me show you how...

Using "TORTE I KOLAČI" as the first example, just before you begin that section you can create a new loop like so:

// WP_Query arguments allow you to filter out / sort which posts you want
// In this example, I'm just telling WordPress to give me ONLY posts under the 
// TORTE I KOLAČI category and NOT to use paging (so you get ALL posts in that 
// category without limits)
$args = array (
    'post_status' => 'publish',
    'category_name' => 'torte_i_kolaci',
    'nopaging' => true,
);

// The Query
$custom_query = new WP_Query( $args );

Note: The category_name is actually the slug of the category (and you can find that in the admin section under each category you've defined).

Now it's time to use the $custom_query.

Each section will still have the wrapper code like so:

<section id="teroteikolaci" data-stellar-background-ratio="0.5">
    <article class="torteikolaci" data-stellar-ratio="1.5">
        <h1>TORTE I KOLAČI</h1>
        <div class="wrapper">
            <ul class="slider">

Except now you'll switch into PHP and utilize functions such as the_post_thumbnail, get_the_title and get_permalink like so:

<?php
if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();

            // begin your slider loops in here
            ?>

            <li class="slide">
                <a href="<?php echo get_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                    <div class="bubble">
                        <h5><?php echo get_the_title(); ?></h5>
                    </div>
                </a>
            </li>
    }
} else {
    // no posts found
}

/* Restore original Post Data */
wp_reset_postdata();
?>

And now that you've looped all your posts, it's time to close out the wrapper...

            </ul>
        </div>
    </article>
</section>

Now you can repeat this pattern for each category you plan to list (SITNI KOLAČI, NAPICI, etc).

Some Notes

I've assumed that your posts are actually posts and not pages (for each item in the loop). If you need pages, you can alter your $args array like so:

$args = array (
    'post_type' => 'page',
    'post_status' => 'publish',
    'category_name' => 'torte_i_kolaci',
    'nopaging' => true,
);

Dig into the WP_Query page on the codex to see how flexible these queries can be.

You might want to make your code even more dynamic and easy to maintain by first fetching your categories and then looping those to output the "outer wrapper". WordPress has a function called get_categories that I use all the time. get_categories also has it's own $args array, so take a look at the docs to see what you can do with it. You would structure your code like so:

$args = array(
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
    ?>

<section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
    <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
        <h1><?php echo $category->name; ?></h1>
        <div class="wrapper">
            <ul class="slider">

    <?php
}

And now the cool part! You can drive all your inner loops (using WP_Query) from the $category->slug value like so...

$args = array (
    'post_status' => 'publish',
    'category_name' => $category->slug,
    'nopaging' => true,
);

Putting It All Together

So this is what the entire code snippet would look like (I added some comments for some of the braces that help you see where certain loops begin and end).

<?php
$args = array(
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
    ?>

    <section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
        <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
            <h1><?php echo $category->name; ?></h1>
            <div class="wrapper">
                <ul class="slider">

                <?php
                    $args = array (
                        'post_status' => 'publish',
                        'category_name' => $category->slug,
                        'nopaging' => true,
                    );
                    $custom_query = new WP_Query( $args );

                    if ( $custom_query->have_posts() ) {
                        while ( $custom_query->have_posts() ) {
                            $custom_query->the_post();

                                // begin your slider loops in here
                                ?>

                                    <li class="slide">
                                        <a href="<?php echo get_permalink(); ?>">
                                            <?php the_post_thumbnail(); ?>
                                            <div class="bubble">
                                                <h5><?php echo get_the_title(); ?></h5>
                                            </div>
                                        </a>
                                    </li>

                    <?php } // end $custom_query loop

                    } else {
                        // no posts found
                    }

                    // reset the postdata
                    wp_reset_postdata();
                ?>

                </ul>
            </div>
        </article>
    </section>
<?php
} // end $categories loop
?>

Hope this helps get you unstuck, have fun!

Listing all categories on a single page and all pages that belong to a category within a jquery slider in wordpress

1 Answers