• Hi there,

    I’ve set up a template to display posts from two separate categories on a single page (using post thumbnails). I’m half way there but I’m a bit of a novice with php and something’s not right.

    Would anyone be able to help? Here’s what I’ve got in my template (catalogue.php):

    <? php
    /*
    Template Name: Catalogue
    */
    ?>
    
    <?php get_header(); rewind_posts(); ?>
    <div class="span-24 first last">
    <div class="content">
    
    		<?php
    		query_posts($query_string.'&posts_per_page=100');
    		if (have_posts()) : ?>
    
    <h4>Publications</h4><hr/>
    	<div class="span-8<?php if ($archive == 5) { ?> last<?php  } ?>">
    		<?php
    			$featured == 0;
    			$my_query_args = array (
    				'cat' => 19,
    				//'showposts' => $is_sticky_count,
    				//'offset' => $is_sticky_check,
    				'showposts' => 50,
    				'offset' => 0
    			);
    			$my_blog_query = new WP_Query($my_query_args);
    			while ($my_blog_query->have_posts()) : $my_blog_query->the_post(); $featured++; /*if ( is_sticky() ) continue*/;
    			?>
    		<div class="post-<?php the_ID(); ?> portfolio-image-wrapper">
    			<?php get_the_image( array( 'custom_key' => array( 'thumbnail-160x160' ), 'default_size' => '160x160', 'width' => '160', 'height' => '160', 'image_class' => 'thumbnail-160x160' ) ); ?>
    			<!-- <div class="category-overlay"><?php if (the_category(', '))  the_category(); ?></div> -->
    			<h6 class="title-overlay"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title() ?></a></h6>
    		</div>
    	</div>
    <?php if ($archive == 5) { ?><div class="clear"></div><?php $archive = 0; } ?>
    <?php endwhile; ?>
    
    <h4>Tapes</h4>
    <hr/>
    	<div class="span-8<?php if ($archive == 5) { ?> last<?php  } ?>">
    		<?php
    			$featured == 0;
    			$my_query_args = array (
    				'cat' => 21,
    				//'showposts' => $is_sticky_count,
    				//'offset' => $is_sticky_check,
    				'showposts' => 50,
    				'offset' => 0
    			);
    			$my_blog_query = new WP_Query($my_query_args);
    			while ($my_blog_query->have_posts()) : $my_blog_query->the_post(); $featured++; /*if ( is_sticky() ) continue*/;
    			?>
    		<div class="post-<?php the_ID(); ?> portfolio-image-wrapper">
    			<?php get_the_image( array( 'custom_key' => array( 'thumbnail-160x160' ), 'default_size' => '160x160', 'width' => '160', 'height' => '160', 'image_class' => 'thumbnail-160x160' ) ); ?>
    			<!-- <div class="category-overlay"><?php if (the_category(', '))  the_category(); ?></div> -->
    			<h6 class="title-overlay"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title() ?></a></h6>
    		</div>
    	</div>
    <?php if ($archive == 5) { ?><div class="clear"></div><?php $archive = 0; } ?>
    <?php endwhile; ?>
    <div class="clear"></div>
    
    	<?php else : ?>
    
    	<?php endif; ?>
    </div>
    </div>
    </div>
    
    <!-- Begin Footer -->
    <?php get_footer(); ?>

    A bit of a mess eh?

    The main problem I’m having is the background (content or span 24) isn’t cascading properly – the thumbnails don’t seem to be attached to it. And also the post titles aren’t showing up underneath the thumbnails. I’ve just pieced the above bit of code from the codex and other files from my theme.

    The page in question is: https://www.mydancetheskull.com/catalogue/

    The website is under maintenance mode but you can log in using these details to see it:

    Username: guest
    Password: guest

    Thanks in advance to anyone willing to help.

    Jordan

