Adding Custom Footer to page Template

Question

I have made a custom footer layout using "dummy" content to start with.

This is the footer html

                                  <!-- MY FOOTER -->
                                    <div class="my-footer">
                                <div class="my-column" style="background-color:#aaa;">
                                <h2>Column 1</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#bbb;">
                                <h2>Column 2</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ccc;">
                                <h2>Column 3</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ddd;">
                                <h2>Column 4</h2>
                                <p>Some text..</p>
                              </div>
                            </div>
                            <!-- END MY FOOTER -->

/* Create four equal columns that floats next to each other */
.my-column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

To get this to display on the bottom of my last "scrolling section" (#contact) I have added this html footer to:

page-templates/template-full-page.php

However my footer is not displaying at all?

Link to view site

<?php
/*
Template Name: Scrolling Full Screen Sections
*/
?>
<?php get_header(); ?>

<?php the_post(); ?>

<?php

    $scrolling_page = movedo_grve_post_meta( '_movedo_grve_scrolling_page' );
    $responsive_scrolling_page = movedo_grve_post_meta( '_movedo_grve_responsive_scrolling', 'yes' );
    $scrolling_lock_anchors = movedo_grve_post_meta( '_movedo_grve_scrolling_lock_anchors', 'yes' );
    $scrolling_loop = movedo_grve_post_meta( '_movedo_grve_scrolling_loop', 'none' );
    $scrolling_speed = movedo_grve_post_meta( '_movedo_grve_scrolling_speed', 1000 );

    $wrapper_attributes = array();
    if( 'pilling' == $scrolling_page ) {
        $scrolling_page_id = 'grve-pilling-page';
        $scrolling_direction = movedo_grve_post_meta( '_movedo_grve_scrolling_direction', 'vertical' );
        $wrapper_attributes[] = 'data-scroll-direction="' . esc_attr( $scrolling_direction ) . '"';
    } else {
        $scrolling_page_id = 'grve-fullpage';
    }
    $wrapper_attributes[] = 'id="' . esc_attr( $scrolling_page_id ) . '"';
    $wrapper_attributes[] = 'data-device-scrolling="' . esc_attr( $responsive_scrolling_page ) . '"';
    $wrapper_attributes[] = 'data-lock-anchors="' . esc_attr( $scrolling_lock_anchors ) . '"';
    $wrapper_attributes[] = 'data-scroll-loop="' . esc_attr( $scrolling_loop ) . '"';
    $wrapper_attributes[] = 'data-scroll-speed="' . esc_attr( $scrolling_speed ) . '"';

?>

            <!-- CONTENT -->
            <div id="grve-content" class="clearfix">
                
                <div class="grve-content-wrapper">
                    
                    <!-- MAIN CONTENT -->
                    <div id="grve-main-content">
                        <div class="grve-main-content-wrapper clearfix" style="padding: 0;">

                            <!-- PAGE CONTENT -->
                            <div id="page-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <div <?php echo implode( ' ', $wrapper_attributes ); ?>>
                                    <?php the_content(); ?>
                                    **<!-- MY FOOTER -->
                                    <div class="my-footer">
                                <div class="my-column" style="background-color:#aaa;">
                                <h2>Column 1</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#bbb;">
                                <h2>Column 2</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ccc;">
                                <h2>Column 3</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ddd;">
                                <h2>Column 4</h2>
                                <p>Some text..</p>
                              </div>
                            </div>
                            <!-- END MY FOOTER -->**
                                </div>
                                
                            </div>

                            <!-- END PAGE CONTENT -->
                        </div>
                    </div>
                    <!-- END MAIN CONTENT -->
                </div>
                
            </div>

            <!-- END CONTENT -->
            
            <!-- SIDE AREA -->
            <?php
                $movedo_grve_sidearea_data = movedo_grve_get_sidearea_data();
                movedo_grve_print_side_area( $movedo_grve_sidearea_data );
            ?>
            <!-- END SIDE AREA -->

            <!-- HIDDEN MENU -->
            <?php movedo_grve_print_hidden_menu(); ?>
            <!-- END HIDDEN MENU -->

            <?php movedo_grve_print_search_modal(); ?>
            <?php movedo_grve_print_form_modals(); ?>
            <?php movedo_grve_print_language_modal(); ?>
            <?php movedo_grve_print_login_modal(); ?>
            <?php movedo_grve_print_social_modal(); ?>
            <?php do_action( 'movedo_grve_footer_modal_container' ); ?>
            
            </div> <!-- end #grve-theme-content -->
            <?php movedo_grve_print_safebutton_area(); ?>
        </div> <!-- end #grve-theme-wrapper -->

        <?php wp_footer(); // js scripts are inserted using this function ?>

    </body>

</html>

Have I added the html to an incorrect position in the template file? or is something in the template files or css preventing the footer from showing?

Answer 1

I've checked the website, seems that is missing some styling over there. Try with:

.my-footer {
    height: 200px;
    position: absolute;
    bottom: 20px;
    width: 100%;
}

Adjust of course the height.