Setup with custom theme

Hi dev,

I need some help to push me in the right direction.

– I got a custom theme with ajax filtered portfolio displayed through the post category taxonomy ‘projects’.
– We load the the portfolio with a custom page template.
– Currently we use pagination.

So my question is, how should i go about adding ajax load more?

– Should i customize the Repeater Template and than add that code to my portfolio template markup?

– When adding the load more shortcode to my template, the theme breaks until i remove the shortcode. Adding it to the page editor in the wordpress admin area, doesn’t do anything (probably cause i didnt use the repeater template).

This is how the portfolio template loads the posts:

  $query = new WP_Query( $query_args ); 
  if ($query->have_posts()) :?>
        <div class="row">
        	 <?php while($query->have_posts()): $query->the_post();?>
          <div class="col-sm-4">
            <div class="work">
            	<a href="<?php the_permalink();?>"><?php
                  if(has_post_thumbnail( $query->post->ID )){
                  $url=wp_get_attachment_url( get_post_thumbnail_id($query->post->ID) );  
                  $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id($query->post->ID),'thumbnail-project' );     
                   ?>
               <img src="<?php echo $image_attributes[0]; ?>" alt="image1" class="image1">
               <?php } ?>
           </a>
              <div class="overlay">
                <div class="inner">
                  <div class="inner-content">
                     <h2><?php the_title();?></h2>
                    <a href="<?php the_permalink();?>" class="button2">Bekijk project</a></div>
                </div>
              </div>
            </div>
          </div>
      <?php endwhile;?>
        </div>
    <?php endif;?>
    <?php $total=$query->max_num_pages;

Thanks in advance!

Full portfolio template content snippet:

  <!-- Content -->
  <div id="content">
    <div class="container">
      <h2>Vele tevreden klanten gingen u voor</h2><h3 class="sub-heading">Bekijk onze succesvol afgeronde projecten </h3>
    </div>
    <!-- Filters -->
    <div id="filters">
      <div class="container">
      	<?php 
// no default values. using these as examples
$taxonomies = array( 
    'category',
);

$args = array(
    'orderby'           => 'name', 
    'order'             => 'ASC',
    'hide_empty'        => false, 
    'exclude'           => array(), 
    'exclude_tree'      => array(), 
    'include'           => array(),
    'number'            => '', 
    'fields'            => 'all', 
    'slug'              => '',
    'parent'            => '',
    'hierarchical'      => true, 
    'child_of'          => 7,
    'childless'         => false,
    'get'               => '', 
    'name__like'        => '',
    'description__like' => '',
    'pad_counts'        => false, 
    'offset'            => '', 
    'search'            => '', 
    'cache_domain'      => 'core'
); 

$terms = get_terms($taxonomies, $args);
?>
        <div class="mobile-filter-tag">
          <p>AL ONS WERK</p>
          <ul class="group">
            <li class="active"><a href="#">Al ons werk</a></li>
             <?php if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){ ?>
             <?php      foreach ( $terms as $term ) {?>
            <li><a id="mobile-<?php echo $term->slug;?>" href="<?php echo $term->slug;?>"><?php echo $term->name;?></a></li>
            <?php } } ?>
          </ul>
        </div>
        <div class="ajax-content">
        <ul class="group filter-tag">
          <li class="active"><a href="#">Al ons werk</a></li>
           <?php if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){ ?>
             <?php      foreach ( $terms as $term ) {?>
            <li><a id="<?php echo $term->slug;?>" href="<?php echo $term->slug;?>"><?php echo $term->name;?></a></li>
            <?php } } ?>
        </ul>
        <?php $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; ?>
         <?php $query_args = array(
      'post_type' => 'post',
      'posts_per_page'=> get_option( 'posts_per_page' ),
      'category_name' => 'projecten',
      'paged' => $paged
  );
 
  $query = new WP_Query( $query_args ); 
  if ($query->have_posts()) :?>
        <div class="row">
        	 <?php while($query->have_posts()): $query->the_post();?>
          <div class="col-sm-4">
            <div class="work">
            	<a href="<?php the_permalink();?>"><?php
                  if(has_post_thumbnail( $query->post->ID )){
                  $url=wp_get_attachment_url( get_post_thumbnail_id($query->post->ID) );  
                  $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id($query->post->ID),'thumbnail-project' );     
                   ?>
               <img src="<?php echo $image_attributes[0]; ?>" alt="image1" class="image1">
               <?php } ?>
           </a>
              <div class="overlay">
                <div class="inner">
                  <div class="inner-content">
                     <h2><?php the_title();?></h2>
                    <a href="<?php the_permalink();?>" class="button2">Bekijk project</a></div>
                </div>
              </div>
            </div>
          </div>
      <?php endwhile;?>
        </div>
    <?php endif;?>
    <?php $total=$query->max_num_pages;
	
	?>
    <?php if($total>=2){?>
        <div class="pagination">

          <?php
$big = 999999999; // need an unlikely integer

echo paginate_links( array(
  'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
  'format' => '?paged=%#%',
  'current' => max( 1, get_query_var('paged') ),
  'total' => $query->max_num_pages,
  'prev_text'          => __('<span class="arrow_carrot-left" aria-hidden="true"></span>Vorige pagina'),
  'next_text'          => __('Volgende pagina<span class="arrow_carrot-right" aria-hidden="true"></span>'),
  'type'               => 'list'
) );
?>
        </div>
        <?php } ?>
      </div>
      </div>
    </div>
    <!-- /Filters --> 
  </div>
  <!-- /Content --> 

• This topic was modified 5 years, 8 months ago by aristotle25.
• This topic was modified 5 years, 8 months ago by aristotle25.