I'm having a problem where after I have ran a while loop to get my thumbnail images my advanced custom fields that run after the loop don't display.
I'm assuming the fix is similar to here Stackoverflow question
However I cant for the life of me work it out.
Here's the section with the loop. I'm using it inside a div so I can change the background of the div.
Anyone know the problem?
gist here
<section id="portfolio">
<h3>Projects</h3>
<div class="card-container">
<?php global $query_string;
query_posts ('posts_per_page=3');
while(have_posts()) : the_post(); ?>
<div class="outer">
<div class="target">
<div class="card">
<div class="front">
<div class="thumbnail" <?php
if ( $id = get_post_thumbnail_id() ) {
if ( $src = wp_get_attachment_url( $id ) )
printf( ' style="background-image: url(%s);"', $src );
}
?>>
</div>
<h5><?php the_title(); ?></h5><?php the_excerpt('Read More'); ?>
View Site
</div>
<div class="back">
<h5><?php the_title(); ?></h5>
<hr>
<p class="return"><?php the_content() ?></p>
View Site
</div>
</div>
</div>
</div>
<?php endwhile; ?>
View More
</div>
</section>
Related
On my list of posts page, I would like to display 3 posts on each row. (Desktop view only)
With the following code, each post is taking up the entire width of the screen with each post starting on a new line. How can I work around this?
Here is the code in my index.php which initially targets the loop.
<section id="portfolio" class="wow fadeIn hide" data-wow-duration="2s">
<div class="container">
<div class="row">
<?php
endif;
/* Start the Loop */
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', "grid" );
endwhile;
else :
endif;
?>
</div>
</div>
</section>
And here is the code in my content-grid.php which displays the content of the loop.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="col-lg-4 col-md-12 col-sm-12"> <!-- Start of featured project column --->
<a href="<?php the_permalink(); ?>">
<div class="img-container thumbnail">
<?php if ( has_post_thumbnail() ) the_post_thumbnail(); ?>
<div class="hover-block">
<h3 class="project-name"><?php the_title(); ?></h3>
</div>
</div>
</a>
</div> <!-- End of featured project column --->
</article><!-- #post-<?php the_ID(); ?> -->
I'm trying to style my Wordpress search results so that they appear in columns (3 columns per row) but somehow it's not working. Maybe you can help me? I've googled this problem and tried placing the while loop inside the row div but that wouldn't work. The site is: www.medical-promotion.de
Thanks for your help! :)
Below is the code provided by the theme.
<?php
/**
* Search
*/
?>
<?php get_header(); ?>
<section class="site-content">
<div class="container">
<?php if( have_posts()) : ?>
<div class="row">
<?php while ( have_posts()) : the_post(); ?>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="blog_large">
<?php
$aneeq_post_slide = get_post_meta( $post->ID, 'aneeq_all_post_slides_settings_'.$post->ID, true);
//blog option settings
$aneeq_option_settings = get_option('aneeq_blog_settings');
//feature img url
$aneeq_url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
?>
<article class="post">
<figure class="post_img">
<a href="<?php the_permalink(); ?>">
<?php if($aneeq_url != NULL) { the_post_thumbnail(); } ?>
</a>
</figure>
<div class="post_date">
<span class="day"><?php echo get_the_date('j'); ?></span>
<span class="month"><?php echo get_the_date('M'); ?></span>
</div>
<div class="post_content">
<div class="post_meta">
<h2>
<?php the_title(); ?>
</h2>
<div class="metaInfo">
<span><i class="fa fa-user"></i> <?php esc_html_e('By', 'aneeq') ?> <?php the_author(); ?> </span>
<?php if (has_category()) : ?>
<span><i class="fa fa-th-list"></i>
<?php the_category(' , ');?>
</span>
<?php endif; ?>
</div>
</div>
<?php the_content(); ?>
</div>
</article>
</div>
</div>
</div><!--/.row-->
</div> <!--/.container-->
</section>
<?php get_footer(); ?>
Have a look at the below image. That's the output of the file you shared.
As you can see within the post_content div and underneath the post_meta div that's where the search list is located, not way up higher where the row class is.
In your code, the output of that block relates to the following statement.
<?php the_content(); ?>
So, it looks like the content of the page is pulled in dynamically. Have a look in the WordPress admin section (when you edit the search page) and see if anything there gives you a clue.
Else, search for the fsn-row full-width-row classes within the files of your theme directory. This will give you a clue which file to edit.
I am new to WordPress and I need to retrieve the content and title of all the posts but can't find my way. here is my code.
require_once("blog/wp-load.php");
$the_query = new WP_Query( ['posts_per_page' = -1]);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$a= $the_query->post_content;
echo $a;
}
wp_reset_postdata();
}
It is giving me a blank page
Once the loop has the posts in storage you can use other methods to get information about the posts.
Example for a card holding an image, title of a piece of content, etc.
<section>
<div class="container">
<div class="card">
<div class="row">
<div class="col-md-6">
<a href='<?php the_permalink();?>'>
<div class="card-img-bottom" style=' height:100%;background-image: url(<?php the_post_thumbnail_url( 'full' ); ?>);background-size:cover;'>
</div>
</a>
</div>
<div class="col-md-6">
<div class="card-block">
<h2><?php the_title(); ?></h2>
<p class="card-text"><?php the_excerpt(); ?></p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
Each post being returned by the loop would then be embedded in that context (HTML/CSS)
At the bottom of your page above a footer call you can also end the loop like this:
<?php endwhile; else : ?>
<?php endif; ?>
Also to specify. You can obtain the content with
the_content();
The title with
the_title();
And the link to the post with
the_permalink();
to learn wordpress development, I'm building a wordpress theme from scratch .
Now i want to add pagination on my category page but the problem is:
when i click on older-post-link the url change from "http://localhost/wordpress4/category/bloc1/" to "http://localhost/wordpress4/category/bloc1/page/2/" but it take me to a blank page instead of showing the other posts.
this is the code on the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-6 text-left">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-6 text-right">
<?php previous_posts_link('Newer post >>'); ?>
</div>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
I noticed that if i add the code below to my index.php the pagination work also on the category page.
but the second category page("http://localhost/wordpress4/category/bloc1/page/2/") will take the markup of index.php so the posts will not be in a grid format like the first category page.
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=4');
also on the category page the older post-link show up between rows instead of showing at the bottom of the pages.
finally this is the code on my index.php
<?php get_header(); ?>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<?php
if(have_posts()):
while(have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<h3><?php the_title(); ?></h3>
<small><?php the_category(); ?></small>
</a>
<p><?php the_content(); ?></p>
<hr/>
<?php endwhile;
endif;
?>
</div>
<div class="col-xs-12 col-sm-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Thank You.
Use this code, may be it will solve your problem
<?php
// the query to set the posts per page to 3
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3, 'paged' => $paged );
query_posts($args); ?>
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!-- rest of the loop -->
<!-- the title, the content etc.. -->
<?php endwhile; ?>
<!-- pagination -->
<div class="row">
<div class="col-xs-12>"
<div class="col-xs-6 text-left"><?php next_posts_link(); ?></div>
<div class="col-xs-6 text-right"><?php previous_posts_link(); ?></div>
</div>
</div>
<?php else : ?>
<!-- No posts found -->
<?php endif; wp_reset_postdata(); ?>
for more details, check this link https://codex.wordpress.org/Pagination
After a lot of searching i was able to find a solution .
The problem was that the The "Blog pages show at most" in the wordpress reading settings was interfering with the "posts_per_page=4" that i declared through the query_posts().
The solution :
I deleted the "query_posts()" because it is best to use the WP_Query() or the pre_get_posts filter.
for me even with using wp_query i couldnt get the pagination to work so i tried using the pre_get_posts filter and it worked .
so in the category.php i deleted the query_posts and used just the normal loop.
this is my new code in the category.php
<?php get_header(); ?>
<div class="container">
<?php
$counter = 1; //start counter
$grids = 3; //Grids per row
if(have_posts()) :
while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="row">
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-md-4 border2">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
<?php
elseif($counter == $grids) :
?>
<div class="col-md-4">
<div class="center">
<div class="postimage">
<?php the_custom_logo(); ?>
</div>
<h2><?php the_title(); ?></h2>
<h4><?php the_category(' '); ?></h4>
</div>
</div>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
?>
<div class="row">
<div class="col-xs-12 text-left ">
<?php next_posts_link('<< Older post'); ?>
</div>
<div class="col-xs-12 text-right ">
<?php previous_posts_link('Newer post >>'); ?>
</div>
</div>
<?php
endif;
?>
</div>
<?php get_footer(); ?>
Then I added the pre_get_posts action on my function.php
this is the code:
add_action( 'pre_get_posts', function ( $q )
{
if ( !is_admin() // Very important, otherwise back end queries will be affected as well
&& $q->is_main_query() // Very important, we just need to modify the main query
&& $q->is_category() // Only target category pages
) {
$q->set( 'posts_per_page', 2 );
}
});
I hope my answer will help someone who have the same problem i had even if my answer is not so well explained.
for more info search for something like this:
using pagination with the wp_query
using pre_get_posts to set pagination for a custom page.
It will be so nice if a developer could explain my solution in more details and give us more information about using pre_get_posts to set pagination for a custom page.
I did this to show 5 posts of a diferent category in my wordpress page:
<?php $archive_query = new WP_Query('category_name=anc&showposts=5');
while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
<div class="collection">
See All
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-image">
<img src="<?php echo catch_that_image(); ?>">
<span class="card-title"><?php the_title(); ?></span>
</div>
<div class="card-content">
</div>
<div class="card-action">
Ver más
</div>
</div>
</div>
</div>
<?php endwhile; ?>
It worked, however, now my another pages don´t work, they show posts from that category when i click on those pages instead of showing their respectives posts, what could be the issue?
You can reset data in the global $post object after endwhile;
<?php
while( $your_query->have_posts() ):
...
endwhile;
wp_resest_postdata(); ?>
I came to a solution, after the following line:
<?php endwhile;?>
I wrote this:
<?php wp_reset_query();?>
It resets the query so like that the main loop ( because it´s depend of the main loop ) can work perfectly, i hope this helps everyone, this code is an easy way to show any post of a different category.