Bootstrap row height option - css

First post - be gentle :)
I've run into an issue with row height in Bootstrap (I think). I'm brand new to Bootstrap and I'm trying to do some basic edits to my Wordpress site and really want to further my knowledge. Previously I had 4 items equally distributed across the page and it looked great. Well, I've added a fifth item and it's been dropped to the next row below the first four but isn't low enough on the page and blocks the content of one of the original four items.
How can I adjust the height of the offending row(s) to drop the bottom item low enough to accommodate the upper row?
Link to the actual page: HERE
Please see image and code below.
Offending item
HTML from the entire page:
<?php
/*
template name:Home Page
*/
get_header();
?>
<!-- banner starts -->
<div class="banner">
<div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-captions"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slides = get_field('slides','4');
if(is_array($slides) and count($slides)>0){
$num=0;
foreach($slides as $slides_val) {?>
<div class="item <?php if($num==0) echo "active"; ?>">
<img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">
<div class="carousel-caption">
<div class="banner-heading">
<span><?php echo $slides_val['slide_content_heading']; ?></span>
</div>
<?php echo $slides_val['slide_content']; ?>
<!-- Contact Us-->
</div>
</div>
<?php $num++; } }?>
</div>
<!-- Controls -->
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- banner ends -->
<!-- content starts -->
<div class="content">
<div class="process-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Process</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'process',
'orderby'=> 'post_date',
'order' => 'DESC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-4 col-md-4 col-lg-4">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-inner">
<div class="filler-title"><?php the_title(); ?></div>
<?php the_content(); ?>
<!-- Read More-->
</div>
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<?php include('vip.php');?>
<div class="service-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Services</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'services',
'order' => 'ASC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-3 col-md-3 col-lg-3">
<div class="process-fillers-image-section">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-category"><?php the_title(); ?> </div>
</div>
<p><?php the_excerpt(); ?> </p>
Read More
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<div class="instagram-section">
<div class="container">
<div class="row">
<div class="process-heading">
<div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>
#H2Htpe</div>
<?php echo do_shortcode('[instagram]'); ?>
</div>
</div>
</div>
</div>
<!-- content ends -->
<?php get_footer('footer'); ?>

Related

Wordpress Page not loading correct with Stylepath

I have got an error in my code and I cant find why and where it orginates. But I know the template isnt loading correct. I believe the problem could start in the code below.
The problem started when I changed echo site_url to echo get_post_type_archive_link.
single-event.php
<?php
get_header();
while(have_posts()) {
the_post(); ?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpg') ?>)"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title"><?php the_title();?></h1>
<div class="page-banner__intro">
<p>DONT FORGETT TO REPLACE ME LATER!!</p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<div class="metabox metabox--position-up metabox--with-home-link">
<p>
<a class="metabox__blog-home-link" href="<?php echo site_url('/blog'); ?>">
<i class="fa fa-home" aria-hidden="true"></i> Events Home</a>
<span class="metabox__main"><?php the_title(); ?></span>
</p>
</div>
<div class="generic-content"><?php the_content();?></div>
<h2>
<?php }
get_footer();
?>
single.php
<?php
get_header();
while(have_posts()) {
the_post(); ?>
<div class="page-banner">
<div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpg') ?>)"></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title"><?php the_title();?></h1>
<div class="page-banner__intro">
<p>DONT FORGETT TO REPLACE ME LATER!!</p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<div class="metabox metabox--position-up metabox--with-home-link">
<p>
<a class="metabox__blog-home-link" href="<?php echo get_post_type_archive_link('event'); ?>">
<i class="fa fa-home" aria-hidden="true"></i> Blog Home</a>
<span class="metabox__main">Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></span>
</p>
</div>
<div class="generic-content"><?php the_content();?></div>
<h2>
<?php }
get_footer();
?>
Error message:

posts_per_page showing only 1 post instead of 3 posts

