I want to add an auto-fill feature to the search bar in the theme of my wordpress site. search.php codes are below. How can I do this?
I tried to do it with ajax lite extension and its shortcodes. But my search system broke even more.
<?php get_header(); ?>
<div class="deatil_wrapper wp_left">
<div class="container">
<div class="row">
<?php $n=1; $s=$_GET["s"]; $args = array('post_type' => 'details','posts_per_page' => '6', 'paged' => get_query_var('paged') ,'s' =>$s); query_posts($args);
if ( have_posts() ) : while ( have_posts() ) : the_post();?>
<div class="col-sm-4">
<div class="detail_post wp_left"> <a href="<?php the_permalink();?>">
<h3><?php the_title();?></h3>
<h4 class="bg_title"><?php the_field('detail_sub_title');?></h4>
<p><?php $recent_content = get_the_content(); ?><?php echo wp_trim_words( get_the_content(),20); ?></p>
<a class="detail_button" href="<?php the_permalink();?>">Davamı</a> </a> </div>
</div>
<?php $n++; endwhile; wp_reset_postdata(); ?>
<?php else : ?>
<div class="full wp_left">
<div class="col-sm-12">
<h1 class="no_result" style="width:100%; text-align:center; line-height:200px">Axtarış nəticəsi tapılmadı.</h1>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Related
I am trying to paginate archived post in WordPress when I click "next button" but it doesn't work. Please guide me to do it in a simple way. My code is given below:
<div class="grid-wrapper ">
<?php $args = array(
'posts_per_page' => 3,
'paged' => $paged
);
$the_query = new WP_Query($args);
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="inner-blog">
<div class="row">
<div class="col-lg-4 col-md-2">
<div class="post-thumbnail">
<img class="img-fluid" src="<?php the_post_thumbnail_url(); ?>">
</div>
</div>
<div class="col-lg-8 col-md-9">
<h2 class="post-title"><?php the_title();?></h2>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php wp_reset_postdata(); ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>
<ul class="pagination pull-right">
<li><?php echo get_next_posts_link( 'Next Page', $the_query->max_num_pages ); ?> »</li>
<li><?php echo get_previous_posts_link( 'Previous Page' ); ?></li>
</ul>
</div>
</div>
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 working on a Wordpress site. I'm trying to make a category with the id 968 show up on the Wordpress site under the stories and successes div. However for some reason the stories and successes div is not having the content from the category inserted into it. Any information on how I can improve my query or PHP is much appreciated. If I need to update this post with more information please let me know. Below you will see the php template file I am using.
<?php
/**
* Template name: Random Template
*
*
*/
// Custom styles
wp_enqueue_style('stories-styles', get_bloginfo('stylesheet_directory') . '/assets/css/stories.css');
// TEMP -- Get the category from the slug
the_post();
$categorySlugs = array(
'religious-freedom' => 'religious-freedom',
'social-and-economic-justice' => 'social-and-economic-justice',
'civil-and-human-rights' => 'civil-and-human-rights'
);
// Get category
$categorySlugs = $categorySlugs[$post->post_name];
$storyQuery = new WP_Query(array(
'post_type' => array('stories', 'press-releases'),
'category_name' => $categorySlugs,
'posts_per_page' => 4,
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
$successesQuery = new WP_Query(array(
'post_type' => 'stories',
'cat' => 968,
'posts_per_page' => 1,
'offset' => 5
));
// Remove yarpp
remove_filter('the_content', array($yarpp, 'the_content'), 1200);
?>
<?php get_header(); ?>
<div class="category-title">
<div class="container">
<h2><?php the_title() ?></h2>
</div>
</div>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<article class="featured-issue-article">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail('full', array( 'class' => "img-responsive attachment-post-thumbnail")); ?>
</div>
<?php endif; ?>
<div class="content">
<?php the_content() ?>
</div>
</article>
</div>
</div>
<hr class="large blue" />
<div class="row">
<div class="col-md-8">
<ul class="section-list">
<?php while ($storyQuery->have_posts()) : $storyQuery->the_post(); ?>
<li>
<h3><?php the_title() ?></h3>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('post-thumbnail', array( 'class' => "img-responsive attachment-post-thumbnail")); ?>
<?php endif; ?>
<?php if( get_field('custom_excerpt', $values_id)): ?>
<p><?php echo the_field('custom_excerpt'); ?></p>
<?php endif; ?>
<a class="more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">Read More...</a>
</li>
<?php endwhile; ?>
</ul>
<?php
set_query_var('category_slug', $categorySlug);
get_template_part('issues-nav', 'bottom')
?>
<hr class="small blue" />
<div class="success-stories">
<h2>Stories & Successes</h2>
<ul>
<?php while ($successesQuery->have_posts()) : $successesQuery->the_post(); ?>
<li>
<h4>
<?php the_title() ?>
</h4>
<?= strip_tags($post->post_excerpt) ?>
<a class="more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">Read More...</a>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
I have a custom post type set up called TESTIMONIALS and two CPT categories set up which are CLIENT TESTIMONALS & CLINIC TESTIMONIALS
I am trying to display only the posts from the CLIENT TESTIMONALS CPT category.
What would I need to add to the below to achieve this?
<div role="tabpanel" class="tab-pane fade" id="profile">
<?php query_posts('post_type=testimonials'); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php endwhile; // end of the loop. ?>
</div>
You can use something like this.
<?php
$type = 'testimonials';
$args=array(
'post_type' => $type,
'category'=>'CPT',
'post_status' => 'publish'
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="testimonial-holder wrap ">
<div class="three-quarters">
<h2>
<?php the_title(); ?>
</h2>
<div class="testi">
<?php the_content(); ?>
</div>
</div>
<div class="four-col right center">
<div class="testimonial-autor-image"> <img src="<?php the_field('author_image_or_clinic_logo'); ?>" alt="Author Image">
<div class="mt20">
<?php the_field('testimonial_author'); ?>
</div>
</div>
</div>
</div>
<?php
endwhile;
}
?>
In my theme I have a blog page and a homepage (without blog loop). Now I would like to add some blog posts on my homepage (like most recent).
I am using the blog page as a template for the homepage ( I copied and renamed the original), wich works good. But I can't make any changes to it without changing the original blog page (the loop is called in an external php).
I Have no idea were to start.
This is the piece on the homepage calling the blog loop:
<?php if(have_posts()) : the_post(); ?>
<div id="main">
<div class="central-wrapper clearfix">
<div id="center" class="fullwidth">
<div id="content">
<?php if($gallery_select && $gallery_position == 1) : ?>
<?php codeus_gallery($gallery_select, $gallery_size, $gallery_style); ?>
<?php endif; ?>
<div class="inner">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="pagination"><div class="page-links-title">' . __( 'Pages:', 'codeus' ) . '</div>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
<div class="bloghome">
<?php codeus_blog_list(); ?>
</div>
<?php if($quickfinder_position == 2) : ?>
<?php codeus_quickfinder($quickfinder_select); ?>
<?php endif; ?>
<?php if($portfolio_position == 2) : ?>
<?php codeus_portfolio(implode(',',$portfolio_select), $portfolio_size, $portfolio_count, $portfolio_filter, $portfolio_title); ?>
<?php endif; ?>
<?php if($gallery_select && $gallery_position == 3) : ?>
<?php codeus_gallery($gallery_select, $gallery_size, $gallery_style); ?>
<?php endif; ?>
</div>
</div><!-- #content -->
</div><!-- #center -->
</div><!-- .central-wrapper -->
</div><!-- #main -->
<?php endif; ?>
</div><!-- wrap end -->
And this is the piece in the external php called blog.php
<?php if($blog_loop->have_posts()) : ?>
<div class="blog_list">
<ul class="styled">
<?php while ( $blog_loop->have_posts() ) : $blog_loop->the_post(); ?>
<li class="clearfix">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'codeus_post_list_image'); ?>
<div class="comment-info">
<?php echo get_the_date('d'); ?>
<div class="date-month"><?php echo get_the_date('M'); ?></div>
</div>
<div class="post-info">
<h3><?php the_title(); ?></h3>
<?php if($image_url[0]) : ?>
<div class="post-image">
<div class="image wrap-box shadow middle">
<div class="shadow-left"></div><div class="shadow-right"> </div>
<img src=" <?php echo $image_url[0]; ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endif; ?>
<div class="text clearfix"><?php the_excerpt(); ?></div>
<?php codeus_author_info(get_the_ID()); ?>
</div>
</div>
</li>
<?php $post = $portfolio_posttemp; wp_reset_postdata(); ?>
<?php endwhile; ?>
</ul>
<?php codeus_pagination($page_num, $pages_count); ?>
</div>
<?php endif; ?>
Remember, I don't want to make changes in the original blog.php, because the normal blog page needs to work as it is now. I would like to make the blog work on the homepage also, but just with a maximum of 3 posts showing, perhaps of a certain category.
Help would be so welcome!!
I think I found a solution, I edited the homepage template like this:
<!-- wrap start --><div class="content-wrap">
<?php if(have_posts()) : the_post(); ?>
<div id="main">
<div class="central-wrapper clearfix">
<div id="center" class="fullwidth">
<div id="content">
<div class="inner">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="pagination"><div class="page-links-title">' . __( 'Pages:', 'codeus' ) . '</div>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
<div class="bloghome">
<?php
$page_num = (get_query_var('paged')) ? get_query_var('paged') : 1;
$items_per_page = 2;
$blog_loop = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => $items_per_page,
'paged' => $page_num
));
$pages_count = ceil($blog_loop->found_posts/$items_per_page);
global $post;
$portfolio_posttemp = $post;
?>
<?php if($blog_loop->have_posts()) : ?>
<div class="blog_list">
<ul class="styled">
<?php while ( $blog_loop->have_posts() ) : $blog_loop->the_post(); ?>
<li class="clearfix">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'codeus_post_list_image'); ?>
<div class="comment-info">
<?php echo get_the_date('d'); ?>
<div class="date-month"><?php echo get_the_date('M'); ?></div>
</div>
<div class="post-info">
<h3><?php the_title(); ?></h3>
<?php if($image_url[0]) : ?>
<div class="post-image">
<div class="image wrap-box shadow middle">
<div class="shadow-left"></div><div class="shadow-right"></div>
<img src="<?php echo $image_url[0]; ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endif; ?>
<div class="text clearfix"><?php the_excerpt(); ?></div>
<?php codeus_author_info(get_the_ID()); ?>
</div>
</div>
</li>
<?php $post = $portfolio_posttemp; wp_reset_postdata(); ?>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
</div><!-- #content -->
</div><!-- #center -->
</div><!-- .central-wrapper -->
</div><!-- #main -->
<?php endif; ?>
</div><!-- wrap end -->