I'm trying to make it so posts can be easily paginated in a custom theme, but I'm doing something wrong. I've included wp_link_pages(); in the while like which I believe is required, but maybe I have it in the wrong place or I'm missing something else?
<?php get_header(); ?>
<?php
while(have_posts()) {
the_post();
wp_link_pages();
?>
<div class="mainConent">
<div class="leftSidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('left_sidebar') ?>
</div>
</div>
<div class="recentBlogsWrapper">
<div class="blogWrapper">
<h2><?php the_title(); ?></h2>
<p><?php the_time('F j, Y') ?></p>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php comments_template(); ?>
<?php } ?>
<div class="backarrowwrap">
<a class="backhomelink" href="<?php echo site_url(); ?>" <?php if(is_front_page()) echo 'class="active"' ?>>
<img class="backarrow" src="<?php echo get_template_directory_uri(); ?>/img/backarrow.png" alt="back arrow" />
Go Back Home
</a>
</div>
</div>
</div>
</div>
<div class="rightSidebar" id="sidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('right_sidebar') ?>
</div>
</div>
<?php get_footer(); ?>
Another odd thing that's happening is that the code block is showing the code on the page instead of hiding it like it should.
The wordpress editor
My blog post page which shows the code
Gutenburg was preventing me from writing the comment as code, even in a code box. Once I switched to the classic view the problem went away since I could write the comment in the html directly.
Related
I created a theme from scratch and have pagination working on the post pages using , it's working on single.php.
<?php get_header(); ?>
<?php
while(have_posts()) {
the_post();
?>
<div class="mainConent">
<div class="leftSidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('left_sidebar') ?>
</div>
</div>
<div class="recentBlogsWrapper">
<div class="blogWrapper">
<h2><?php the_title(); ?></h2>
<p><?php the_time('F j, Y') ?></p>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php comments_template(); ?>
<?php } ?>
<div class="backarrowwrap">
<a class="backhomelink" href="<?php echo site_url(); ?>" <?php if(is_front_page()) echo 'class="active"' ?>>
<img class="backarrow" src="<?php echo get_template_directory_uri(); ?>/img/backarrow.png" alt="back arrow" />
Go Back Home
</a>
</div>
</div>
</div>
</div>
<div class="rightSidebar" id="sidebar">
<div class="sidebarTitleWrapper">
<?php dynamic_sidebar('right_sidebar') ?>
</div>
</div>
I put it right below the_content(); and it's working exactly like I want it to. However, it's not working on page.php, even though it's in the same place on the page.
<?php get_header();
while(have_posts()) {
the_post();
?>
<div class="pageWrapper">
<h2><?php the_title(); ?></h2>
<?php if(has_post_thumbnail()) { ?>
<div class="card-image">
<img class="page-image" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
</div>
<?php } ?>
<div class="card-description">
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php } ?>
</div>
</div>
<?php get_footer(); ?>
I've included the
<!–-nextpage-–>
code in one of my pages just like I did for the blogs, but it's not paginating between the paragraphs.
What am I doing wrong?
You need at least one <!--nextpage-->, if the content of a page (or post) has at least one <!--nextpage--> tag (and this code is in The Loop), this prints linked page numbers (“Pages: 1 2 3 4 and so on...”), without a link on current page number, and by default within tags:.
I don't have much idea about wordpress. I have a blog in wordpress. In my blog page, i am showing the most recent post in top and rest of post will appear in bottom . I am getting the repitation of most recent blog in bottom as well. that means, it's appearing twice on page. I want to get rid it from bottom. Thanks
<?php if (have_posts()):?>
<!-- section -->
<section>
<div class="row justify-content-center">
<div class="col-md-5"><?php $image1 = get_field('main_image');?>
<img id="theImage" class="img-fluid" src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></div>
<div class="col-md-4 base">
<div class="hero_col">
<p class="blog_content"><?php the_time('F j, Y'); ?> </p>
<span class="head_blog_content">
<?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</span>
<div class="read_article py-3"><a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></div>
</div>
</div>
<div class="centered_cols"><span class="hero_text"><!-- post title -->
<?php the_title(); ?>
</span></div>
</div>
</section><!-- Gallery Section -->
<div class="product-container">
<div class="row justify-content-center">
<?php $Number = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-12 col-md-3 blog-container mb-3"><a href="#">
<?php $image1 = get_field('main_image');?>
<img src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></a>
<!-- post details -->
<p class="blog_date"><?php the_time('F j, Y'); ?></p>
<span class="blog_caption"><?php the_title(); ?>
</span>
<p class="blog_content"><?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</p>
<div class="column-bottom"><span class="read_article">
<a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></span></div>
</div>
<!-- /post details -->
<!-- article -->
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
<!-- /article -->
<?php $Number++; endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
I guess, since you don't know much about wordpress, its easier to create a counter to skip output in first item, something like this:
while (have_posts()) : the_post();
$Number = 1; //initial value
if ($count != 1) : ?>
//all your post content here
<?php endif;
$Number++; // incrementing counter by 1
It seems you came up with the counting (I've set the var name as Number based on your code), you're just missing the conditional aparently.
I'm trying to figure out how to create a custom single post template on wordpress. I'm not very familiar with it but was required to use it.
I've followed the steps required to create it but it seems that my new post template called educators is still referencing the original post template instead of the one i've created for it.
Here is my single-post_educator.php file code.
<?php get_header(); ?>
<div class="container-fluid">
<img src="<?php the_field('post_banner','option');?>" style="width :100%;">
<div class="container">
<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
<?php if( get_field('post_content_right') ) { ?>
<div class="post-right col-sm-6 col-xs-12">
<h2><?php echo get_the_title();?></h2>
<p><?php echo the_field('post_content');?></p>
</div>
<div class="col-sm-6 col-xs-12 post-right">
<a href="<?php echo home_url();?>/#educator" style="font-size:
15px;color:#000000;float:right;font-family: 'calibri';text-
decoration: underline;text-align:right;">Back</a>
<p><?php echo the_field('post_content_right');?></p>
</div>
<?php } else { ; ?>
<div class="post-right col-sm-6 col-xs-12">
<a href="<?php echo home_url();?>/#educator" style="font-size:
15px;color:#000000;float:right;font-family: 'calibri';text-
decoration:underline;text-align:right;">Back</a>
<h2><?php echo get_the_title();?></h2>
<p><?php echo the_field('post_content');?></p>
</div>
<?php } ;?>
<?php
endwhile;
endif; ?>
</div>
</div>
<?php get_footer(); ?>
I included a photo of how it currently is and how i actually want it to be like:
Thanks in advance.. help is much appreciated
The file should be named:
single-{post_type}.php
So in your case it should be
single-post_educators.php
You're missing the s
I'm really newbie to wordpress theme development and I want to get recent 10 posts inside front-page.php and all posts inside the index.php (I have no idea if a better way is there) followed by pagination.
Update : I want to have a home page that shows 10 posts and a articles page that shows all posts.
Is this approach right? if it is, how do I do that?
after some research I found a solution to do that.
at first I created 2 pages called home and articles, then I changed Setting -> Reading :
Front Page -> home
and
Posts Page -> articles.
then I put the following in the index.php as articles page :
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
then inside of front-page.php :
<?php
// the query
$wpb_all_query = new WP_Query(array('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 10)); ?>
<?php if ($wpb_all_query->have_posts()) : ?>
<!-- the loop -->
<?php while ($wpb_all_query->have_posts()) : $wpb_all_query->the_post(); ?>
<div class="post">
<div class="col-xs-12 col-lg-6">
<div class="panel panel-default ">
<div class="panel-body">
<div class="col-xs-4">
<a href="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()) : ?>
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<?php else: ?>
<img
src="<?php bloginfo('template_directory'); ?>/assets/image/placeholder.jpg"
alt="">
<?php endif; ?>
</a>
</div>
<div class="col-xs-8">
<div class="title">
<a href="<?php the_permalink(); ?>">
<h2><?php the_title(); ?></h2>
</a>
</div>
<div class="content">
<p><?php echo substr(get_the_content(), 0, 320); ?>...</p></div>
<div class="read-more">
Read More
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<!-- end of the loop -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
finally it works in the way exactly what I wanted.
The code below should display the content of the page followed by certain page content.
<!-- Section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- Article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- Posts for homepage -->
<?php
if ( is_front_page() ) { ?>
<?php the_content(); ?>
<!-- Show page content according to page ID -->
<div class="title-home clearfix">
<div class="four title-home-text">Services Spotlight</div>
<div class="four title-home-text" style="margin-left: 115px;">Industry Expertise</div>
<div class="four title-home-text" style="margin-left: 125px;">Features & Benefits</div>
</div>
<div class="four-wrapper clearfix">
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=40');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=41');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php
query_posts('page_id=42');
while (have_posts()): the_post();
the_content();
endwhile;
?>
</div>
read more
</div>
<div class="four-container">
<div class="four-col line">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-3')) ?>
</div>
</div>
</div>
<?php
}
else {
?>
<h1><?php the_title(); ?> </h1>
<?php the_content(); ?>
<?php } ?>
<!-- end post homepage -->
<br class="clear">
<?php edit_post_link(); ?>
</article>
<!-- /Article -->
<?php endwhile; ?>
<?php else: ?>
<!-- Article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /Article -->
<?php endif; ?>
</section>
<!-- /Section -->
<?php get_footer(); ?>
However, it displays the last query as loop.
Output Code:
<article id="post-6" class="post-6 page type-page status-publish hentry">
<article id="post-42" class="post-42 page type-page status-publish hentry">
post-42 should not be displayed in the article.
Also, I know the code is not simplified for using while loop. I want to fix the article problem and simplify this code.
The codex advises against using query_posts for secondary loops as per Codex Query Posts Page
It looks like you are stomping on the main loop (article) since query_posts alters the main loop. If you want to use query_posts it is recommended that you call wp_reset_query() when done. The preferred method is to use WP_query().