I am trying to use Reveal.js (https://github.com/hakimel/reveal.js/) on WordPress with the Posts being the content per each slide.
I have gotten the post to display properly on the slides, but I am having trouble finding a way to wrap posts that have the same category in a tag.
Basically, My current code looks something like this:
<section class="section chapter-1 ">
</section>
<section class="section chapter-1 ">
</section>
<section class="section chapter-1 ">
</section>
<section class="section chapter-2 ">
</section>
<section class="section chapter-2 ">
</section>
But I need it to look like this:
<section id="category-1">
<section class="section chapter-1 ">
</section>
<section class="section chapter-1 ">
</section>
<section class="section chapter-1 ">
</section>
</section>
<section id="category-2">
<section class="section chapter-2 ">
</section>
<section class="section chapter-2 ">
</section>
</section>
Here is my index.php code:
<div class="reveal content-area">
<div id="content" class="slides site-content" role="main">
<?php if ( have_posts() ) : ?>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary -->
... and so on with more 'chapters' and more categories
If you notice the second code example are grouped and wrapped in a section tag with an ID of the category name.
you could do this, or have an array with categories
<?php
$args = array( 'category' => 1 );
get_posts($args);
?>
<section id="category-1">
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<section class="section chapter-<?php the_ID()?> ">
the_content();
</section>
<?php
endwhile; endif;
?>
</section>
<?php
wp_reset_query();
$args = array( 'category' => 2 );
get_posts($args);
<section id="category-2">
if (have_posts()) : while (have_posts()) : the_post();
<section class="section chapter-<?php the_ID()?> ">
the_content();
</section>
endwhile; endif;
</section>
wp_reset_query();
?>
Related
I'm trying to create a shortcode to display blogs using this code in the functions.php file, I copied it from the blog template.
When I use the shortcode in a wordpress post, it isn't displaying the blogs as I want them to. Is it because of the php tags inside of the html?
function wpse_143641_homebox_shortcode( $atts ) {
return <<<HOMEBOX
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container blog">
<div class="row">
<div class="col-md-8 col-md-push-2">
<?php
$temp = $wp_query; $wp_query= null;
$wp_query = new WP_Query(); $wp_query->query('posts_per_page=6' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_post_thumbnail(); ?>
<div class="entry-meta">
<?php neue_posted_on(); ?> by <?php the_author(); ?>
</div><!-- .entry-meta -->
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
<?php if ($paged > 1) { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
<div class="next"><?php previous_posts_link('Newer Posts »'); ?></div>
</nav>
<?php } else { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
</nav>
<?php } ?>
</div> <!-- /.col-md-8 -->
</div> <!-- /.row -->
<?php wp_reset_postdata(); ?>
</div> <!-- /.container -->
</main><!-- #main -->
</div><!-- #primary -->
HOMEBOX;
}
add_shortcode( 'homebox', 'wpse_143641_homebox_shortcode' );
please try below code. it will help you
function wpse_143641_homebox_shortcode( $atts ) {
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container blog">
<div class="row">
<div class="col-md-8 col-md-push-2">
<?php
global $wp_query;
$temp = $wp_query;
if ( get_query_var('paged') ) { $paged = get_query_var('paged'); } else if ( get_query_var('page') ) {$paged = get_query_var('page'); } else {$paged = 1; }
$wp_query = new WP_Query(); $wp_query->query('posts_per_page=6' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_post_thumbnail(); ?>
<div class="entry-meta">
<?php //neue_posted_on(); ?> by <?php the_author(); ?>
</div><!-- .entry-meta -->
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
<div class="next"><?php previous_posts_link('Newer Posts »'); ?></div>
</nav>
<?php $wp_query = null; $wp_query = $temp; ?>
</div> <!-- /.col-md-8 -->
</div> <!-- /.row -->
<?php wp_reset_postdata(); ?>
</div> <!-- /.container -->
</main><!-- #main -->
</div><!-- #primary -->
<?php
}
add_shortcode( 'homebox', 'wpse_143641_homebox_shortcode' );
My footer.php file will pull into every page except the single.php, I have no idea why this is occurring! Any ideas?
Below is the Single.php code
<?php get_header(); ?>
<div class="page-content">
<div class="small-banner">
<h1><?php the_title(); ?></h1>
<img src="http://www.quorngrangehotel.local/wp-content/uploads/2017/04/new-events-banner.jpg">
</div>
<main role="main" class="mainContent">
<div id="inner-content" class="row">
<main id="main" class="large-8 medium-8 columns" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php get_template_part( 'parts/loop', 'single' ); ?>
<?php endwhile; else : ?>
<?php get_template_part( 'parts/content', 'missing' ); ?>
<?php endif; ?>
</main> <!-- end #main -->
</div> <!-- end #inner-content -->
</main><!-- end #content -->
<?php get_footer(); ?>
I found out the issue it was something to do with the comments section being pulled in via the single template part!
I am building a WordPress theme. I am having some trouble on commenting section. When showing comments it gets randomly post ID.
I have put the same code in 2 different places in the first place it TOP but by at BOTTOM its not working. Can anyone help me by telling why is this not working at bottom?!
Here is my single.php file
<?php get_template_part('/template-parts/standard-post-header'); ?>
<main role="main">
<!-- section -->
<section>
<div class="container background-color">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if (has_post_video( isset($post_id) ) != null) {
// Featured VIDEO -->
get_template_part('/template-parts/featured-video-post');
// END Featured VIDEO -->
} else { ?>
<!-- Featured Image -->
<?php $header_type = get_post_meta(get_the_id(), 'meta-box-dropdown', true); ?>
<?php if ($header_type == 'Slider') {
// SLIDER Header
get_template_part('/template-parts/featured-slider-post');
?>
<?php } else {
// SLIDER Header
get_template_part('/template-parts/featured-normal-post');
} ?>
<!-- END Featured Image -->
<?php } ?>
<div class="container container-post-color">
<div class="content">
<?php the_content(); ?>
<?php edit_post_link(); ?>
</div>
</div>
<?php
global $post;
echo $post->ID;
?>
<ol class="commentlist">
<?php
//THIS WORKS!!!
$comments = get_comments(array(
'post_id' => $post->ID,
'status' => 'approve'
));
wp_list_comments(array(
'per_page' => 10,
'reverse_top_level' => false
), $comments);
?>
</ol>
<!-- Post Navigation -->
<div class="container container-post-color top-space" style="padding-left: 0px; padding-right: 0px;">
<div id="left-side"><?php previous_post_link(); ?></div>
<div id="right-side"><?php next_post_link(); ?></div>
<?php echo wp_link_pages(); ?>
</div>
<!-- Tags -->
<div class="tags-area">
<?php echo the_tags(); ?>
</div>
<!-- Related Articles -->
<?php get_template_part('/template-parts/related-articles'); ?>
<!-- Coments Part -->
<?php //get_template_part('/template-parts/comments'); ?>
<?php
global $post;
echo $post->ID;
?>
<ol class="commentlist">
<?php
//THIS DOES NOT WORKS!!! WHY?!
$comments = get_comments(array(
'post_id' => $post->ID,
'status' => 'approve'
));
wp_list_comments(array(
'per_page' => 10,
'reverse_top_level' => false
), $comments);
?>
</ol>
</article>
<!-- /article -->
</div>
<!-- END of Container-Fluid -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<div class="container background-color">
<h1 class="black mastheading-post"><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</div>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
<!-- INSTAGRAM -->
<?php get_template_part('/template-parts/instagram'); ?>
<?php get_footer(); ?>
related-articles.php
<div class="container container-post-color" style="padding-left: 0px; padding-right: 0px;">
<div class="random">
<ul>
<?php $posts = get_posts('orderby=rand&numberposts=4'); foreach($posts as $post) { ?>
<div class="col-md-3 padding-zero">
<li>
<div class="random-thumb">
<?php the_post_thumbnail('full'); ?>
</div>
<div class="random-title">
<h1 class="black mastheading"><?php the_title(); ?></h1>
</div>
<div class="black iltalica"><?php echo excerpt(25); ?></div>
<div class="category">
<div class="random-category">
<h5><?php echo the_category();?></h5>
</div>
</div>
</li>
</div>
<?php } ?>
</ul>
</div>
</div>
So first off, since you are in the loop, everywhere you've used global $post; ... $post->ID you should be able to use get_the_ID() instead.
Second, I strongly suspect the problem is your template part /template-parts/related-articles probably messes-up the main loop. I suggest you look at that file and see if it's itself looping on a selection of posts - chances are it is not doing it cleanly, in a way that can be re-used inside the main loop.
You can add that file's code to your question if you need help figuring it out.
UPDATE
Ok, so indeed, you need to reset the loop data after the related-articles loop:
...
<?php
}
wp_reset_postdata(); // <----- add this after your loop
?>
</ul>
...
Hope this helps!
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 ?>
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/