I'm very new to php and wordpress and need help. I'm trying to change my bootstrap responsive grid with php. >992px I should have 3 columns, >768px I should have only 2 columns and <767px I should have only one. How can I do this with php? Really appreciate the help.
Here's my code:
<div class="row">
<?php $i = 1; while(have_posts()) : the_post();?>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="cover-card">
<?php the_post_thumbnail('full', array('class' => 'image img-responsive')); ?>
<div class="overlay">
<div class="text">
<strong><?php the_title(); ?></strong>
<?php the_content(); ?>
Comprar
</div> <!-- /.text -->
</div> <!-- /.overlay -->
</div> <!-- /.cover-card -->
</div> <!-- /.col-md-4 -->
<?php if ( $i % 3 === 0 ) { echo '</div> <!-- /.row -->
<div class="row">'; } ?>
<!-- store item -->
<?php $i++; endwhile; wp_reset_query(); ?>
</div>
This is what happens with my loop on the sm resolution:
<div class="col-lg-4 col-md-6 col-sm-12"></div>
The grid system is based off the idea that there are 12 columns. In the documentation it will describe what width pertains to the xs, sm, md, and lg classes.
The above solution should work because it will place three cards per row if the display is greater than 992px, two if greater than 768px, and one if less.
Here's a little example
Related
I'm creating a theme, and I used a condition to create an additional div with the class of "row" after 3 posts/columns are created. It works as expected, except when I minimize the screen to 1024x768, the columns have no margin in between them. And then they finally goes one under another one as expected on a smaller viewport. Not sure what to do, here's the code ...
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="row ">
<?php
if (have_posts() ):
$counter = 0;
while (have_posts() ) : the_post();
$counter++; ?>
<div class="col-sm-4">
<div class="card">
<div class="card_img_container">
<?php the_post_thumbnail( array(450, 450), array('alt' => get_the_title(), 'class' => 'card_image img-responsive') ); ?>
<span class="card_readmore">View Post</span>
</div>
<div class="card_excerpt">
<p class="content_category1"> <?php the_category( ', ' ); ?></p>
<?php the_excerpt(); ?>
<p> <span class="read_more">Read More</span> </p>
</div>
</div>
</div>
<?php if ($counter % 3 == 0) {
echo '</div><div class="row">';
} ?>
<?php
endwhile;
endif;
?>
</div> <!--Inner div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Main Div ROW-->
</div> <!--Container-->
<?php // get_sidebar(); ?>
<?php get_footer(); ?>
I'd probably do it like this:
<div class="col-md-4 col-sm-12">
content
</div>
Remember that the classes can be stacked on top of each other to get widht of 4 in MD-sized screen, and full width (12) in SM-Sized screen.
I hope I understand your problem.
I have something that I just can't understand. I did a one page layout site in wordpress. It consist of one template-index.php that only have one mainContainer div and about 6 include_once template-. Then in the admin section of wordpress I used advanced custom fields to create the different fields all related to template-index.php.
Everything shows up just fine except for the text on the last frame or last include if you will. But here is the strange thing. If I change the order of the last two includes both text shows up just fine and then when I change the order back the last include loose it's text again.
I checked the code, every php tag is closed just fine, the include before also. I don't know. Did something like this ever happen to one of you? What could it be?
Thanks
edit:
here is a bit of code.
So the index page is pretty simple:
<?php
/* Template Name: index template */
?>
<?php get_header(); ?>
<div class="mainContainer"id='fullpage'>
<?php include_once 'template-about.php'; ?>
<?php include_once 'template-theDesign.php'; ?>
<?php include_once 'template-theApp.php'; ?>
<?php include_once 'template-getApp.php'; ?>
<?php include_once 'template-community.php'; ?>
<?php include_once 'template-contact.php'; ?>
</div>
<?php get_footer(); ?>enter code here
the last two includes look like this:
<?php
/* Template Name: Bob community template */
?>
<!-- <div id="section-5"> -->
<div class="sectionContainer community section" id='section_five'>
<div class="container main">
<div class="vertical100 firstSection col-md-12 topSection ">
<section class='worldMap animation col-md-6'>
<div class="imgContainer">
<div class="wordpressImg">
<img class='worldMap' src="<?php echo get_template_directory_uri(); ?>/img/worldmap.png" />
</div> <!-- wordpressImg -->
</div><!-- imgContainer -->
</section>
<section class="explications col-md-6">
<div class="communityExplication">
<div class="wordpressTexte">
<?php the_field('community_text'); ?>
<div class="stories">
<?php
$args = array( 'post_type' => 'stories', 'posts_per_page' => 8, 'orderby' => 'rand' );
$loop = new WP_Query($args);
$posts = $loop->posts;
if(have_posts()) {
$first = true; ?>
<div class="storieAligner">
<div class="stories-container ">
<?php
$count = 0;
while($loop->have_posts() ) : $loop->the_post();
$randomPost = $posts[$count];
$image = get_field('images');
$temoignage = get_field('temoignage');
?>
<!-- <div class="storiePhoto"> -->
<div class='storiesThumbs' style='background-image: url("<?php echo $image['url']; ?>")' data-temoignage="<?php echo $temoignage; ?>"></div>
<div class="categorie"></div>
<!-- </div> -->
<?php $count++; endwhile; ?>
</div> <!-- stories-container -->
<div class="fullStorie hiddenStorie">
<div class="back"></div>
<div class="leftDiv">
<div class="leftContent">
</div>
</div>
<div class="rightDiv">
<div class="rightContent"></div>
</div>
</div>
</div> <!-- storieAligner -->
<?php }; ?> <!-- if have_posts -->
</div> <!-- stories -->
<div class="linkContainer" ><a class='formToggle pinkButton roll' href="#" title="Wha you say"><span data-title='What you say'>What you say</span></a></div>
</div> <!-- wordpressTexte -->
</div> <!-- commnunityExplication -->
<!-- <div class="storiesFormContainer"> -->
<div class="storiesForm hidden">
<div class="formContainer">
<h1><?php echo __('Leave a Review of your app ', 'site'); ?></h1>
<?php echo do_shortcode('[contact-form-7 id="89" title="community-contact"]'); ?>
</div>
</div>
<!-- </div> storiesFormContainer -->
</section>
</div> <!-- get app -->
</div> <!-- main -->
and the contact template like this
<?php
/* Template Name: Contact-us template */
?>
<!-- section-6 -->
<div class="sectionContainer contact section" id='section_six'>
<div class="container main" >
<div class="vertical100 col-md-12 topSection ">
<section class='explications col-md-3'>
<div class="blockTexte">
<div class="wordpressTexte">
<?php the_field('questions'); ?>
<a class ='pinkButton roll' href="#" title="visit page"><span data-title='<?php echo __('visit page', 'site'); ?>'><?php echo __('visit page', 'site'); ?></span></a>
</div>
</div>
</section>
<section class="formulaire col-md-9">
<div class="formContainer">
<div class="wordpressForm">
<?php echo do_shortcode('[contact-form-7 id="44" title="contact-us"]'); ?>
</div>
</div>
</section>
</div> <!-- knowBob -->
</div>
So what could be wrong?
P.s. I know there's a bit a french and english in the code. I usually write what comes up first in my head.
You need to reset the post data to the original query using wp_reset_postdata after you're done looping through a custom query:
<div class="stories-container ">
<?php
$count = 0;
while($loop->have_posts() ) : $loop->the_post();
$randomPost = $posts[$count];
$image = get_field('images');
$temoignage = get_field('temoignage');
?>
<!-- <div class="storiePhoto"> -->
<div class='storiesThumbs' style='background-image: url("<?php echo $image['url']; ?>")' data-temoignage="<?php echo $temoignage; ?>"></div>
<div class="categorie"></div>
<!-- </div> -->
<?php $count++; endwhile; wp_reset_postdata(); ?><!-- this line here -->
</div> <!-- stories-container -->
Otherwise the $post object will remain the last post of the $loop query, causing any other behind the scenes requests for post data down the road (in your case get_field) to reference the wrong post until you hit the outer loop again.
I have the following problem: i need to create really simple layout, on each line i would like to have 3 box all of the same size, and if i understood right, in order to achieve this i need to construct a structure like the following:
<div class="row">
<div class=" news col-md-3 col-centered">
</div>
<div class=" news col-md-3 col-centered">
</div>
<div class=" news col-md-3 col-centered">
</div>
</div>
This is my php script in the index.php:
<?php while(have_posts()) : the_post();?>
<div class="row">
<div class=" news col-md-3 col-centered">
<h4><?php the_title();?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
With this code, each box get a <div class="row"> element like the following:
<div class="row">
<div class=" news col-md-3 col-centered">
</div>
</div>
...
How can i fix this?
This is what i get now: if a box as more height than another, it leave the space under it without any element.
the height of the box depends on the content. what i would like to have is something like this:
Just move the row outside of The Loop, so that it's not repeated:
<div class="row">
<?php while(have_posts()) : the_post(); ?>
<div class="news col-md-4 col-centered">
<h4><?php the_title(); ?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
Also, you need to change your column width to col-md-4, since Bootstrap uses a 12-column grid, and you want 3 columns per row.
If you need to actually close out each row after 3 columns are shown, you need to use a counter:
<div class="row">
<?php $i = 1; while(have_posts()) : the_post();?>
<div class="news col-md-3 col-centered">
<h4><?php the_title();?></h4>
<p><?php the_excerpt(); ?> </p>
</div>
<?php if ( $i % 3 === 0 ) { echo '</div><div class="row">'; } ?>
<?php $i++; endwhile; wp_reset_query(); ?>
</div>
This last example will ensure that all floats are cleared, and that each row of elements are on their own lines.
I would like some help if possible in the following question:
I use in my Genesis theme a bootstrap grid, and would like to display the search results using this grid.
I created a search.php with the following code:
<?php
/**
* Search Results Template File
*/
get_header(); ?>
<header>
<h1>Search Results: "<?php echo get_search_query(); ?>"</h1>
<br>
</header>
<?php if ( have_posts() ) : // results found?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="gr-infos-container-cliente">
<div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
<div class="gr-img-cliente"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></div>
<div class="gr-nome-cliente"><?php the_title();?></div>
<div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
<div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
</div>
</div>
</div> <!-- Row -->
</div> <!-- Container -->
<?php endwhile; ?>
<?php else : // no results?>
<article>
<h1>No Results Found.</h1>
</article>
<?php endif; ?>
<?php get_footer(); ?>
genesis();
But in the search result, the content is aligned one on top of another and not in the selected grid.
Any tips you can give me?
I am very grateful for any help!
This is due to that your 'row' div is inside the while loop, causing it to generate multiple 'row' div instead of one.
To fix this, you'll need to place the while loop inside the 'row' div.
Try the code bellow
<?php
/**
* Search Results Template File
*/
get_header(); ?>
<header>
<h1>Search Results: "<?php echo get_search_query(); ?>"</h1>
<br>
</header>
<?php if ( have_posts() ) : // results found?>
<div class="container-fluid">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="gr-infos-container-cliente">
<div class="gr-promo-do-cliente"><?php the_field('tipo_de_promo');?></div>
<div class="gr-img-cliente"><img src="<?php echo get_field('foto_cliente_miniatura');?>" alt="" class="img-responsive center-block"></div>
<div class="gr-nome-cliente"><?php the_title();?></div>
<div class="gr-tagline-cliente"><?php the_field('tagline_do_anunciante');?></div>
<div class="gr-bairro-do-cliente"><i class="cliente fa fa-map-marker"></i><?php the_field('bairro_do_cliente');?></div>
</div>
</div>
<?php endwhile; ?>
</div> <!-- Row -->
</div> <!-- Container -->
<?php else : // no results?>
<article>
<h1>No Results Found.</h1>
</article>
<?php endif; ?>
<?php get_footer(); ?>
genesis();
I am using Bootstrap and WordPress to create a website. I have a my main content that is 8 columns and then my sidebar which is 4. On my normal pages I put them both in one row so they align correctly, however with this page, I used the WordPress loop to create many rows with content in, this means my sidebar is then not in the same row as my content and gets pushed to below it on the screen. Is it possible to align them horizontally?
Here is the code I’m using.
<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="row case-studies">
<div id="page_content">
<div class="col-md-8">
<div class="case_summary_image col-md-4">
<?php the_post_thumbnail('casestudy img-responsive');?>
</div>
<div class="case_summary col-md-8"></a>
<a style="font-size:18px; line-height:30px; color:#666666; font-weight:bold; text-decoration:none" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
<!-- sidebar -->
<?php endwhile; endif; ?>
<div class="col-md-4">
<?php get_sidebar();?>
</div>
You still need a container or a row to encompass the content and sidebar for the columns to work like you want them to.
You must create loop main area and add class to this. So,
<div class="col-md-8">
<!-- your loop, wp query -->
</div>
<div class="col-md-4">
<!-- your theme sidebar -->
</div>
In summary, you must have one col-md-8 and one col-md-4.