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>