Move Map To Bottom - php

Question

I have a google map up on my contact form, I'd like to move it under my widget. I'm not sure how to go about this. I'm using WordPress Theme 'Adama.' Here is the contact form php file:
<?php
/**
* Template Name: Contact
*
* #package GalacticaThemes
* #subpackage Template
*/
get_header();
$disable_form = get_post_meta( get_the_ID(), 'adama_contact_disable_form', true );
if ( !$disable_form ) {
// Contact form
$is_sent = false;
$is_error = false;
$errors = array();
$contact_name = '';
$contact_email = '';
$contact_phone = '';
$contact_subject = '';
$contact_message = '';
// If the form is submitted
if ( isset( $_POST['contact_submitted'] ) ) {
// Name
if ( isset( $_POST['contact_name'] ) ) {
$contact_name = strip_tags( trim( $_POST['contact_name'] ) );
}
if ( $contact_name === '' ) {
// Name is required
$errors['contact_name'] = esc_html__( 'You forgot to enter your name.', 'adama' );
$is_error = true;
}
// Email
if ( isset( $_POST['email'] ) ) {
$contact_email = strip_tags( trim( $_POST['email'] ) );
}
if ( $contact_email === '' ) {
// Email is required
$errors['contact_email'] = esc_html__( 'You forgot to enter your email address.', 'adama' );
$is_error = true;
} else if ( !is_email( $contact_email ) ) {
// Validate email address
$errors['contact_email'] = esc_html__( 'You entered an invalid email address.', 'adama' );
$is_error = true;
} else {
$contact_email = sanitize_email( $contact_email );
}
// Phone
if ( isset( $_POST['contact_phone'] ) ) {
$contact_phone = strip_tags( trim( $_POST['contact_phone'] ) );
}
// Subject
if ( isset( $_POST['contact_subject'] ) ) {
$contact_subject = strip_tags( trim( $_POST['contact_subject'] ) );
}
if ( $contact_subject === '' ) {
// Subject is required
$errors['contact_subject'] = esc_html__( 'You forgot to enter message subject.', 'adama' );
$is_error = true;
}
// Message
if ( isset( $_POST['contact_message'] ) ) {
$contact_message = sanitize_text_field( strip_tags( trim( $_POST['contact_message'] ) ) );
}
if ( $contact_message === '' ) {
// Message is required
$errors['contact_message'] = esc_html__( 'You forgot to enter your message.', 'adama' );
$is_error = true;
}
// If there is no error, send email
if ( !$is_error ) {
$email_to = galactica_option_email( 'contact_email' );
$headers = esc_html__( 'From: ', 'adama' ) . "$contact_name <$contact_email>\r\n" . esc_html__( 'Reply-To: ', 'adama' ) . $contact_email;
$subject = sprintf(
esc_html__( '[%1$s - Contact] %2$s', 'adama' ),
get_bloginfo( 'name' ),
$contact_subject
);
$body = sprintf(
esc_html__( "Name: %s \n\nPhone: %s \n\nEmail: %s \n\nMessage: %s \n\n\n\nNote: This message was sent from contact form on %s website.", 'adama' ),
$contact_name,
$contact_phone,
$contact_email,
$contact_message,
get_bloginfo( 'name' )
);
$is_sent = wp_mail( $email_to, $subject, $body, $headers );
if ( !$is_sent ) {
$is_error = true;
}
}
}
}
// Map position
$map_position = get_post_meta( get_the_ID(), 'adama_contact_map_position', true );
$map_position = galactica_lower_in_array( $map_position, array( 'top', 'side' ), 'top' );
?>
<?php if ( $map_position === 'top' ) : ?>
<section>
<?php // Google Map
echo galactica_map( array(
'type' => galactica_option( 'contact_map_type', 'road' ),
'address' => implode( '|', galactica_option( 'contact_map_address', array() ) ),
'tooltip' => '',
'height' => galactica_option( 'contact_map_height', 'road' ) . 'px',
'zoom' => galactica_option( 'contact_map_zoom', 15 ),
'scrollwheel_enabled' => false,
)); ?>
</section>
<?php endif; ?>
<section class="w-section">
<div class="container">
<div class="row">
<div id="content" class="col-md-7 col-content">
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php if ( !post_password_required() && !$disable_form ) : ?>
<form method="post" action="<?php echo esc_url( get_permalink( get_the_ID() ) ); ?>" id="contact-form" role="form">
<?php if ( $is_sent ) : ?>
<div class="alert alert-success">
<?php esc_html_e( 'Your message was sent successfully.', 'adama' ); ?>
</div>
<?php else : ?>
<?php if ( $is_error ) : ?>
<div class="alert alert-danger">
<?php esc_html_e( 'There was an error submitting the form. Please check that you have entered valid information and try again.', 'adama' ); ?>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<?php endif; ?>
<div class="form-wrapper">
<div class="form-group">
<label for="contact_name"><?php esc_html_e( 'Name', 'adama' ); ?></label>
<input type="text" name="contact_name" id="contact_name" class="form-control form-control-validate-required" placeholder="<?php esc_attr_e( 'Your name', 'adama' ); ?>" value="<?php echo esc_attr( $contact_name ); ?>" />
<?php adama_form_error( $errors, 'contact_name' ); ?>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="contact_email"><?php esc_html_e( 'Email', 'adama' ); ?></label>
<input type="email" name="email" id="contact_email" class="form-control form-control-validate-required form-control-validate-email" placeholder="<?php esc_attr_e( 'Email address', 'adama' ); ?>" value="<?php echo esc_attr( $contact_email ); ?>" />
<?php adama_form_error( $errors, 'contact_email' ); ?>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="contact_phone"><?php esc_html_e( 'Phone', 'adama' ); ?></label>
<input type="text" name="contact_phone" id="contact_phone" class="form-control" placeholder="<?php esc_attr_e( 'Phone number', 'adama' ); ?>" value="<?php echo esc_attr( $contact_phone ); ?>" />
<?php adama_form_error( $errors, 'contact_phone' ); ?>
</div>
</div>
</div>
<div class="form-group">
<label for="contact_subject"><?php esc_html_e( 'Subject', 'adama' ); ?></label>
<input type="text" name="contact_subject" id="contact_subject" class="form-control form-control-validate-required" placeholder="<?php esc_attr_e( 'Subject', 'adama' ); ?>" value="<?php echo esc_attr( $contact_subject ); ?>" />
<?php adama_form_error( $errors, 'contact_subject' ); ?>
</div>
<div class="form-group">
<label for="contact_message"><?php esc_html_e( 'Message', 'adama' ); ?></label>
<textarea name="contact_message" id="contact_message" class="form-control form-control-validate-required contact-message" placeholder="<?php esc_attr_e( 'Write you message here...', 'adama' ); ?>"><?php echo esc_textarea( $contact_subject ); ?></textarea>
<?php adama_form_error( $errors, 'contact_message' ); ?>
</div>
<input type="hidden" name="contact_submitted" value="1" />
<button type="submit" class="btn btn-two" name="send"><?php esc_html_e( 'Send message', 'adama' ); ?></button>
</div>
<?php endif; ?>
</form>
<?php endif; ?>
<?php endwhile; ?>
</div><!-- #content -->
<?php get_sidebar( 'contact' ); ?>
</div>
</div>
</section>
<?php if ( !$disable_form ) { ?>
<script>
/* global jQuery */
// Javascript validation
jQuery( document ).ready( function( $ ) {
"use strict";
var $form = $( 'form#contact-form' );
$form.submit( function( e ) {
// Remove old error messages
$form.find( '.alert' ).remove();
// Validate
var hasError = false;
$form.find( '.form-control-validate-required' ).each( function() {
var $ctrl = $( this ),
labelText,
value = $.trim( $ctrl.val() );
if ( value === '' ) {
hasError = true;
labelText = $ctrl.prev( 'label' ).text();
$ctrl.parent().append( '<div class="alert alert-danger alert-form-message"><?php esc_html_e( 'You forgot to enter your', 'adama' ); ?> ' + labelText + '.</div>' );
} else if ( $ctrl.hasClass( 'form-control-validate-email' ) && !( /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/.test( value ) ) ) {
hasError = true;
labelText = $ctrl.prev( 'label' ).text();
$ctrl.parent().append( '<div class="alert alert-danger alert-form-message"><?php esc_html_e( 'You entered an invalid', 'adama' ); ?> ' + labelText + '.</div>' );
}
});
// If no errors submit form via ajax
if ( hasError ) {
$form.prepend( '<div class="alert alert-danger"><?php esc_html_e( 'There was an error submitting the form. Please check that you have entered valid information and try again.', 'adama' ); ?><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>' );
} else {
var formData = $(this).serialize();
$.post( $( this ).attr( 'action' ), formData, function( data ) {
if ( data.indexOf( '<?php esc_html_e( 'Your message was sent successfully.', 'adama' ); ?>' ) !== -1 ) {
$form.find( '.form-wrapper' ).slideUp( 'fast', function() {
$form.prepend( '<div class="alert alert-success"><?php esc_html_e( 'Your message was sent successfully.', 'adama' ); ?></div>' );
});
} else {
$form.prepend( '<div class="alert alert-danger"><?php esc_html_e( 'There was an error submitting the form. Please check that you have entered valid information and try again.', 'adama' ); ?><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>' );
}
});
}
e.preventDefault();
});
});
</script>
<?php } ?>
<?php get_footer();
That currently shows up like this with these settings:
I would love to move the map to the bottom of the widget, but I'm not sure how... The theme settings only currently have "top" (which is a full width above the form and widget) and the side which also appears on top of the widget...
Edit:
Here's Sidebar.php
<?php
/**
* The sidebar containing the widget area
*
* Displays on posts and pages.
*
* #package GalacticaThemes
* #subpackage Template
*/
?>
<?php if ( galactica_is_sidebar_enabled() ) : ?>
<div id="sidebar" class="col-md-3 widget-area sidebar-classic" role="complementary">
<?php galactica_dynamic_sidebar(); ?>
</div><!-- #sidebar -->
<?php endif; ?>
Here's Contact Sidebar
<?php
/**
* The sidebar containing the contact page widget area
*
* #package GalacticaThemes
* #subpackage Template
*/
// Map position
$map_position = get_post_meta( get_the_ID(), 'adama_contact_map_position', true );
$map_position = galactica_lower_in_array( $map_position, array( 'top', 'side' ), 'top' );
?>
<?php if ( galactica_is_sidebar_enabled() ) : ?>
<div id="sidebar" class="col-md-5 widget-area sidebar-classic" role="complementary">
<?php if ( $map_position === 'side' ) : ?>
<div class="widget">
<?php // Google Map
echo galactica_map( array(
'type' => galactica_option( 'contact_map_type', 'road' ),
'address' => implode( '|', galactica_option( 'contact_map_address', array() ) ),
'tooltip' => '',
'height' => galactica_option( 'contact_map_height', 'road' ) . 'px',
'zoom' => galactica_option( 'contact_map_zoom', 15 ),
'scrollwheel_enabled' => false,
)); ?>
</div>
<?php endif; ?>
<?php galactica_dynamic_sidebar(); ?>
</div><!-- #sidebar -->
<?php endif; ?>
Looks like I might just have to move the map under in this file above here!

