Categories: php, html, css, wordpress, flexbox

How do I use HTML within PHP specifically wrapping output with DIV tags?

2 answers

I'm gonna post what I've done so far, and full disclosure I'm not at all versed in PHP.

I trying to add DIVS to help me create a layout structure for the PHP output. It appears on the page for the most part, but I'm having difficulty getting some flexbox styling to work.

I'm guessing this is because I'm wrapping HTML around PHP in the wrong places.

My concept layout

<?php if ( have_rows( 'category_listing' ) ) : ?>  <div class="category-container">      <?php while ( have_rows( 'category_listing' ) ) : the_row(); ?>      <div class="category-wrapper">          <div class="category-title">          <h3><?php the_sub_field( 'category_title' ); ?></h3>          </div>          <div class="columns-2">              <div class="category-icon">              <?php $icon = get_sub_field( 'icon' ); ?>             <?php if ( $icon ) { ?>                 <img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" />             <?php } ?>              </div>              <div class="category-item-list">              <?php if ( have_rows( 'item_list' ) ) : ?>             <ul class="category-list">                  <?php while ( have_rows( 'item_list' ) ) : the_row(); ?>                    <li>                     <?php the_sub_field( 'item' ); ?>                 </li>                   <?php endwhile; ?>             </ul>             </div>          </div>      </div>          <?php else : ?>             <?php // no rows found ?>          <?php endif; ?>     <?php endwhile; ?> <?php else : ?>     <?php // no rows found ?>  </div>  <?php endif; ?> 

All answers to this question, which has the identifier 61217752

The best answer:

Here is the validated PHP code to use. In the PHP code you provided the conditions like if & while and the div inside them where not closing in proper order.

<?php if (have_rows('category_listing')): ?>   <div class="category-container">   <?php while (have_rows('category_listing')): the_row(); ?>     <div class="category-wrapper">       <div class="category-title">         <h3><?php the_sub_field('category_title'); ?></h3>       </div>       <div class="columns-2">         <div class="category-icon">           <?php $icon = get_sub_field('icon'); ?>           <?php if ($icon): ?>             <img src="<?php echo $icon['url']; ?>" alt="<?php echo $icon['alt']; ?>" />           <?php else: ?>             <?php /* icon not found */ ?>           <?php endif; ?>         </div>         <div class="category-item-list">           <?php if (have_rows('item_list')): ?>             <ul class="category-list">             <?php while (have_rows('item_list')): the_row(); ?>               <li>                 <?php the_sub_field('item'); ?>               </li>             <?php endwhile; ?>             </ul>           <?php else: ?>             <?php /* no rows found */ ?>           <?php endif; ?>         </div>       </div>     </div>   <?php endwhile; ?>   </div> <?php else: ?>   <?php /* no rows found */ ?> <?php endif; ?> 

Looking at the designs, it appears that inside the category-wrapper the category-title should align center over the un-ordered list.

Let's say if we keep the PHP code, that you shared in the question, as constant factor and do not make any changes in it. Instead manage the design requirement using css then, the styles used in the stack snippet below should serve your purpose.

You can refine the styles further. I have used the class names provided in the question and assumed the styles based on designs.

body {    background-color: #fff;  }    .category-container {    display: flex;    width: 100%;    font-family: Arial, sans-serif;    color: red;    flex-wrap: wrap;    flex-direction: column;    height: 600px;  }    .category-wrapper {    display: block;    width: 50%;    padding: 20px;    box-sizing: border-box;    border: 1px solid red;  }    .category-title {    font-weight: bold;    text-transform: uppercase;    text-align: center;    margin-bottom: 1rem;    margin-left: 30%;  }    .columns-2 {    display: flex;  }    .category-icon {    width: 30%;    text-align: center;  }    .category-icon img {    border-radius: 50%;  }    .category-item-list {    width: 70%;  }    .category-list {    column-count: 2;    margin-top: 0;  }    .category-list li {    word-wrap: break-word;    padding-right: 1rem;    hyphens: auto;  }
<div class="category-container">      <div class="category-wrapper">      <div class="category-title">        Category Title 1      </div>      <div class="columns-2">        <div class="category-icon">          <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />        </div>        <div class="category-item-list">          <ul class="category-list">            <li>item verylonglengthword</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>          </ul>        </div>      </div>    </div>      <div class="category-wrapper">      <div class="category-title">        Category Title 2      </div>      <div class="columns-2">        <div class="category-icon">          <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />        </div>        <div class="category-item-list">          <ul class="category-list">            <li>item verylonglengthword</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>          </ul>        </div>      </div>    </div>      <div class="category-wrapper">      <div class="category-title">        Category Title 3      </div>      <div class="columns-2">        <div class="category-icon">          <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />        </div>        <div class="category-item-list">          <ul class="category-list">            <li>item verylonglengthword</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>          </ul>        </div>      </div>    </div>      <div class="category-wrapper">      <div class="category-title">        Category Title 4      </div>      <div class="columns-2">        <div class="category-icon">          <img src="https://via.placeholder.com/100/FF0000/FFFFFF" />        </div>        <div class="category-item-list">          <ul class="category-list">            <li>item verylonglengthword</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>            <li>item</li>          </ul>        </div>      </div>    </div>    </div>

I use Bootstrap for this. The following code, wil not run on code snippet, but you can copy and paste somewhere php is running

<!doctype html>  <html>    <head>    <title>Bootstrap Example</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  </head>  <body>  	  	<?php  		//SHOULD BE A MATRIX, SAME NUMBER OF COLUMNS  		$cars = array                        (                        array("Volvo",22,18),                        array("BMW",15,13),                        array("Saab",5,2),                        array("Land Rover",17,15),                        array("Ferrari",17,15)                        );              $tanks = array                        (                        array("Hellcat",220,180),                        array("Tiger",150,130),                        array("ISU",500,200),                        array("Cromwell",170,150)                        );              $fruits = array                        (                        array("Apple",22,18),                        array("Banana",15,13),                        array("Watermelon",5,2),                        );              $colors = array                        (                        array("Black",2,8),                        array("White",1,3),                        array("Blue",5,0),                        array("Green",7,1),                        array("Yellow",5,0)                        );                          			try {  			    //If questions about css verify how Bootstrap 3 works  			    print '<div class="container">';  			        print '<div class="row">';  			              			    //FOR CARS          				print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';          				for($x=0;$x<count($cars);$x++){          				    for($y=0;$y<count($cars[$x]);$y++){          				        print "<p>".$cars[$x][$y]."</p>";          				    }          				}          				print '</div>';          				          				//FOR TANKS          				print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';          				for($x=0;$x<count($tanks);$x++){          				    for($y=0;$y<count($tanks[$x]);$y++){          				        print "<p>".$tanks[$x][$y]."</p>";          				    }          				}          				print '</div>';  				    print '</div>';  			    print '</div>';  			      			      			     //If questions about css verify how Bootstrap 3 works  			    print '<div class="container">';  			        print '<div class="row">';          				          				//FOR FRUITS          				print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';          				for($x=0;$x<count($fruits);$x++){          				    for($y=0;$y<count($fruits[$x]);$y++){          				        print "<p>".$fruits[$x][$y]."</p>";          				    }          				}          				print '</div>';          				          				//FOR COLORS          				print '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">';          				for($x=0;$x<count($colors);$x++){          				    for($y=0;$y<count($colors[$x]);$y++){          				        print "<p>".$colors[$x][$y]."</p>";          				    }          				}          				print '</div>';  				    print '</div>';  			    print '</div>';  			}  			catch(Exception $e) {                  echo 'Message: ' .$e->getMessage();              }  		?>    </body>    </html>

I Hope this can help you

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data