Viewing 4 replies - 1 through 4 (of 4 total)
  • I’ve cleaned up your code a little, try this version..
    https://wordpress.pastebin.com/rEfidvNR

    If you’re not using the main query, it’s not needed in the code (ie. the main query is the page the template is attached to). I removed the query_posts and regular loop, but can add that back in if you want to retain or display that page’s data.

    Few markup errors in there (placement of elements), the above should hopefully fix those..

    Let me know how the above works out… ??

    Thread Starter jordanjustkidding

    (@jordanjustkidding)

    Mark, thank you so much for doing all of that! It’s extremely kind of you, I can’t quite believe it… just when I was losing faith in humanity.

    Even the comments to explain each section, brilliant. I really appreciate it, although it didn’t quite achieve the desired effect. Here’s a screenshot of what it produced:

    https://www.mydancetheskull.com/images/screenshot-catalogue1.png

    I don’t fully understand everything that you did but it did help me understand partly what was wrong. Dividing it into two separate arguments is clever and way beyond anything I know. But, using my neanderthal coding, I’ve patched together an example of what I’m trying to achieve (although this still doesn’t look right) but it’s an improvement from my original:

    https://www.mydancetheskull.com/images/screenshot-catalogue2.png

    And the code:

    <?php
    /*
    Template Name: Catalogue
    */
    ?>
    
    <?php get_header(); ?>
    
    <div class="span-24 last">
    			<h4>Publications</h4>
    			<hr />
    			<?php
    			$featured == 0;
    			$my_query_args = array (
    				'cat' => 19,
    				'showposts' => 50
    			);
    			$my_query = new WP_Query($my_query_args);
    			while ($my_query->have_posts()) : $my_query->the_post(); $archive++; $do_not_duplicate = $post->ID; /*if ( is_sticky() ) continue*/;
    			?>
    			<div class="post-<?php the_ID(); ?> portfolio-image-wrapper">
    			<?php get_the_image( array( 'custom_key' => array( 'thumbnail-160x160' ), 'default_size' => '160x160', 'width' => '160', 'height' => '160', 'image_class' => 'thumbnail-160x160' ) ); ?>
    			<h6 class="title-overlay"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title() ?></a></h6>
    			</div>
    
    			<?php endwhile; ?>
    </div>
    
    <div class="span-24 last">
    			<h4>Tapes</h4>
    			<hr />
    
    			<?php
    			$featured == 0;
    			$my_query_args = array (
    				'cat' => 21,
    				'showposts' => 50,
    			);
    			$my_query = new WP_Query($my_query_args);
    			while ($my_query->have_posts()) : $my_query->the_post(); $archive++; $do_not_duplicate = $post->ID; /*if ( is_sticky() ) continue*/;
    			?>
    			<div class="post-<?php the_ID(); ?> portfolio-image-wrapper">
    			<?php get_the_image( array( 'custom_key' => array( 'thumbnail-160x160' ), 'default_size' => '160x160', 'width' => '160', 'height' => '160', 'image_class' => 'thumbnail-160x160' ) ); ?>
    			<h6 class="title-overlay"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title() ?></a></h6>
    			</div>
    
    			<?php endwhile; ?>
    </div>
    
    <!-- Begin Footer -->
    <?php get_footer(); ?>

    I’ve separated the two post categories into two span tags (two x span-24). This isn’t ideal I know, but it seems to work with the exception of the post titles not matching up with the corresponding images. I think the problem here is that the post image and post title both need to be wrapped up inside span-8. Currently I’ve got span-24 here (and I don’t think you can put a span inside a span can you?). span-24 is acting as the background, and if I replace that with the_content (and put span-8 inside it) then the background gets messed up.

    Not sure if that makes sense… but basically the second image is close to what I’m trying to do, it’s just the code isn’t there yet.

    Huge thanks for your help again Mark, very good of you. Any more help you’re willing to give would be massively appreciated.

    Jordan

    Thread Starter jordanjustkidding

    (@jordanjustkidding)

    Problem solved! I just needed to put float:left on the portfolio-image-wrapper and the titles are where they are supposed to be.

    Just want to say a massive thanks Mark – your cleaned up code and thought process really helped me get to the bottom of it, even though I admit my solution is probably not the best way to do it… but it’s as much as I am capable of.

    Thanks again, take care.

    Jordan

    Sorry i didn’t come back sooner, been working(lots of head scratching) on a personal project most of the day..

    Just quickly posting to say i’m happy to hear you have the template all working as desired.

    And if you still need further help, let me know, and i’ll respond as time permits.. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trouble creating a custom archive page’ is closed to new replies.