In every loop I want to alternate the layout of my blocks, so it would be like this:
Loop 1: Left column image, right column text
Loop 2: Left column text, right column image
But so far all i'm managing so far is each block is on the same side or the first block is duplicated, here is my code so far:
Any help or a point in the right direction would be greatly appreciated
<?php $i = 0;
foreach ($homepageblocks as $block):
$i++; ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
</div>
</div>
<?php if($i%2 == 0): ?>
<div class="row">
<div class="container container-fluid">
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
Add else branch to your if:
foreach ($homepageblocks as $block):
$i++;?>
<div class="row">
<div class="container container-fluid">
<?php
// one layout type
if($i%2 == 0):?>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>" />
</div>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<?php
// another layout type
else:?>
<div class="col-md-6">
<h2><?php echo $block['title']; ?></h2>
<?php echo $block['content']; ?>
Read More
</div>
<div class="col-md-6 nopadding">
<img src="<?php echo '/uploads'.$img_path; ?>" alt="<?php echo $block['title']; ?>"/>
</div>
<?php
endif;?>
</div>
</div>
<?php
endforeach; ?>
Related
<?php $section1 = get_field('section1'); ?>
<div class="section1" id="section1">
<div class="container">
<h2><?php echo $section1['title']; ?></h2>
<div class="quote-triangle">
<p>
<?php echo $section1['quote']; ?>
</p>
<div class="quote__moving-border"></div>
</div>
<div class="bottom">
<div data-aos="fade-down">
<div class="leftside">
<h3>
<?php echo $section1['title_image']; ?>
</h3>
<div class="caption"><?php echo $section1['caption_image']; ?></div>
<div class="desc">
<p>
<?php echo $section1['desc_image']; ?>
</p>
</div>
</div>
</div>
<div data-aos="fade-down">
<div class="rightside">
<img src="<?php echo esc_url( $secttion1['image']['url'] ); ?>" alt="" class="rightside__img">
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>
I had followed literally the ACF documentation for the GROUP type but when I put the if in the PHP tag the whole section disappears and when I remove if the section back but The Group type still not worked.
Here's the div that manages the look of each item in the loop:
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
If I set the height to a fixed number (eg: 450x), the images are aligned in a row. But that will make the page non mobile responsive. If I set the height to auto or to a percentage like 30%, the images become mobile responsive but they don't align. I get 2 images that separate into different rows.
Also, I got 2 sections of image. One is called Our Leadership and the other is called Our Team. The section at the bottom is aligned correctly and is contained in a div. The div above it refuses to be contained in a div. If I wrap it in a div, Only the first item wraps itself in the div. I've no idea why.
eg:
<center>
<div>
<div>first item here</div>
</div>
<div>second item here</div>
<div>third item here</div>
<div>fourth item here</div>
Here's the complete code for both sections:
<center><h2>Our Leadership</h2></center>
<center><div>
<?php
$people = get_field('people');
$a = 0;
foreach ($people as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
<center><h2>Our Team</h2></center>
<center><div>
<?php
$people2 = get_field('people_bottomsection');
$a = 0;
foreach ($people2 as $r) {
$a++;
?>
<div style="float:left;width:30%;padding:30px;height:auto;">
<img src="<?php echo $r['image']['sizes']['team']; ?>" style="max-width:750px !important;width:100%;">
<h3>
<?php echo $r['name']; ?>
</h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<?php echo $r['intro_text']; ?>
<?php if ($r['learn_more_text']) { ?>
Learn More
<?php } ?>
<?php if ($r['learn_more_text']) { ?>
<div id="<?php echo sanitize_title($r['name']); ?>" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h3><?php echo $r['name']; ?></h3>
<div class="position">
<?php echo $r['position']; ?>
</div>
<div class="content">
<?php echo $r['learn_more_text']; ?>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div></center>
<div style="clear:both;"></div>
Check out the source code at: http://www.equitasmg.com/who-we-are-2/
it's because the items in the loop are having different height. So, try adding a constant height to each item in the loop.
Eg:
<div style="float:left;width:30%;padding:30px;min-height:550px;"></div>
Let's say I have 2 styles. Style 1 and Style 2
I would like to show every odd number post in the style 1 and even number posts in style 2
Below is my template file:
<?php /* Template Name: Home v2 */ get_header(); ?>
<main role="main">
<!-- section -->
<section>
<?php
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('showposts=' . $theme_options['blog-post-per-page'] . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="tiles-block w-clearfix">
<div class="float-left">
<div class="content-block w-clearfix">
<h5 class="black travel"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"> <?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
<div class="float-left natural-forest">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
The code above works good. but it gives only style 1.
I already have html setup for style 2 but don't know how to implement in the code above.
This is my style2 block
<div class="tiles-block w-clearfix">
<div class="float-right">
<div class="content-block w-clearfix">
<h5 class="black photography">PHOTOGRAPHY</h5>
<h1 class="black mastheading">title test</h1>
<div class="date-block w-container">
<div class="black mini-date">October 26, 2016</div>
<img class="mini-icon" src="http://aa.com/aa.png">
<div class="black mini-date">15</div>
<img class="mini-icon" src="http://bb.com/bb.png">
<div class="black mini-date">13</div>
</div>
<div class="black iltalica">Lorem Ipsuim dolor....</div>
<a class="a8 cta w-button" href="#">continue reading</a></div>
</div>
<div class="float-left window-light">
<div class="thumb">
<img src="<?php echo get_template_directory_uri() . '/images/post2.png' ?>" />
</div>
</div>
<img class="left-arrow" src="http://cc.com/cc.png">
</div>
This will get a little messy in PHP because you'd need several if statements. You might consider naming some of the inner divs the same, and making only the outer divs different names, and doing more of the work in CSS. That said, here's how you would do it:
Set a flag that changes each time through the loop, and check the value of the flag before you output your HTML.
$style_flag = 1;
while ($wp_query->have_posts()) : $wp_query->the_post();
//check the value
if ($style_flag == 1){
// output style 1
} else {
// output style 2
}
// do everything else you need to do in the loop
// switch the value of the flag
$style_flag = $style_flag * -1;
end while;
Back to CSS for a moment, though. Check out the nth-child selector if you're not familiar with it already: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I have found the solution to my problem.
<?php query_posts('showposts=0'); ?>
<?php
$i = 1;
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if(($i % 2) == 0) { ?>
<div class="tiles-block w-clearfix">
<div class="float-right">
<div class="content-block w-clearfix">
<h5 class="black photography"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a></div>
</div>
<div class="float-left window-light">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="left-arrow" src="<?php echo get_template_directory_uri() . '/images/left-arrow.png' ?>">
</div>
<?php } elseif (($i % 2) !== 0) { ?>
<div class="tiles-block w-clearfix">
<div class="float-left">
<div class="content-block w-clearfix">
<h5 class="black travel"><?php echo the_category();?></h5>
<h1 class="black mastheading"><?php the_title(); ?></h1>
<div class="date-block w-container">
<div class="black mini-date"><?php echo get_the_date(); ?></div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/comment-icon.png' ?>">
<div class="black mini-date">32</div>
<img class="mini-icon" src="<?php echo get_template_directory_uri() . '/images/heart-icon.png' ?>">
<div class="black mini-date">14</div>
</div>
<div class="black iltalica"><?php the_excerpt(); ?></div>
<a class="a8 cta w-button" href="<?php the_permalink(); ?>">continue reading</a>
</div>
</div>
<div class="float-left natural-forest">
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
</div>
<img class="right-arrow" src="<?php echo get_template_directory_uri() . '/images/right-arrow.png' ?>" />
</div>
<?php } ?>
<?php $i++; ?>
<?php endwhile; ?>
<?php endif; ?>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following PHP code, which dynamically generates content:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $_item): ?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
The above code outputs the following structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
<div class="col-sm-3">product5</div>
<div class="col-sm-3">product6</div>
.
.
.
etc..
</div>
</div>
</div>
I want to create this structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
.
.
.
etc...
</div>
How do I change the dynamic structure so they get what they want?
Thanks in advance!
In order to create the structure you want:
You need to put <div class="item active"> in the foreach loop as well, because in order to have many items, you want that to be repeated many times too.
You have to remove active from <div class="item active"> as it will be added to every item, while we only want it to be in the first one.
You have to create a checking variable, so that the class active is added to the first item only.
Your final code should look like:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<?php
$i = 0; /* This is the checking variable */
$active; /* This is the variable containing the class 'active' */
foreach ($this->getItems() as $_item):
$i++; /* We increment the checking variable in each loop */
$active = ($i === 1) ? "active" : ""; /* We make the check */
?>
<div class="item <?php echo $active;?>">
<!-- The rest of your code as it is -->
</div>
<?php
endforeach;
?>
</div>
</div>
[EDIT]:
Considering your comment, in the case of wanting four products in each item, you would need to use another loop inside <div class = "row">.
The key part you are doing wrong in your code, however, that doesn't change, is that you don't loop the <div class = "item"> and that's way you have only one.
A preview of how your code inside <div class="item"> should be:
<div class="item <?php echo $active;?>">
<div class="row">
<?php
for ($i = 0; $i <= 4; ++$i):
?>
<div class="col-sm-3"><!-- The rest of the code --></div>
<?php
endfor;
?>
</div>
</div>
Try this:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $key=>$_item): // add $key in for loop
if($key != 0 && $key % 4 == 0) { // just add this code - it will check if 4 records has been displayed re create row div...
echo '</div><div class="row">';
}
?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
I've made a shortcode function that returns some Advanced Custom Fields depending on which repeater field is chosen. It displays correctly and in the right order however any content typed underneath the shortcode is moved outside of its <article> container element.
Here is the code:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
</div>
</div>
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');
Can anyone help solve this mystery? Many thanks.
You have two extra closing <div>'s in your code.
Try this:
function boxes_shortcode($atts, $content = null) {
ob_start(); ?>
<div id="boxes">
<div class="box-gutter"></div>
<div class="box-sizer"></div>
<?php while( have_rows('box_repeater') ): the_row();
$image_id = get_sub_field('link_image');
$image_size = 'box-thumbnail';
$image_array = wp_get_attachment_image_src($image_id, $image_size);
$linkImage = $image_array[0]; ?>
<?php if(get_sub_field('box_type') == "box-link"): ?>
<div class="box">
<div class="link-box">
<img src="<?php echo $linkImage; ?>" alt="<?php echo $linkImage['alt']; ?>" />
<a class="caption-wrapper" href="http://www.google.com">
<span id="link-box-content" style="background:<?php the_sub_field('link_background_colour'); ?>">
<h6 style="color:<?php the_sub_field('link_title_colour'); ?>"><?php the_sub_field('link_title'); ?></h6>
<h4 style="color:<?php the_sub_field('link_text_colour'); ?>"><?php the_sub_field('link_text'); ?></h4>
<p style="color:<?php the_sub_field('link_text_colour'); ?>" href="<?php the_sub_field('link_url'); ?>"><?php the_sub_field('link_url_text'); ?> ></p>
</span>
</a>
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-quote"): ?>
<div class="box">
<div class="quote-box">
<div class="quotation-mark"></div>
<h4><?php the_sub_field('quote'); ?></h2>
<p><?php the_sub_field('quote_source'); ?></p>
<?php the_sub_field('quote_link_text'); ?> >
</div>
</div>
<?php endif;
if(get_sub_field('box_type') == "box-twitter"): ?>
<div class="box">
<div class="twitter">
<a class="twitter-timeline" href="<?php the_sub_field('twitter_url'); ?>" data-widget-id="<?php the_sub_field('twitter_widget_id'); ?>" data-chrome="noheader noscrollbar nofooter noborders transparent" data-tweet-limit="<?php the_sub_field('number_of_tweets'); ?>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a class="twitter-badge" href="<?php the_sub_field('twitter_url'); ?>"></a>
<div class="twitter-bottom">See more ></div>
</div>
</div>
<?php endif;
endwhile;?>
</div>
<!--/div>
</div-->
<?php
/* Get the buffered content into a var */
$sc = ob_get_contents();
ob_end_clean();
return $sc;
}
add_shortcode('boxes', 'boxes_shortcode');