Wordpress shortcode with a loop - php

I'm fairly new with using WP shortcodes, and I've run into a problem. I have tried to make a shortcode, that shows 6 of my blog posts through a loop, but it doesn't work. When it loads, it just smashes the page. The loop code works in practice, just not with the shortcode.
The code
function myshort() { ?>
<?php
$args = array( 'post_type' => 'cases', 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="col-sm-6 wow fadeInUp" data-wow-delay="0.1s">
<a class="content" href="<?php echo get_permalink( $post->ID ); ?>">
<div class="image">
<?php the_post_thumbnail(); ?>
</div>
<div class="text">
<span class="date"><?php echo rwmb_meta( 'rw_stitle' ); ?></span>
<h3><?php the_title(); ?></h3>
<p><?php echo rwmb_meta( 'rw_sdesc' ); ?></p>
</div>
</a>
</div>
<?php endwhile;
}
add_shortcode('doitman', 'myshort');
So, my question is, how do I write this the right way?

The result should be returned as a value,
you could try something like this :
function myshort() {
ob_start(); ?>
<?php
$args = array( 'post_type' => 'cases', 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="col-sm-6 wow fadeInUp" data-wow-delay="0.1s">
<a class="content" href="<?php echo get_permalink( $post->ID ); ?>">
<div class="image">
<?php the_post_thumbnail(); ?>
</div>
<div class="text">
<span class="date"><?php echo rwmb_meta( 'rw_stitle' ); ?></span>
<h3><?php the_title(); ?></h3>
<p><?php echo rwmb_meta( 'rw_sdesc' ); ?></p>
</div>
</a>
</div>
<?php endwhile;
return ob_get_clean();
}
add_shortcode('doitman', 'myshort');

Related

PHP Wordpress loop causing cards to render inside cards instead of separately

I have a simple loop on a wordpress homepage that pulls in 3 random articles. It's intermittently rendering the cards inside the other cards instead of 3 separate cards. I feel like it's a timing issue being caused from pulling them in randomly. Is there a way to force them to render separately?
<div class="row">
<?php
$args = array(
'post_type' => 'post',
'orderby' => 'rand',
'posts_per_page' => '3'
);
$loop = new WP_Query($args); ?>
<?php if ( $loop->have_posts() ) : ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="card" data-url="<?php echo the_permalink(); ?>">
<div class="card-body">
<?php the_post_thumbnail('homepage-thumbs', array( 'class' => 'aligncenter' )); ?>
<h3><?php the_title(); ?></h3>
<span><i class="fal fa-user"></i> by <?php the_author(); ?></span>
<p></p>
<p><?php echo substr(get_the_content(), 0, 128); ?>...</p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Your code works in my test. However, I would use the wp_trim_words to create your excerpt rather than what you did, which could cut a word in the middle.
<div class="row">
<?php
$args = array(
'post_type' => 'post',
'orderby' => 'rand',
'posts_per_page' => '3'
);
$loop = new WP_Query($args); ?>
<?php if ( $loop->have_posts() ) : ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="card" data-url="<?php echo the_permalink(); ?>">
<div class="card-body">
<?php the_post_thumbnail('homepage-thumbs', array( 'class' => 'aligncenter' )); ?>
<h3><?php the_title(); ?></h3>
<span><i class="fal fa-user"></i> by <?php the_author(); ?></span>
<p></p>
<p><?php
$theContent = get_the_content();
// strip out any shortcodes from the excerpt
$theContent = strip_shortcodes( $theContent );
// wp_trim_words($content, number_of_words, read_more_text)
echo wp_trim_words( $theContent, 30 , '...' );?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Try to add wp_reset_postdata after your loop, like
<?php endwhile; wp_reset_postdata(); ?>

WordPress loop alternate rows and columns each two posts with bootstrap

I want to create a loop for wordpress that returns each two posts inside its own div and alternating columns every new row (see example)... Im not experimented in php enough to make this happen. I dont manage to get it working appropiatly. And see how to make the last div to bee 100% width if it does not have another column.
I would appreciate your support to make this happen since I tried many things and still no luck. (im using visual composer bootstrap classes, it does work but not as expected.This is the example I want to create
This is my code:
<?php
$args = array(
'posts_per_page' => '-1',
'post_type' => 'inversion',
'category_name' => '',
'order' => 'DESC',
'orderby' => 'DATE'
);
$the_query = new WP_Query( $args );?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="vc_row">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; $imagen = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<?php if(($i % 2) == 2) : ?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
<div class="vc_col-sm-6 cont-der" >
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url(<?php echo $imagen; ?>)no-repeat; background-size:cover;">
</div>
</div>
</div>
</div>
<?php else : ?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-der" >
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url(<?php echo $imagen; ?>)no-repeat; background-size:cover;">
</div>
</div>
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
</div>
</div>
<?php endif; endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
[EDIT]Try this:
<?php
$args = array(
'posts_per_page' => '-1',
'post_type' => 'inversion',
'category_name' => '',
'order' => 'DESC',
'orderby' => 'date',
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="vc_row">
<?php
$float_class = '';
while ( $the_query->have_posts() ) :
$the_query->the_post();
if ( $the_query->current_post &&
$the_query->current_post % 2 === 0 ) {
$float_class = $float_class ? '' : 'vc_pull-right';
}
$imagen = get_the_post_thumbnail_url( get_the_ID(), 'full' );
?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-der <?php echo $float_class; ?>">
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url('<?php echo esc_url( $imagen ); ?>') no-repeat; background-size:cover;">
</div>
</div>
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
</div>
</div>
<?php endwhile; // end have_posts() loop ?>
</div><!-- .vc_row -->
<?php endif; // end have_posts() check ?>
<?php wp_reset_query(); ?>

I want to display the post excerpt with date and title

I want to display the excerpt of 2 posts with title and post-date, the code is done but it is showing the date only for one post.
Here Is The Code.
<div class="col-md-4">
<div class="reel-focus-blog wow slideInRight animated">
<h1>Reel Focus Blog</h1>
<?php
$the_query = new WP_Query( 'posts_per_page=2' );
while ($the_query -> have_posts()) : $the_query ->
the_post(); ?>
<div class="reel-focus-blog-box">
<h3><?php the_title(); ?></h3>
<p class="datetime"><i><?php the_date();?></i></p>
<p><?php the_excerpt(__('(more…)')); ?>
<a class="read-more" href="">Read More</a></>
</div>
<?php
endwhile;
wp_reset_postdata();?>
</div>
</div>
Test with
get_the_date()
// The Args
$args = array(
'posts_per_page' => 2,
'order' => 'DESC',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
<div class="reel-focus-blog-box">
<h3><?php the_title(); ?></h3>
<p class="datetime"><i><?php echo get_the_date();?></i></p>
<p><?php the_excerpt(); ?>
<a class="read-more" href="">Read More</a></>
</div>
}
} else {
// no posts found
}
wp_reset_postdata();

WordPress echo taxonomy of custom post type in wordpress loop

I have created a Custom Post Type product and for this CPT I've also created a taxonomy with the name products_types.
Now on my overview page of all the products I would like to echo out the product type that was given to the product. But I keep getting bool(false).
My code:
<div class="row">
<?php
$loop = new WP_Query( array( 'post_type' => 'product') );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="col-md-4 col-lg-3 work">
<div class="category">
<?php
$category = get_the_terms('product', 'products_types');
var_dump($category);
echo $category;
?>
</div>
<a href="<?php the_permalink() ?>" class="work-box"> <img src="<?= get_field('image'); ?>" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><?php echo the_title() ?></p>
</div>
</div>
</a>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</div>
Anyone can help me out here please?
You need to pass the Post ID or object in first parameter of get_the_terms(). Used get_the_ID() which return the post ID.
Example:
foreach (get_the_terms(get_the_ID(), 'products_types') as $cat) {
echo $cat->name;
}
How to print taxonomy terms of custom post type in WordPress loop?
<div class="row">
<?php
$loop = new WP_Query( array( 'post_type' => 'product') );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="col-md-4 col-lg-3 work">
<div class="category">
<?php
$terms = get_the_terms( get_the_ID(), 'products_types' );
if ( $terms && ! is_wp_error( $terms ) ) :
$category_links = array();
foreach ( $terms as $term ) {
$category_links[] = $term->name;
}
$categories = join( ", ", $category_links );
?>
<?php printf( esc_html( $categories ) ); ?>
<?php endif; ?>
</div>
<a href="<?php the_permalink() ?>" class="work-box"> <img src="<?= get_field('image'); ?>" alt="">
<div class="overlay">
<div class="overlay-caption">
<p><?php echo the_title() ?></p>
</div>
</div>
</a>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</div>

How do you print an entire post into a page (wordpress)

Hi I've made a custom post type 'work_fields' that calls in information from yet another custom post type 'members' into the post, and now I'm trying to make a PAGE TEMPLATE that shows a list of the titles of custom post type 'work_fields', and when you click a title, the whole post('work_fields') will show up on a div called 'single-post-container' below the titles. right now I've got everything working fine, but I want to display a post in the div 'single-post-container' when the page loads. (as of now, just the titles of the posts are displayed and there is nothing in the div). How do I get the div to display the most recent post of custom post type 'work_fields' on page load? This is the code for the custom page template.
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<h2><?php the_title(); ?></h2>
</div>
</div>
<div class="row halfsection">
<div class="small-12 medium-10 large-offset-1 columns">
<div class="category_container">
<?php
$args = array('post_type' => 'work_fields',);
$query = new WP_Query( $args );
?>
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<p class="category_item"><a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></p>
<?php endwhile; endif; ?>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<hr>
</div>
</div>
<div id="single-post-container">
//THIS IS WHERE THE POST CONTENTS SHOWS BUT I WANT THE MOST RECENT POST TO BE HERE ON PAGE LOAD, BEFORE I CLICK ANY OTHER POST//
</div>
Thank you! Your help is much appreciated!
Just use the WP_query twice by getting recent posts in the arguments,
$args2 = array('post_type' => 'work_fields', 'orderby' => 'ID', 'order'=> 'DESC' , 'posts_per_page' => 5);
$query2 = new WP_Query( $args2 );
?><div id="single-post-container"><?php
// The Loop
if ( $query2->have_posts() ) {
echo '<ul>';
while ( $query2->have_posts() ) {
$query2->the_post();
echo '<li>' . get_the_content() . '</li>';
}
echo '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
}
?></div><?php
Put the div outside loop. It will show the content of recent 5 posts.
If everything above the div single-post-container is working fine then for this specific div you can load most recent post by using code below. Be sure to reset previous post data using wp_reset_postdata()
Codex Documentation. https://codex.wordpress.org/Function_Reference/wp_get_recent_posts
<?php
$args = array(
'numberposts' => 1,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'work_fields',
'post_status' => 'publish',
'suppress_filters' => true
);
$recent_posts = wp_get_recent_posts( $args, ARRAY_A );
?>
So I just recreated the post type markup on my page. I'm sure there's a better way to do this but for times sake I had to at least make it work. I also tried using a jquery onclick function and just click the first title after everything loads, but there was an error that just kept pushing all of the titles so I pretty much gave up.
here's the code
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<h2><?php the_title(); ?></h2>
</div>
</div>
<div class="row halfsection">
<div class="small-12 medium-10 large-offset-1 columns">
<div class="category_container">
<?php
$args = array(
'post_type' => 'work_fields',
);
$query = new WP_Query( $args );
?>
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<p class="category_item"><a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></p>
<?php endwhile; endif; ?>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-10 large-offset-1 columns">
<hr>
</div>
</div>
<div id="single-post-container">
<?php
$args2 = array(
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'work_fields',
'post_status' => 'publish',
'posts_per_page' => 1,
);
$query2 = new WP_Query( $args2 );
if ( $query2->have_posts() ) : ?>
<?php $post = get_post($_POST['id']); ?>
<div id="single-post post-<?php the_ID(); ?>">
<?php while ( $query2->have_posts() ) : $query2->the_post(); ?>
<div class="row section">
<div class="small-12 medium-7 large-offset-1 columns">
<h2><?php the_title(); ?></h2>
<h3>소개</h3>
<p class="halfsection"><?php the_field('work_fields_intro'); ?></p>
<h3>주요서비스</h3>
<p class="halfsection"><?php the_field('work_fields_service'); ?></p>
<h3>주요실적</h3>
<p class="halfsection"><?php the_field('work_fields_accomplishment'); ?></p>
</div>
<?php endwhile; endif; ?>
<div class="small-6 medium-3 large-2 columns large-offset-1 end">
<?php
$posts = get_field('team_member');
if( $posts ): ?>
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<div class="member_container halfsection">
<div class="member"><?php the_post_thumbnail(); ?></div>
<p class="member_name"><?php the_title(); ?></p>
<ul class="members_info">
<li><?php the_field('members_position'); ?></li>
<li><?php the_field('members_e-mail'); ?></li>
<li><?php the_field('members_phone'); ?></li>
</ul>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>

Categories