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.
Related
Here is LINK I am working on it. The About Us section is not displaying full contents and showing more button to go to next page whereas I want to show full contents of About Us page instead of short summary.
I checked a lot but not found any option in the theme to fix it
UPDATE:
I found this in (page-template/custom-home-page.php)
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="row">
<div class="col-lg-8 col-md-7">
<h3><?php the_title(); ?></h3>
<hr>
<p><?php the_excerpt(); ?></p>
<div class="more-btn">
<?php esc_html_e('MORE','vw-one-page'); ?>
</div>
</div>
<div class="col-lg-4 col-md-5">
<img src="<?php the_post_thumbnail_url('full'); ?>"/>
</div>
</div>
<?php $i++; endwhile;
wp_reset_postdata();?>
<?php else : ?>
<div class="no-postfound"></div>
<?php endif;
endif;?>
</div>
</section>
Best regards
That code inside your theme with high probability.
Try to search inside theme files "/wp-content/themes/your_theme_name", something like that:
<div class="col-lg-8 col-md-7">
<h3>About Us</h3> <!-- Or <?php the_title(); ?> -->
<hr>
<?php the_exerpt(); ?>
<div class="more-btn">
MORE <!-- Or something like <?php the_permalink( ... ) ?> -->
</div>
</div>
This is an example. After all, I can't know how it is done in your theme.
Then <?php the_exerpt(); ?> change to <?php the_content(); ?>. and remove or hide:
<div class="more-btn">
...
</div>
But if this is not your personal WordPress theme, then it is better to do through Child Theme
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>
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'm trying to structure a wordpress search page to include a sidebar within a container that has the "row" class from the bootstrap css. My goal is for the posts to show up on the left side of the container and the sidebar I want to show up on the right. Currently, if the row container is within the loop, I get the same number of sidebars as I have posts. If I move the row container out of the loop, either the sidebar is at the bottom and the <"hr"> lines between each post are pushed to the right side of the container or if I use float on the sidebar containers, I don't get any <"hr"> lines at all.
Any insight is appreciated in pushing the <"hr"> lines to the left with their respective posts and keeping the sidebar on the right at full screen size. For reference, the sidebar is located within the include.php file at the bottom of the row container.
search page code:
<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><?php printf( __( 'Search Results for: %s' ), esc_html( get_search_query() ) ); ?></h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<div class="row">
<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>
<div class="col-lg-8">
<h3>
<?php the_title(); ?>
</h3>
<p>Posted on <?php the_time('F j, Y'); ?> by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
<hr>
<?php endwhile; ?>
<?php include 'include.php'; ?>
</div>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Thanks for any help and insight :)
You need to move your <div class="col-lg-8"> outside of your while() statement so that you only have one grid column instead of each blog post being inside of its own grid column.
This is assuming that your sidebar had the class col-lg-4.
This pastie has both the functions.php and home.php code for review. For reference, my goal is to make the image follow the same rules found in this jsfiddle.
My goal with the function is to pull the first image from a post and put it above the summary on my blog's homepage. I've been able to pull the image from the post, but it isn't following the responsive class I used in line 60. Is it that I am pulling the image itself and not the URL? How can I adjust my function to make this work? Outside of database connections and form validation, I am a complete php beginner.
Please see jsfiddle and pastie for code
Use Post_Thumbnails instead.
In your functions.php add the following:
add_theme_support( 'post-thumbnails' );
This will enable the Featured Image meta box in the sidebar of your posts and pages. You will need to set this for posts. Instead of adding an image to your post's content, you can set your desired image as the featured image.
Update your home.php to the following:
<?php get_header(); ?>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Blog</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="row">
<div class="col-md-1 text-center">
<p><?php the_time('l, F jS, Y'); ?></p>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="col-md-5">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
</a>
</div>
<?php endif; ?>
<div class="col-md-6">
<h3>
<?php the_title(); ?>
</h3>
<p>by <?php the_author_posts_link(); ?>
</p>
<p><?php the_excerpt(); ?></p>
<a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
</div>
</div>
<hr>
<?php endwhile; ?>
<div class="navigation"><p><?php posts_nav_link('','« Newer Posts','Older Posts »'); ?></p></div>
<?php else: ?>
<p><?php _e('Sorry, there are no posts.'); ?></p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
has_post_thumbnail() checks to see if the current $post has a featured image set.
the_post_thumbnail() outputs the image tag. This functions takes a size as it's first parameter. We are setting this to large as it should satisfy your layout.
The second parameter is an array of attributes. We are able to add additional classes to the image using this parameter.