I created my own template in WordPress, but the loop entries does not work. I would like to entries work on one of the subpages. I also added entries.
This is my code of my subpage. Please help me. I don't know what is wrong. I added a picture under the code.
<?php include 'header.php'; ?>
<main class="subpage-blog">
<div class="subpage-banner">
<div class="container">
<h3>BLOG SIDEBAR</h3>
<div class="breadcrumbs">
</div>
</div>
</div>
<aside class="side-menu col-md-4">
<div class="search">
<h4>Search blog</h4>
<input type="text" value="Search">
</div>
<!-- .search -->
<div class="categories">
<h4>Blog Categories</h4>
<ul class="categories-blog-ul">
<li>Inspirtation</li>
<li>Work</li>
<li>Tech</li>
<li>Creative</li>
</ul>
</div>
<!--.categories-->
<div class="recent-posts">
<h4>Recents posts</h4>
<ul>
</ul>
</div>
<!-- .recent-posts-->
<div class="tags-spot">
<h4>Tags</h4>
<div class="tag"></div>
</div>
<!-- .tags-spot-->
</aside>
<!-- .side-menu-->
<article class="content">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<a href="">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</a>
</div>
<!-- .news-list-content-->
<div class="image-box-news">
<img src="<?=get_template_directory_uri(); ?>/images/ikona-wpisu.png" alt="" />
</div>
</div>
<!-- .news-box-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<!-- .container-->
</article>
<!-- .content-->
</main>
<?php include 'footer.php'; ?>
The problem is that:
if (have_posts()) : while (have_posts()) : the_post();
is using the current page's have_posts query.. That means that it probably will just show whatever that current page template's content would be.
Instead, you'll want to create an entirely new query object and call these functions on it like so:
<?php
$the_query = new WP_Query( array('posts_per_page' => 10 ) ); //Create our new custom query
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="news-box">
<div class="news-list-content">
<h3><?php the_title(); ?></h3>
<?php the_content('czytaj dalej'); ?>
</div>
<!-- all your other markup goes here.... -->
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_postdata(); //Restore the original postdata for this page, if needed later ?>
Related
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.
Is it possible to add next and previous post links to a page that is querying posts from one category and displaying one post of that category per page?
This is what I currently have:
<?php query_posts('cat=2&posts_per_page=1'); ?>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article class="overlay" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="inner">
<div class="gallery" style="background-image: url(<?php the_field('image'); ?>);">
<div class="close" data-home="<?php echo home_url(); ?>">
<span class="oi" data-glyph="x"></span>
</div>
</div>
<div class="copy">
<h2><?php the_title(); ?></h2>
<?php the_field('news_content'); ?>
Next
</div>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
You can try with next_post_link()
<?php next_posts_link(); ?>
This seemed to be the only solution that worked for me, if anyone needs a template:
<?php get_header(); ?>
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article class="overlay" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="inner">
<div class="copy">
<h2><?php the_title(); ?></h2>
<?php the_field('news_content'); ?>
<?php the_field('copy'); ?>
<br>
<br>
<?php next_post_link( '%link', 'Next', TRUE, 'post_format' ); ?> | <?php previous_post_link( '%link', 'Previous', TRUE, 'post_format' ); ?>
</div>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
<?php get_footer(); ?>
when you go to:
http://dageniusmarketer.com/
you will see the posts have 2 images. I'm trying to remove the one on the bottom.
I initially added
<?php the_post_thumbnail( $size, $attr ); ?>
for the main post image, as I wasn't getting the placement I wanted, which was ABOVE the post statistics. Now that I have it above the statistics, I still have the original image, and I want to remove it.
I'm trying to play with the class .wp-image,
but that isn't giving me any sort of luck. I just want to remove the 2nd duplicate image underneath the statistics and keep whatever other images I may wish to write into my post body in the future. How do I do this?
edit: here is my php code:
<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- item -->
<div class="item entry" id="post-<?php the_ID(); ?>">
<div class="itemhead">
<h1>
<?php the_title(); ?>
</h1>
<?php the_post_thumbnail( $size, $attr ); ?>
<div class="postStatsContainer">
<div class="postViews">100 Views</div>
<div class="slash"></div>
<div class="postShares">100 Shares</div>
<div class="slash"></div>
<div class="postComments">100 Comments</div>
<div class="slash"></div>
<div class="date"><?php the_time('M jS, Y') ?></div>
</div>
<div style="clear: both"></div>
<!--<div class="readMore_Container">-->
<?php the_content('Read More »'); ?>
<div class="postCounter">
<i class="fa fa-pencil-square-o fa-2x"></i>#200
</div>
<div class="metadata" style="clear:both;">
<div class="TagIcon"></div>
Filed under
<span class="category"><?php the_category(', ') ?></span> |
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('Comment (0)', ' Comment (1)', 'Comments (%)'); ?>
</div>
<div style="clear:both;"></div>
<div style="clear:both;"></div>
</div>
</div>
<!-- end item -->
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
<p> </p>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
<!-- end content -->
</div>
<div id="primary">
<?php include(TEMPLATEPATH."/l_sidebar.php");?>
</div>
<div id="secondary">
<?php include(TEMPLATEPATH."/r_sidebar.php");?>
</div>
<?php get_footer(); ?>
I created custom theme with WordPress and bootstrap and everything works fine except previous and next link in singe.php.
Here is my code:
<?php get_header(); ?>
<article>
<div class="container single-project">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="row">
<div class=" col-md-4 col-lg-4 pull-right">
<header class="entry-header">
<h1 id="post-<?php the_ID(); ?>"><?php the_title();?></h1>
<hr>
</header><!-- .entry-header -->
</div>
<div class=" hidden-md hidden-lg"><hr></div>
<div class="col-md-4 col-lg-4"><?php the_content(); ?></div>
<?php previous_posts_link() ?>
<?php next_posts_link() ?>
</div> <!-- end of row -->
</div> <!-- end of container -->
<?php endwhile; endif; ?>
</article>
<?php get_footer(); ?>
Thanks in advance.
You have to move
<?php previous_posts_link() ?>
<?php next_posts_link() ?>
after
</article>
preferably inside some div so you can style it, like
<div class="navi">
<?php previous_posts_link() ?>
<?php next_posts_link() ?>
</div>
Found solution:
<?php previous_post('« « %', 'Previous Post', 'yes'); ?> |
<?php next_post('% » » ', 'Next Post', 'yes'); ?>
http://wpsites.net/web-design/previous-next-single-post-navigation-links-wordpress/
I'm actually trying to display the post thumbnail inside the loop just before the content by using the_post_thumbnail(); function.
It works like a charm in anywhere in my page before I call the function
<?php get_sidebar(); ?>
After that impossible to show the post thumbnail.
I've tried with
<?php the_post_thumbnail(); ?>
and also
<?php echo get_the_post_thumbnail(); ?> but nothing happens.
Here is my whole code :
<?php
/**
* The Template for displaying all single posts
*
* #package WordPress
*/
get_header(); ?>
<div id="pageHeader" >
<div id="pageHeader-inner"> <span class="shadow"></span><img src="<?php bloginfo('template_url'); ?>/images/header_01.jpg" /></div>
</div>
<div class="container" id="pageTitle">
<h1><?php the_title(); ?></h1>
</div>
<!--Begin of content-->
<div class="grey-bg">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row">
<div class="col-sm-3 sidebar">
<!-- Sub Nav -->
<?php if ( is_page() ) { ?>
<?php
if($post->post_parent)
$children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0'); else
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if ($children) { ?>
<div class="sidebar-module sub-menu">
<ul>
<?php echo $children; ?>
</ul>
</div>
<?php } } ?>
<!--Works perfectly till here -->
<?php get_sidebar(); ?>
<!--Broken till here-->
</div> <!-- /.sidebar -->
<div class="col-sm-9">
<div class="content-main">
<div class="content white-bg left-stroke <?php echo $post->post_name; ?>">
<?php if ( has_post_thumbnail() ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h1>Not Found</h1>
</div>
<?php endif; ?>
</div> <!-- /.content -->
</div><!-- /.content-main -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<?php get_footer(); ?>
Thank's a lot for your responses.
You are trying to use function the_post_thumbnail() outside WordPress loop. To use this function outside loop you have to specify "post ID". Documentation for this function http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
For example to get thumbnail for post ID 4 you have to use function with parameter 4 like the_post_thumbnail(4) or store ID in variable.