Title: Implementing Foundation / Custom CSS
Last modified: August 31, 2016

---

# Implementing Foundation / Custom CSS

 *  [lschatzkin](https://wordpress.org/support/users/lschatzkin/)
 * (@lschatzkin)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/)
 * I’d like the results of the Load More button to display the results in two columns
   as the posts are above. How do I add the custom class to the results? This is
   for Latest Stories on this page, which is using Foundation: [http://therealdemo.therealnews.com/](http://therealdemo.therealnews.com/).
 * [https://wordpress.org/plugins/ajax-load-more/](https://wordpress.org/plugins/ajax-load-more/)

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958012)
 * Hi lschatzkin,
    You would add your column markup to the repeater template.
 * for example.
    **You WordPress template**
 *     ```
       <div class="row">
       <?php echo do_shortcode('[ajax_load_more]'); ?>
       </div>
       ```
   
 * **and then your Repeater Template**
 *     ```
       <article class="medium-6 columns">
       <h2><?php the_title(); ?></h2>
       <?php the_excerpt(); ?>
       </article>
       ```
   
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958014)
 * Or you could maybe do it all right in your repeater template.
 *     ```
       <?php
          if($alm_item%2 == 1){
             echo '<div class="row">';
          }
   
          <article class="medium-6 columns">
          <h2><?php the_title(); ?></h2>
          <?php the_excerpt(); ?>
          </article>
   
          if($alm_item%2 == 0){
             echo '</div>';
          }
        ?>
       ```
   
 *  Thread Starter [lschatzkin](https://wordpress.org/support/users/lschatzkin/)
 * (@lschatzkin)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958016)
 * The first example is working. The second one seems to break the Load More button.
   
   Thank you!
 *  Thread Starter [lschatzkin](https://wordpress.org/support/users/lschatzkin/)
 * (@lschatzkin)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958019)
 * The second example is working now, there was a couple of unclosed PHP tags. Problem
   now is the Load More is only working the first time I click it. Any ideas?
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958067)
 * Ok good.
    Not sure why that would be happening… Does the button have a .done 
   class after the first click? Can you share a link?
 *  Thread Starter [lschatzkin](https://wordpress.org/support/users/lschatzkin/)
 * (@lschatzkin)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958177)
 * Sure, here’s the link: [http://therealdemo.therealnews.com/](http://therealdemo.therealnews.com/).
 * Here’s the shortcode I’m using : [ajax_load_more post_type=”trnn_story” offset
   =”12″ posts_per_page=”12″ pause=”true” scroll=”false” destroy_after=”30″ button_label
   =”Load More Stories” button_loading_label=”Loading Stories…” css_classes=”AJM_test_class”]
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958187)
 * It must be an issue with the repeater template. Sometimes when a template is 
   not opened and closed with an HTML element the plugin gets confused.
 * Can you try implementing the first example I provided to see if that fixes things?
 *     ```
       <div class="row">
       <?php echo do_shortcode('[ajax_load_more]'); ?>
       </div>
       ```
   
 * With this example you would need to remove the grid code (.row) from your repeater
   template.
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958188)
 * I assume you have more than 24 posts in your `trnn_story` post type?
 *  Thread Starter [lschatzkin](https://wordpress.org/support/users/lschatzkin/)
 * (@lschatzkin)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958193)
 * Hi,
    It does work if I use the first method, but the HTML is off . Can you take
   a look and see what’s going wrong? [http://therealdemo.therealnews.com/](http://therealdemo.therealnews.com/)
   Thanks, Laura
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958194)
 * Yea the issue is you need to clear each row because foundation uses floats.
 * Add this CSS to you site.
 *     ```
       .alm-reveal .medium-4.columns {
         display: inline-block;
         float: none;
         padding-bottom: 20px;
         vertical-align: top;
       }
       ```
   
 *  [slamorte](https://wordpress.org/support/users/slamorte/)
 * (@slamorte)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958269)
 * Hi,
 * Still having an issue with styling.
 * I’ve put two ALM buttons on my page for you to look at, each pulling a different
   template (we bought the template folder upgrade).
 * **First ALM**
 * The first one uses a shortcode to call a simple repeater template that does not
   add one row per three content items, and uses your CSS to override the Foundation
   floats.
 * Shortcode
 *     ```
       [ajax_load_more theme_repeater="load-more-stories.php" post_type="trnn_story" offset="13" posts_per_page="12" pause="true" scroll="false" destroy_after="36" css_classes="row" button_label="See more stories ≫"]
       ```
   
 * Template:
 *     ```
       <div class="medium-4 columns norow">
   
          <?php if ( has_post_thumbnail() ) { ?>
          <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('block');?></a>
          <?php } ?>
   
          <?php echo the_terms( $post->ID, 'topics', '<div class="labels">',' ','</div>' ) ?>
   
          <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
   
          <?php echo wp_trim_words( get_the_excerpt(), 20);?>
   
       </div>
       ```
   
 * CSS
 *     ```
       .alm-reveal {
         .medium-4.columns.norow {
           display: inline-block;
           float: none;
           padding-bottom: 20px;
           vertical-align: top;
           width: 33%;
         }
       }
       ```
   
 * The problem here is that even with your styling addition only two of the medium-
   4 content items appear per ‘row’, unless I also override Foundations width setting(
   add “width=33%;” to the CSS). However if I manually set the width I get unwanted
   results on other screen sizes — it overrules Foundation’s responsiveness. Essentially
   the position of the second content item shift slightly when changing from float:
   left to display: inline-block.
 * **Second ALM**
 * The second one uses a shortcode to call the repeater that adds one row per three
   content items and uses the default Foundation styling.
 *     ```
       <?php if($alm_item%3 == 1){echo '<div class="row">';} ?>
   
       <div class="medium-4 columns">
   
         <?php if ( has_post_thumbnail() ) { ?>
           <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('block');?></a>
           <?php }  ?>
   
           <?php echo the_terms( $post->ID, 'topics', '<div class="labels">',' ','</div>' ) ?>
   
           <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
   
           <?php echo wp_trim_words( get_the_excerpt(), 20);?>
   
         </div>
   
         <?php if($alm_item%3 == 0){ echo '</div>'; } ?>
       ```
   
 * The styling here is great and fully Foundation. The problem is the Load More 
   button is “done” after the first press. You said “Sometimes when a template is
   not opened and closed with an HTML element the plugin gets confused,” so I also
   wrapped the repeater in another div element but it didn’t help.
 * [Website is here](http://trnn.campaignupgrade.org/) and login available on request.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Implementing Foundation / Custom CSS’ is closed to new replies.

 * ![](https://ps.w.org/ajax-load-more/assets/icon-256x256.png?rev=2944639)
 * [Ajax Load More – Infinite Scroll, Load More, & Lazy Load](https://wordpress.org/plugins/ajax-load-more/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ajax-load-more/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ajax-load-more/)
 * [Active Topics](https://wordpress.org/support/plugin/ajax-load-more/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ajax-load-more/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ajax-load-more/reviews/)

## Tags

 * [foundation](https://wordpress.org/support/topic-tag/foundation/)

 * 11 replies
 * 3 participants
 * Last reply from: [slamorte](https://wordpress.org/support/users/slamorte/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/implementing-foundation-custom-css/#post-6958269)
 * Status: not resolved