Wordpress featured image / post thumbnail not showing - wordpress

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>

Related

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 row height option

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'); ?>

Wordpress Loop repeating twice

Hello I have a while loop in WordPress and I am adding an active class on the first instance of the loop and this works fine but the same instance then again repeats afterwards without the active class.
here is my code any help would be greatly appreciated.
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
Believe you need to add an else statement after your <?php if ($wp_query->current_post == 0 && !is_paged() ) { ?> statement ends. Should look something like this:
<div class="carousel-inner" role="listbox">
<?php
query_posts( array( 'post_type' => 'deal','dealtype' => 'deals' ) );
while (have_posts()) : the_post();
?>
<?php if ( $wp_query->current_post == 0 && !is_paged() ) { ?>
<div class="item active">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="item">
<div class="row">
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1">
<?php
$thumb_id = get_field('featured_image');
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
$thumb_url = $thumb_url_array[0];
?>
<img src="<?php echo $thumb_url; ?>" class="img-responsive" alt="" />
</div>
<div class="col-md-4 col-sm-4">
<div class="featuredContent">
<div class="contentTitle">
<h2><?php echo get_the_title(); ?> </h2>
</div>
<div class="contentDetails">
<p><?php echo get_field('sub_title'); ?>
</p>
</div>
<?php if(get_field('max_amount')) { ?>
<div class="contentDetails">
<p>Up to
<?php the_field('max_amount'); ?>
Shares</p>
</div>
<?php } ?>
<!--
<div class="contentLink">
<p>invest now</p>
</div>
<div class="contentLink">
<p>follow offering</p>
</div>
-->
</div>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; // end of the loop. ?>
</div>

How to display the first tab in my Wordpress loop?

I'm working with Wordpress and Foundation Tabs.
Objective:
To display Wordpress posts from a specific category in vertical Foundation tabs.
I currently have a static version displayed here:
http://www.aos-engineering.com (Under Projects)
Problem:
On the page load, the first tab displayed is empty. However, when you click through the tabs, they display correctly.
Question
How do I display the fist tab item on the page load?
Here is a test page displaying the problem:
http://www.aos-engineering.com/test/
Code
<div class="full-width" id="projects">
<div class="row">
<div class="small-4 medium-3 large-3 columns">
<dl class="tabs vertical profile-tabs" data-tab>
<?php
$displayposts = new WP_Query();
$displayposts->query('category_name=Projects');
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
?>
<dd><?php the_title(); ?></dd>
<?php endwhile; ?>
</dl>
</div>
<div class="small-8 medium-9 large-9 columns">
<div class="tabs-head">Projects</div>
<div class="tabs-content">
<?php
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
?>
<div class="content" id="tab<?php echo $tab_number;?>">
<h2><?php the_title(); ?></h2>
<div class="row">
<div class="medium-9 large-9 columns">
<?php the_post_thumbnail(); ?>
<p><small><?php the_field('img_caption'); ?></small></p>
</div>
<div class="medium-3 large-3 columns">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
Please let me know if I can provide more information. Thank you in advance.
You need to have your code add the class active to the .tabs > dl and the .tabs-content > div you want displayed on page load.
Add this to the two lines after $tab_number = ... to have the first tab be the active tab on load:
$active_class = (1 == $tab_number) ? 'active' : '';
Then in the output:
<dd class="<?php echo $active_class;?>" ><a href=...
<div class="content <?php echo $active_class;?>"...
See the Foundation Tabs documentation for more details.
Hat tip CPILKO for the solution.
Here is how to display Wordpress posts from a specific category in vertical Foundation tabs.
To display your posts, simply add your category name
'category_name=YourCategoryName'
Solution
<div class="full-width" id="projects">
<div class="row">
<div class="small-4 medium-3 large-3 columns">
<dl class="tabs vertical profile-tabs" data-tab>
<?php
$displayposts = new WP_Query();
$displayposts->query('category_name=Projects');
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
$active_class = (1 == $tab_number) ? 'active' : '';
?>
<dd class="<?php echo $active_class;?>"><?php the_title(); ?></dd>
<?php endwhile; ?>
</dl>
</div>
<div class="small-8 medium-9 large-9 columns">
<div class="tabs-head">Projects</div>
<div class="tabs-content">
<?php
while ($displayposts->have_posts()) : $displayposts->the_post();
$tab_number = $displayposts->current_post + 1;
$active_class = (1 == $tab_number) ? 'active' : '';
?>
<div class="content <?php echo $active_class;?>" id="tab<?php echo $tab_number;?>">
<h2><?php the_title(); ?></h2>
<div class="row">
<div class="medium-9 large-9 columns">
<?php the_post_thumbnail(); ?>
<p><small>Show above: Huiit Zolars</small></p>
</div>
<div class="medium-3 large-3 columns">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>

Resources