Answer 1

Not tested, obviously but I think you can just flip these two like this inside your contact sidebar file so the info is being called in before the map.
<?php galactica_dynamic_sidebar(); ?>
<?php if ( $map_position === 'side' ) : ?>
<div class="widget">
<?php // Google Map
echo galactica_map( array(
'type' => galactica_option( 'contact_map_type', 'road' ),
'address' => implode( '|', galactica_option( 'contact_map_address', array() ) ),
'tooltip' => '',
'height' => galactica_option( 'contact_map_height', 'road' ) . 'px',
'zoom' => galactica_option( 'contact_map_zoom', 15 ),
'scrollwheel_enabled' => false,
)); ?>
</div>
<?php endif; ?>

Answer 2

In sidebar-contact.php just flip the lines:
<?php
/**
* The sidebar containing the contact page widget area
*
* #package GalacticaThemes
* #subpackage Template
*/
// Map position
$map_position = get_post_meta( get_the_ID(), 'adama_contact_map_position', true );
$map_position = galactica_lower_in_array( $map_position, array( 'top', 'side' ), 'top' );
?>
<?php if ( galactica_is_sidebar_enabled() ) : ?>
<div id="sidebar" class="col-md-5 widget-area sidebar-classic" role="complementary">
<?php galactica_dynamic_sidebar(); ?>
<?php if ( $map_position === 'side' ) : ?>
<div class="widget">
<?php // Google Map
echo galactica_map( array(
'type' => galactica_option( 'contact_map_type', 'road' ),
'address' => implode( '|', galactica_option( 'contact_map_address', array() ) ),
'tooltip' => '',
'height' => galactica_option( 'contact_map_height', 'road' ) . 'px',
'zoom' => galactica_option( 'contact_map_zoom', 15 ),
'scrollwheel_enabled' => false,
)); ?>
</div>
<?php endif; ?>
</div><!-- #sidebar -->
<?php endif; ?>
This will give the desired request with the map under the widget!