iam create website use template,
but i'm confused while loop / for loop one of script this template
this loop
2 div but only contain 2 content/article/news
This screenshot
http://i.stack.imgur.com/0OHsV.png
This code
<?php
$data_news = mysql_query("select * from news");
while($news=mysql_fetch_object($data_news)){
?>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ul>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/flex_small_img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ul>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/flex_small_img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
</ul>
</div>
<?php } ?>
How i can while loop/for loop like my this screenshot ?
Thank's :)
1you can use something like this , please try
<?php
$data_news = mysql_query("select * from news");
$count=1;
while($news=mysql_fetch_object($data_news)){
?>
<?php if($count % 2!=0 ) {?>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ul>
<?php } ?>
<li class="clearfix">
<div class="scale_image_container">
<img src="images/flex_small_img1.jpg" alt="" class="scale_image">
</div>
<div class="post_text">
<h4><?php echo $news->title ?></h4>
<div class="event_date"><?php echo tgl($news->datenews) ?></div>
</div>
</li>
<?php if($count % 2==0) {?>
</ul></div>
<?php } ?>
<?php $count++;} ?>
Related
I am trying to display a piece of HTML code I added to a WordPress website but I do not want to use the echo function as it affects the loop. I had to use a WP_query which works in a certain way to get what I want to do. My code works great but I don't want it on certain pages.
This is what I have tried so far
<?php
if(!is_front_page()){
<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
<!--Beginning of responsive slider-->
<?php $custom_query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'featured-posts',
));
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<div class="card-container">
<a href="<?php the_permalink(); ?>" class="card">
<div class="img">
<img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="">
</div>
<div class="info">
<h5><?php the_title(); ?></h5>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
}
?>
But this immediately throws an error.
I haven't checked if your code works. But the provided code without syntax errors would be:
<?php
if (!is_front_page()) {
?>
<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
<!--Beginning of responsive slider-->
<?php $custom_query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'featured-posts',
));
while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
<div class="card-container">
<a href="<?php the_permalink(); ?>" class="card">
<div class="img">
<img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="">
</div>
<div class="info">
<h5><?php the_title(); ?></h5>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query
?>
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
<?php } ?>
I am trying to get data from a database and in the frontend I am showing data in cards in 1 row and 2 columns using bootstrap and PHP. But, I am getting the data for the first row but the remaining are cards coming one below one
<?php
$con = mysqli_connect('localhost', 'root', '', 'applicants');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$qry = "select * from feedback";
$result = mysqli_query($con, $qry);
?>
<div class="main-content">
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<?php $i=0;
while ($row = $result->fetch_assoc()) {
$i++;?>
<?php if ($i %2 == 0){?>
<!-- <div class="row"> -->
</div>
<div class="col-6 mt-5"><?php } ?>
<div class="card">
<div class="card-body">
<h5 class="card-title"> <?php echo $row['username']?></h5>
<h6 class="card-subtitle mb-2 text-muted"><?php echo $row['email'] ?></h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6><?php echo $row['subject'] ?></h6>
<p class="card-text"><?php echo $row['message'] ?></p>
</div>
</li>
</ul>
</div>
</div>
<?php if ($i %2 == 0){?>
</div>
<!-- </div> --><?php } ?>
<!-- </div> -->
</div>
<?php } ?>
</div>
</div>
Your tags for the row and cols seem to be off. Please compare them against this code that generates two rows:
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
looking for a steer in the right direction getting this loop working. I'm nearly there but not 100% as I've got a mysterious box appearing at the top and the bottom of the search results. Would anyone be able to check over to see if the loop is right, please?
I've tried jigging the loop around but can't make any sense of it.
<?php get_header(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<p class="text-muted text-size-small">
<?php
global $wp_query;
echo 'You have '.$wp_query->found_posts.' results found.';?>
</p>
<hr>
<?
php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="media-body">
<h6 class="media-heading text-semibold">
<?php echo get_post_meta(get_the_id(), 'title', true ); ?>,
<?php echo get_post_meta(get_the_id(), 'firstname', true ); ?>,
<?php echo get_post_meta(get_the_id(), 'lastname', true ); ?>
</h6>
<ul class="list-inline list-inline-separate text-muted mb-10">
<li><a href="#" class="text-muted">
<?php echo get_post_meta( get_the_id(), 'type', true ); ?>
</a> </li>
<li><?php echo get_post_meta(get_the_id(), 'netbios_name', true ); ?> |
<?php echo get_post_meta(get_the_id(), 'device_class', true ); ?></li>
</ul>
<?php echo get_post_meta( get_the_id(), 'asset_id', true ); ?>
<?php echo get_post_meta(get_the_id(), 'asset_status', true ); ?>
</div>
<div class="media-right text-nowrap">
<a href="<?php the_permalink();?>"
class="btn btn-warning">View</a>
</div>
</li>
<ul class="media-list content-group">
<li class="media panel panel-body stack-media-on-mobile">
<div class="media-left">
<a href="#">
<img src="assets/images/demo/brands/dell.png" class="img-rounded img-lg" alt="">
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php get_template_part('footer', 'simple');?>
<?php get_footer(); ?>
Here's what the HTML view is spitting out
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<p class="text-muted text-size-small">
You have 3 results found. </p>
<hr>
<div class="media-body">
<h6 class="media-heading text-
semibold">
, , </h6>
<ul class="list-inline list-inline-
separate text-muted mb-10">
<li><a href="#" class="text-
muted"> </a></li>
<li> | </li>
</ul>
</div>
<div class="media-right text-nowrap">
View
</div>
</li>
<ul class="media-list content-group">
<li class="media panel panel-body stack-
media-on-mobile">
<div class="media-left">
<a href="#">
<img src=" class="img-rounded
img-lg" alt="">
</a>
</div>
<div class="media-body">
<h6 class="media-heading text-
semibold">
34
, , </h6>
<ul class="list-inline list-inline-
separate text-muted mb-10">
<li><a href="#" class="text-
muted"> </a></li>
<li> | </li>
</ul>
</div>
<div class="media-right text-nowrap">
<a href="" class="btn btn-
warning">View</a>
</div>
</li>
<ul class="media-list content-group">
<li class="media panel panel-body stack-
media-on-mobile">
<div class="media-left">
<a href="#">
<img src=" class="img-rounded
img-lg" alt="">
</a>
</div>
<div class="media-body">
<h6 class="media-heading text-
semibold">
34
Mr, User, User </h6>
<ul class="list-inline list-inline-separate text-muted mb-10">
<li>User </li>
<li> | </li>
</ul>
</div>
<div
class="media-right text-nowrap">
View
</div>
</li>
<ul class="media-list content-group">
<li class="media
panel panel-body stack-media-on-mobile">
<div
class="media-left">
<a
href="#">
<img src=" class="img-rounded img-lg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /main content -->
</div>
<!-- /page content -->
/div>
<!-- /page container -->
Hello guys I'm working on a wordpress theme/template and I'm having problems when clicking on blog post title in index.html. It will redirect me to correct link on address bar however, single.php is not displaying anything. I'm not sure if the page is getting called or what's actually going on. If you can weight your 2cents thanks here's the link to wordpress blog: http://pctechtips.org/testblog
index.php
<?php get_header(); ?>
<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"><?php bloginfo('name'); ?></h1>
<p class="lead"><?php bloginfo('description'); ?></p>
</div>
</div>
<!-- /jumbotron -->
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Blog Post -->
<div class="mb-4">
<div class="card-body">
<a href="<?php the_permalink(); ?>">
<h2 class="card-title"><?php the_title(); ?></h2>
</a>
<p class="blog-post-meta">
<?php echo Date('M d, Y'); ?> by <?php the_author(); ?>
</p>
<!-- feature image -->
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<p class="card-text"><?php the_excerpt(); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found!'); ?></p>
<?php endif; ?>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>
single.php
<?php get_header(); ?>
<!-- jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4"><?php bloginfo('name'); ?></h1>
<p class="lead"><?php bloginfo('description'); ?></p>
</div>
</div>
<!-- /jumbotron -->
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="blog-post col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Blog Post -->
<div class="blog-post-title mb-4">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="blog-post-meta">
<?php echo Date('M d, Y'); ?> by <?php the_author(); ?>
</p>
<!-- feature image -->
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumb">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<p class="card-text"><?php the_content(); ?></p>
<hr>
<!-- comments -->
<?php comments_templates(); ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<p><?php __('No Post Found!'); ?></p>
<?php endif; ?>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<?php get_footer(); ?>
So I'm trying to get a carousel slider to display 3 posts at a time through a loop for featured custom posts type.
This is the code that I have for the carousel:
<div class="container">
<div class="row">
<h2>Featured Posts</h2>
</div>
<div class='row'>
<div class='col-md-8'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
</div>
I just want to display the thumbnails with the permalink for the following query:
<?php
$featured = new WP_Query( array(
'post_type' => 'franchisings',
'posts_per_page' => '3',
'meta_key' => 'meta-checkbox',
'meta_value' => 'yes'
) );
if ($featured->have_posts()): while($featured->have_posts()): $featured->
the_post(); ?>
<div class="row">
<div class="col-md-3">
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?></a>
</div>
</div>
<?php
endif;
endwhile; else:
endif;
?>
I don't want to use plugins, and I'm using the bootstrap framework. And this is what I'm going for, but with the featured posts' thumbnails instead:
I can get the featured post types to display but I can't get them properly inside the carousel.
Can you help out? Thanks
CODE UPDATED WITH #UCHENG ANSWER
<div class="container">
<div class="row">
<h3>
Franchisings em Destaque
</h3>
<div class='col-md-8'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<?php
$featured = new WP_Query( array(
'post_type' => 'franchisings',
'posts_per_page' => '-1',
'meta_key' => 'meta-checkbox',
'meta_value' => 'yes'
) );
$counter = 0;
if ( $featured->have_posts()): while( $featured->have_posts() ): $featured->the_post(); ?>
<?php if ( $counter%3 == 0 ): ?>
<div class="item <?php if ( $counter == 0 ): ?>active<?php endif; ?>">
<div class="row">
<?php endif; ?>
<?php if ( has_post_thumbnail() ): ?>
<div class="col-md-4">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(array(200, 200)); ?>
<?php $counter++; ?>
</a>
</div>
<?php endif; ?>
<?php if ( $counter%3 == 0 ):?>
</div>
</div><!--end item-->
<?php endif; ?>
<?php endwhile;endif;
?>
You need to set posts_per_page as -1 to get all posts.
<div class="container">
<div class="row">
<h2>Featured Posts</h2>
</div>
<div class='row'>
<div class='col-md-8'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<?php
$featured = new WP_Query( array(
'post_type' => 'franchisings',
'posts_per_page' => '-1',//-1 to get all posts
'meta_key' => 'meta-checkbox',
'meta_value' => 'yes'
) );
$counter = 0;
if ( $featured->have_posts()): while( $featured->have_posts() ): $featured->the_post(); ?>
<?php if ( $counter%3 == 0 ): ?>
<div class="item <?php if ( $counter == 0 ): ?>active<?php endif; ?>">
<div class="row">
<?php endif; ?>
<?php if ( has_post_thumbnail() ): ?>
<div class="col-md-4">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<?php $counter++; ?>
</a>
</div>
<?php endif; ?>
<?php if ( $counter%3 == 0 ):?>
</div>
</div><!--end item-->
<?php endif; ?>
<?php endwhile;endif;
</div><!--carousel-inner-->
</div>
</div>
</div><!--end row-->
</div>
There is no carousel component in Bootstrap 3, but you can try carousel in Bootstrap 4.
In most of my projects, I use Owl Carousel to make this effect. It' easy to use and has lots options to customize, of course, it's responsive.
Pre-Step
Please enqueue the owl-carousel js and css by using wp_enqueue_script hook.
The Html
<div class="container">
<div class="row">
<h2>Featured Posts</h2>
</div>
<div class='row'>
<div class='col-md-8'>
<div class="owl-carousel" id="media">
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
<div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
</div>
</div>
</div>
</div>
The CSS
#media {
width: 500px
}
The JS
$(document).ready(function() {
$("#media").owlCarousel({
items : 3,
});
});
The demo on CodePen: http://codepen.io/anon/pen/QGNqNa
For more customize options, please check owl-carousel website: http://owlgraphic.com/owlcarousel/