Content inside page template is misplaced

Question

I have a template in my Genesis theme child that is assigned to my homepage with a div that has an ID that I've styled in a separate CSS file. That div contains a text, in the CSS sheet there's a background image to it.

I have a styled header through hooking it up through functions. I have a footer aswell.

The problem is - the div that I mentioned is rendered below all these elements, as if it's not a part of the genesis structure.

There's header, footer, and below that the image with the text. If I edit the page through the dashboard a new post is created that is positioned correctly. How do I display the picture between the header and footer like it should be?

The code for the homepage template is:

<?php 
/*
Template Name: Homepage Template
*/

genesis();

echo "<link rel='style' type='text/css' href='styles.css' />";

get_header(); ?>


<div id="primary" class="content-area">

    <main id="main" class="site-main" role="main">


        <?php
    // Start the loop.
    while ( have_posts() ) : the_post(); ?>


    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <header class="entry-header">

        </header><!-- .entry-header -->

        <div class="entry-content">

            <div id="home_slider">
                Electrical & Mechanical Engineering<br>In Nigera

            </div>

        </div><!-- .entry-content -->

    </article><!-- #post-## -->



    <?php endwhile; // End the loop. ?>

    </main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>

Answer 1

The thing about Genesis content is that you have to use the Genesis hooks to add content to your page. There is a great visual guide for this here: http://genesistutorials.com/visual-hook-guide/

In your case, if you wanted to place your div just before the content area, you could do the following:

/**
 * Template Name: Homepage Template
 */

add_action('genesis_before_content', 'add_extra_content_div');
function add_extra_content_div(){
    ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
            </header><!-- .entry-header -->
            <div class="entry-content">
                <div id="home_slider">
                    Electrical & Mechanical Engineering<br>In Nigera
                </div>
            </div><!-- .entry-content -->
        </article><!-- #post-## -->
        <?php endwhile; // End the loop. ?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
?>
}

genesis();

One other point is that in Genesis you do not need to put in get_header() and get_footer() so you should remove these from your template.

Also, make sure that genesis(); is the very last line in the template - this is very important.