[Resolved] two column layout containing php

Home Forums Support [Resolved] two column layout containing php

Home Forums Support two column layout containing php

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #890993
    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>
    #891157
    Tom
    Lead Developer
    Lead Developer

    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?

    #891224
    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

    #891471
    David
    Staff
    Customer Support

    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 🙂

    #892332
    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>
    #892643
    David
    Staff
    Customer Support

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

    #892725
    Melissa

    It was–stupid mistake — thanks!

    But that didn’t fix the layout.

    #892913
    David
    Staff
    Customer Support

    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>
    #893049
    Melissa

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

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

    #893063
    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>
    #893080
    David
    Staff
    Customer Support

    Try adding this CSS:

    #category_intro {
        overflow: auto;
    }
    #893083
    Melissa

    That’s it!

    Thank you so much!

    #893112
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.