I have a loop that should show recent blog posts. The problem is the posts_per_page shows only one post instead of three posts.
I couldn't figure out where I am going wrong.
I tried the following steps but did not help, but did not work for me.
ignore_sticky_posts = > true,
update_post_term_cache=>false,
nopaging=>true
The code is:
<section class="ftco-section" id="blog-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-7 heading-section text-center ftco-animate">
<h1 class="big big-2">Blog</h1>
<h2 class="mb-4">Our Blog</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
<div class="row d-flex">
<?php if (have_posts()) :
while (have_posts()) :the_post(); ?>
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
<a href="<?php the_permalink(); ?>" class="block-20" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>');">
</a>
<div class="text mt-3 float-right d-block">
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">June 21, 2019</span>
Admin
<span class="icon-chat"></span> 3
</p>
</div>
<h3 class="heading"><?php the_title(); ?></h3>
<p><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</section>
Is this the correct way to loop?
The problem that I'm getting is that now I do not see any of the blog posts.
From what I see in your code, you are displaying your content outside the while loop. Also, you were merging the query arguments array with the $wp_query->query and those are different. You want to use: $wp_query->query_vars
Before you read further, make sure you visit the following links:
query_posts() documentation
The Loop documentation
Your code should be something like:
<?php
global $wpdb;
$args = array(
'post_type' => 'post',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 3,
);
$this_query = new WP_Query( $args );
?>
<section class="ftco-section" id="blog-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-7 heading-section text-center ftco-animate">
<h1 class="big big-2">Blog</h1>
<h2 class="mb-4">Our Blog</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
</div>
</div>
<div class="row d-flex">
<?php if ( $this_query->have_posts() ) : ?>
<?php while ( $this_query->have_posts() ) : $this_query->the_post(); ?>
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
<a href="<?php the_permalink(); ?>" class="block-20" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>');">
</a>
<div class="text mt-3 float-right d-block">
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">June 21, 2019</span>
Admin
<span class="icon-chat"></span> 3
</p>
</div>
<h3 class="heading"><?php the_title(); ?></h3>
<p><?php echo wp_trim_words(get_the_excerpt(), 30); ?></p>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata();
else : ?>
<p><?php esc_html_e( 'Sorry, no posts found.' ); ?></p>
<?php endif; ?>
</div>
</div>
</section>

Wordpress search results page returning 404, but the records exist in the database

I have 2 wordpress installations, 1 is for major content, the other is a help center.
the help center is installed in the major content directory. So you have the wordpress directory, and another in that directory, making it so we can use different themes and change the look between the two.
I'm just curious, on the search results page, I'm getting the correct url's, but they are going to 404 pages. I verified in the database that these records exist, so it's not a matter of the database not making these records and that these pages don't exist. Another note is that the search results page will return pages that have been created, but
<?php
get_header();
global $wp_query;
$total_result = $wp_query->found_posts;
?>
<div class="main">
<div class="main-hero">
<div class="container">
<h1>Boxstorm Help Center</h1>
<p>Search the Boxstorm Help Center documentation</p>
<div class="search-wrapper">
<form id="searchform" class="searchform" role="search" method="get" action="<?php echo site_url(); ?>">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input id="s" name="s" type="text" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'boxstorm' ); ?>" value="<?php echo get_search_query(); ?>">
<span class="search-button-wrapper">
<input id="searchsubmit" type="submit" value="">
<i class="fa fa-search"></i>
</span>
</div>
</form>
</div><!-- / .search-wrapper -->
</div>
</div><!-- /.main-hero -->
<nav class="main-hero-subnav cd-secondary-nav">
<div class="container">
<div class="is-hidden-mobile">
<?php get_breadcrumb(); ?>
</div>
</div>
</nav>
<div class="panel sub-nav-hero">
<div class="container page">
<div class="columns is-multiline is-mobile search-results">
<div class="column is-3-desktop is-6-tablet is-full-mobile left">
<div class="columns top-cats is-multiline is-mobile is-centered">
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/getting-started/">
<i class="fas fa-list-ul"></i>
<h2>Getting Started</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/documentation/">
<i class="fas fa-book"></i>
<h2>Documentation</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/videos/">
<i class="far fa-play-circle"></i>
<h2>Browse Videos</h2>
</a>
</div>
</div>
<div class="column is-11-desktop is-10-tablet is-6-mobile">
<div>
<a href="<?php echo site_url(); ?>/contact/">
<i class="fas fa-at"></i>
<h2>Contact Support</h2>
</a>
</div>
</div>
</div>
</div>
<div class="column is-9-desktop is-6-tablet is-full-mobile right">
<h1 class="results"><?php printf( __( 'Search results for: <b>%s</b>', 'boxstormsupport'), get_search_query() ); ?></h1>
<div class="columns is-multiline">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content', 'search' ); ?>
<div class="column is-12 results">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<?php the_permalink(); ?>
</div>
<?php endwhile; else : ?>
<div class="column is-12">
<p><?php _e( '<p>Sorry, but there were no results for the term <b style="font-weight:900;">'.get_search_query().'</b>. Please refine your search terms and try again.</p>' ); ?></p>
</div>
<?php endif; ?>
</div><!-- / columns -->
</div><!-- / columns is-9 right -->
</div><!-- / search-results -->
</div>
</div>
</div>
<?php get_footer(); ?>
The site is live at https://www.boxstorm.com/help-center. If you'd like to see the problem.
The pages follow this format in wordpress:
Pages parameters:
This is what I'm seeing:
Chrome
Firefox
Any help would be appreciated, thanks.

