two column layout containing php

[Melissa]

Hoping you can help with this page:
https://theslowroad.org/category/destinations/south-america/ecuador/

I need to set the map and top text into 2 columns using an element. I know how to make column divs, but in this case I need to run php inside them, and my attempt doesn’t seem to work (I’m a total beginner at this.) The basic code did work before I tried the columns.

My element code:

// get the current taxonomy term//
$term = get_queried_object();

// columns with map and description//
<div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
   <?php $description = get_field('country_description', $term); 
	  echo "<p>" . $description . "</p>";
    ?>
</div>
<div class="grid-50 tablet-grid-50 mobile-grid-100 second-column">
     <?php $description = get_field('country_description', $term);
      $map = get_field('country_map', $term);
      echo do_shortcode( ' '. $map .' ' ); 
      ?>
</div>

[Tom]

Hi there,

That code looks like it should work. However, the Element on the page you linked me to seems to be using a different Element. Are you sure the one that applies to that category has the code?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Melissa]

No, it was the right element. I had just left in an extra ?> that was breaking the php.

Now you should be able to see the columns issue. What I want is something like this:

text map
gallery head and grid (no posts right now, though)
post head and grid

[David]

Hi there,

so the description is jumping into the second column. You would be able to share the entire code you are using for you Category Intro? When adding code to the forum, after you have pasted it in can you highlight it and hit the Code button 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Melissa]

Here’s the whole Element:

<div id="category_intro">
<?php 
get_header(); 

//* get the current taxonomy term and load description and map*//
$term = get_queried_object(); ?>

<div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
   <?php $description = get_field('country_description', $term); ?>
</div>
<div class="grid-50 tablet-grid-50 mobile-grid-100 second-column">
  <?php $description = get_field('country_description', $term);
$map = get_field('country_map', $term);
echo "<p>" . $description . "</p>";

echo do_shortcode( ' '. $map .' ' ); ?>
</div>
	

	
	
<div id=cathead>
	
<h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
		Photo Galleries
		</h2>
<?php
	$terms = get_the_terms( get_the_ID(), 'category' );

if ( !empty( $terms ) ){
    // get the first term
    $term = array_shift( $terms );
    $term_slug = $term->slug;
}

wpsp_display( 26824, 'tax_term="' . $term_slug . '"' );
 ?>	
</div>

<div id=cathead>
<h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
		Posts by Topic
		</h2>
</div>

[David]

This <div id="category_intro"> looks like it is missing the closing </div> which should come after the second column.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Melissa]

It was–stupid mistake — thanks!

But that didn’t fix the layout.

[David]

So i assume the first row is the Description (in first column) and map (in second column). If thats the case then move this:

echo "<p>" . $description . "</p>";

from the second column and place it in the first column so the first columns markup looks like this:

<div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
    <?php $description = get_field('country_description', $term); ?>
    echo "<p>" . $description . "</p>";
</div>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Melissa]

That worked well, except that the next div is still pulling up to the right.

https://theslowroad.org/category/destinations/south-america/ecuador/

[Melissa]

The most recent code:

<div id="category_intro">
	//* get the current taxonomy term and load description and map*//
 <?php 
  get_header(); 

  $term = get_queried_object(); 
	?>

  <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
   <?php $description = get_field('country_description', $term); 
	echo "<p>" . $description . "</p>";
	?>
  </div>
	
  <div class="grid-50 tablet-grid-50 mobile-grid-100 second-column">
  <?php $description = get_field('country_description', $term);
  $map = get_field('country_map', $term);
  echo do_shortcode( ' '. $map .' ' ); 
	?>
  </div>
</div>

<div id=cathead>
	
  <h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
		Photo Galleries
		</h2>
  <?php
	$terms = get_the_terms( get_the_ID(), 'category' );

   if ( !empty( $terms ) ){
    // get the first term
    $term = array_shift( $terms );
    $term_slug = $term->slug;
    }

    wpsp_display( 26824, 'tax_term="' . $term_slug . '"' );
     ?>	
</div>

<div id=cathead2>
  <h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
	Posts by Topic
	</h2>
</div>

[David]

Try adding this CSS:

#category_intro {
    overflow: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Melissa]

That’s it!

Thank you so much!

[David]

Awesome – glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts