adding content above recent posts in wordpress - php

Question

I am trying to insert meta slider to display above my posts in wordpress.
I correctly inserted the code in the theme index.php file above the loop. it works correctly, but it also displays on top of the side bar as well, and i would like it just above the posts.
is there any advice on how i can do this? where in the loop would i need to insert it?
here is what i have
<?php
/**
* The main template file
*
* #package SimpleMag
* #since SimpleMag 1.0
**/
get_header();
global $ti_option;
?>
<?php $archive_sidebar = get_field( 'page_sidebar', get_option('page_for_posts') ); ?>
<section id="content" role="main" class="clearfix animated">
<?php
echo do_shortcode("[metaslider id=437]");
?>
<?php if ( $ti_option['posts_page_title'] == 'full_width_title' ) : ?>
<header class="entry-header page-header">
<div class="wrapper title-with-sep page-title">
<h1 class="entry-title">
<?php
$posts_page_id = get_option( 'page_for_posts' );
echo get_the_title( $posts_page_id );
?>
</h1>
</div>
</header>
<?php endif; ?>
<div class="wrapper">
<?php
// Enable/Disable sidebar based on the field selection
if ( ! $archive_sidebar || $archive_sidebar == 'page_sidebar_on' ):
?>
<div class="grids">
<div class="grid-8 column-1">
<?php endif; ?>
<?php if ( $ti_option['posts_page_title'] == 'above_content_title' ) : ?>
<header class="entry-header page-header">
<div class="title-with-sep page-title">
<h1 class="entry-title">
<?php
$posts_page_id = get_option( 'page_for_posts' );
echo get_the_title( $posts_page_id );
?>
</h1>
</div>
</header>
<?php endif; ?>
<div class="grids <?php echo $ti_option['posts_page_layout']; ?> entries">
<?php
if ( have_posts() ) : while ( have_posts()) : the_post();
get_template_part( 'content', 'post' );
endwhile;
?>
</div>
<?php ti_pagination(); ?>
<?php else : ?>
<p class="message">
<?php _e( 'Sorry, no posts were found', 'themetext' ); ?>
</p>
<?php endif;?>
<?php
// Enable/Disable sidebar based on the field selection
if ( ! $archive_sidebar || $archive_sidebar == 'page_sidebar_on' ):
?>
</div><!-- .grid-8 -->
<?php get_sidebar(); ?>
</div><!-- .grids -->
<?php endif; ?>
</div><!-- .wrapper -->
</section><!-- #content -->
<?php get_footer(); ?>

Answer 1

As long as the sidebar is deactivated, your placement is fine. When the sidebar is active you should place it just below <div class="grid-8 column-1">. That's the beginning of the main area of your page, next to the sidebar. (I'm guessing the div is using something similar to bootstrap, taking up 8 of 12 available grids).
To prevent future updates of your theme to overwrite your customizations, if this is in fact a supported theme, you should also consider creating a child theme. It's real easy and is explained here: https://codex.wordpress.org/Child_Themes