bootstrap - wordpress grid

I am making a wp custom theme with bootstrap. I implemented a grid to display the latest posts. I want to display 4 items in a row for larger screens (down to 768px = col-sm-3) and then 2 items per row (col-xs-6). It kinda works but at some point the items are not displaying properly. In particular, when the screen width is between 1200 - 768 or less than 579, 1 row every 4 is broken and only displays 1 item (see images). I'm not sure where the issue is.
I read about the .cleardiv class but I don't understand where I should put it.
You can see the website here. (Please note that the top row with the 4 items is working fine as it is generated before the other 12 in a different row). Just click the "v" arrow to display the rows with the issue.
Thanks
<section class="bg-white" id="in_evidenza">
<div class="container">
<!-- this is the first row which is always visible. no issue here -->
<div class="row"> ...
</div>
<!-- second row: issue here -->
<div class="row" id="news-content">
<?php
$args = array( 'numberposts' => '12', 'category_name' => 'news', 'orderby' => 'date', 'offset' => '4' );
$recent_posts = wp_get_recent_posts( $args );
$i = 1;
foreach( $recent_posts as $recent ):
$post_img_src = "http://www.assatena.it/testbs/wordpress/wp-content/uploads/2016/03/".$i.".png";
$post_title = $recent["post_title"];
$post_id = $recent["ID"];
$post_content = get_post_field('post_content', $post_id);
$post_date = get_the_date("d/m/Y", $post_id);
if(strlen($post_title) >= 19){
$post_title_short = substr($post_title, 0, 19);
$post_title_short.="...";
}else
$post_title_short = $post_title;
$teaser = substr(strip_tags($post_content), 0, 66);
$teaser.=" . . .";
?>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6" id="col-news-all">
<div class="text-center">
<img class="img-rect" width="160" height="100" alt="" src='<?php echo $post_img_src; ?>' />
<h3><?php echo $post_title_short; ?></h3>
<p>
<?php echo $teaser; ?>
<br> <!-- open -->
<a data-toggle="modal" href="" data-target="#modal-news-<?php echo $post_id; ?>">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</a>
</p>
</div>
</div>
<div id="modal-news-<?php echo $post_id; ?>" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="modal-body">
<h2><?php echo $post_title; ?></h2>
<p class="post_date">- <?php echo $post_date; ?> -</p>
<hr class="star-primary">
<img id="news_img" class="img-responsive img-modal" alt="News img" src="<?php echo $post_img_src; ?>" />
<div class=" text-left">
<div class="my_post_content">
<p><?php echo $post_content; ?></p>
</div>
</div>
<div class="text-center"> <!-- close -->
<a data-dismiss="modal" class="btn btn-success btn-xl ">Chiudi</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$i%=4;
$i++;
endforeach;
?>
</div> <!-- row -->
<div class="text-center">
<a data-toggle="modal" href="" data-target="">
<span id="news-all" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
</div>
</div> <!-- container -->
</section>
images:
Before your $i++ write an if statement to place a clearfix
<?php if ($i % 4 == 0); ?>
<div class="clearfix"></div>
<?php endif; ?>
EDIT: for the mobile you can set another clearfix with $i % 2 == 0 and hide it in desktops via visible-xs

Wordpress featured image / post thumbnail not showing

I'm trying to show the featured image or the post thumbnail in every list items < li >. Here's the code:
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>
but, it's not showing after all while on the other page shows. Please help.
Should you have get_the_post_thumbnail($row_submenu_sql->ID); and not $row_submenu_sql->ID $post->ID is not defined in that loop.
<div class="row headline">
<ul class="col-md-12 col-sm-12">
<?php
$sql_submenu_produk_sql = $wpdb->get_results("
SELECT * from $wpdb->posts
WHERE post_parent=52 AND post_type='page' AND post_status='publish' group by ID;
");
?>
<?php foreach ($sql_submenu_produk_sql as $row_submenu_sql) { ?>
<li>
<div class="col-md-2 col-xs-12 bordered" style="min-height: 100px;">
<a href="" data-featherlight="image">
//UPDATE THIS LINE LIKE BELOW
<?php echo get_the_post_thumbnail($row_submenu_sql->ID); ?>
</a>
</div>
<div class="col-md-10 col-xs-12">
<h2 style="font-weight: normal;"><?php echo $row_submenu_sql->post_title ?></h2>
<p style="padding-bottom: 15px;"><?php echo $row_submenu_sql->post_content ?></p>
</div>
</li>
<?php } ;?>
</ul>
</div>

Resources