WordPress query posts on scroll laggy/skips - php

I have a website that on the homepage contains images/sliders standard page content etc. Once the page loads, it scrolls nice and smoothly. But I have a section about half way down that queries and displays WordPress Posts (see code below). When I view it in Google Chrome, while scrolling in that section, the website becomes laggy/skips and doesn't smoothy scroll like the rest of the home page.
Is there a way or something to include that will have WordPress query the posts faster or better or is there another reason as to why scrolling in that section becomes laggy?
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('no_found_rows=true&showposts=6&post_status=publish' . '&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="newspagearticle full">
<div class="newsthumb">
<?php the_post_thumbnail( 'category-thumb' ); ?>
</div>
<div class="homenewsheader">
<div class="newsdate">
<div><?php the_time('M') ?></div>
<?php the_time('d'); ?>
</div>
<h2>
<a class="readmore" href="<?php the_permalink() ?>">
<?php
$thetitle = $post->post_title; /* or you can use get_the_title() */
$getlength = strlen($thetitle);
$thelength = 200;
echo substr($thetitle, 0, $thelength);
if ($getlength > $thelength) echo "...";
?>
</a>
</h2>
</div>
<div style="clear:both;"></div>
<?php the_excerpt(); ?>
</div><!-- /newspagearticle -->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

Related

Wordpress does not print content right

My problem is that for some reason pages title and content prints upside down. And it prints searchbar twice. Can you please take look at coede bwlow
<?php get_header(); ?>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="row text-center no-margin">
<?php
$currentPage = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 3,'post_type'=>'post', 'paged' => $currentPage);
new WP_Query($args);
if( have_posts() ): $i = 0;
while( have_posts() ): the_post(); ?>
<?php
if($i==0): $column = 12; $class = '';
elseif($i > 0 && $i <= 2): $column = 6; $class = ' second-row-padding';
elseif($i > 2): $column = 4; $class = ' third-row-padding';
endif;
?>
<?php the_content(); ?>
<div class="col-xs-<?php echo $column; echo $class; ?> blog-item">
<?php if( has_post_thumbnail() ):
$urlImg = wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) );
endif; ?>
<div class="blog-element" style="background-image: url(<?php echo $urlImg; ?>);">
<!--<?php the_title( sprintf('<h1 class="entry-title">', esc_url( get_permalink() ) ),'</h1>' ); ?> -->
<h1 class="entry-title"><?php the_title(); ?></h1>
<small><?php the_category(' '); ?></small>
</div>
</div>
<?php $i++; endwhile; ?>
<div class="col-xs-6 text-left">
<?php next_posts_link('« Older Posts'); ?>
</div>
<div class="col-xs-6 text-right">
<?php previous_posts_link('Newer Posts »'); ?>
</div>
<?php endif;
wp_reset_query();
?>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Maybe you were doing the Wordpress101 course in youtube. In the code you show there is not a search bar. The search bar is in the header that you called here using:
Maybe in the header was repeated the calling to the search form:
<div class="container">
<?php get_search_form(); ?>
</div>
Also, I had the problem that bootstrap wasn't rendering in a good way the menu, so I had to add also in the header.php (no matter if I also refer to the bootstrap in the functions.php file , as I assumed you did it in the tutorial) the lines on the Bootstrap CDN in this page:
http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
Copy this CDN links:
Latest compiled and minified CSS
Optional theme
Latest compiled and minified JavaScript

Show three full posts on catgegory page, then rest of posts as titles only

I'm building a theme and on my category.php page I want to show several full posts (let's say 3, but need to be able to change this to 2 or 1 easily), and then the rest of the posts in the category as title links.
I have quite a bit of HTML in my loop for styling my posts and adding custom fields so sorry about all the code, but this is what my category.php page looks like now. I've tried a few things that haven't worked so have edited this to show my original code which just has a normal list of posts. I'm somewhat new to editing The Loop so would appreciate as much explanation/clarity as possible.
<?php
/**
* The template for displaying Category Archive pages.
*/
get_header(); ?>
<div id="primary" class="<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>">
<div id="feature-container" class="full-width-container">
<div class="full-width-container content-page" id="tagline-wrapper">
<div id="left-black"></div>
<div class="page-width-container">
<div id="tagline-box">
<h1 class="category-title">Transactions</h1>
</div>
</div>
</div>
</div>
<div id="content-wrapper">
<div id="project-menu" class="page-width-container">
<?php wp_nav_menu( array( 'theme_location' => 'project-types' ) ); ?>
</div>
<div id="content" role="main" >
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="story-container" class="module-container">
<div class="our-story">
<div class="story-image">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<div class="story-text">
<article class="post" id="post-<?php the_ID(); ?>">
<div class="entry-container">
<h2><?php the_title(); ?></h2>
<div class="project-details">
<p><span class="details-location"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-location', true);
wp_reset_query();
?></span><br />
<span class="details-funding"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-type', true);
wp_reset_query();
?> | <?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_funding-source', true);
wp_reset_query();
?></span><br />
<span class="details-value"><?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, '_project-value', true);
wp_reset_query();
?></span></p>
</div>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => __('Pages: ','html5reset'), 'next_or_number' => 'number')); ?>
</div>
<?php edit_post_link(__('Edit this entry','html5reset'), '<p>', '</p>'); ?>
</div>
</article>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div><!-- #content -->
</div>
</div><!-- #primary -->
<?php get_footer(); ?>
You can achive above thing using following code:
First you have to loop all post and and put counter when it reach more then 2 its stop to print a content.but title will be there always.
<?php $countPost=1;?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>">
<?php the_title(); ?></h2>
<?php if($countPost>2) : /*Condition for Content*/
the_content();
endif;
?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','« Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries »','') ?>
</div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>
</div>
For more details please refer :
https://codex.wordpress.org/The_Loop_in_Action
I figured out a bit of a workaround solution on my own, although it relies on using plugins/widgets which isn't what I'd prefer.
I simply set the Reading settings to display 2 posts, and then below the Loop I added a widget area and used the Recent Posts Extended widget to display a list of titles/links. This widget allows you to skip a certain amount of posts in the list, so I set it to start at post #3. There was no option to show posts from the current category only, so I had to use the Widget Context plugin as well and make individual widgets with a specific category to show on each corresponding category page. As I said, a bit of a convoluted solution, but the end result is exactly what I wanted to achieve.

WordPress loop get post not page single

I am trying to get latest posts to display through a template page i am building for pages, the loop is not running the latest post only one page
ok, I have a simple loop that gets latest post
my loop
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
and content.php
<div class="blog-post">
<h2 class="blog-post-title">
<?php the_title(); ?>
</h2>
<p class="blog-post-meta">
<?php the_date(); ?>by <?php the_author(); ?>
<a href="<?php comments_link(); ?>">
<?php printf(_nx('One Comment', '%1$s Comments', get_comments_number(), 'comments title', 'textdomain'), number_format_i18n(get_comments_number())); ?>
</a>
</p>
<?php if ( has_post_thumbnail() ) {?>
<div class="row">
<div class="col-md-4">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<div class="col-md-6">
<?php the_excerpt(); ?>
</div>
</div>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?>
</div>
when i run the loop in index.php i get my latest blog post, perfect.
however, i am building a template page, i try and include the loop in this page, i just get one page (not all posts).
my template
<div class="row">
<div class="col-sm-12">
// content bar
<?php get_template_part('advicecentre_bar', get_post_format()) ?>
// cmd driven content
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content_page', get_post_format());
endwhile; endif;
?>
// recent post
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
</div> <!-- /.col -->
</div> <!-- /.row -->
<?php get_footer(); ?>
If you are using multiple loops on the same page, you must use rewind_posts() like so:
<div class="row">
<div class="col-sm-12">
// content bar
<?php get_template_part('advicecentre_bar', get_post_format()); ?>
// cmd driven content
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content_page', get_post_format());
endwhile; endif;
?>
<?php rewind_posts(); ?>
// recent post
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
</div> <!-- /.col -->
</div> <!-- /.row -->
<?php get_footer(); ?>
This "resets" the loop to it's original state and allows you to look through the posts again. In your original code you scan through all the posts, and then in your second loop scan through nothing, as you have already scanned through all the posts!
Hmm I have found this solution using a for each rather than the while loop seems to work, but im not sure if its the best way around.
<ul>
<?php
$recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ){
echo '<li>' . $recent["post_title"].' </li> ';
}
wp_reset_query();
?>
</ul>
UPDATE
<?php
$args = array('numberposts' => 5);
$recent_posts = wp_get_recent_posts($args);
foreach ($recent_posts as $recent) {
$excerpt = wp_trim_excerpt($recent['post_content']);
$permalink = get_permalink($recent["ID"]);
$title = esc_attr($recent["post_title"]);
$thumbnail = get_the_post_thumbnail($recent["ID"], 'thumbnail');
echo '<li><a href="' . $permalink . '" title="Look ' . $title . '" >' . $thumbnail . $title . '</a></li>';
echo $excerpt;
}
?>

Wordpress pagination system

I have a problem with my pagination system (wordpress). It's on my search page (display results), currently, the search system include only 2 post types, and the search system works fine, but clearly impossible to create a pagination system. I just want to create a simple previous and next page nav with the number of the current page.
<div class="contenu cont-menu fixed-cont aff">
<div class="page p-spe">Résults :
<span class="blue"><?php the_search_query(); ?></span></div>
<div class="nombre"><?php global $wp_query; echo ' ' .
$wp_query->found_posts . ' Result(s)'; ?></div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article class="article-menu">
<div class="article-menu a-m-sp">
<a href="<?php the_permalink(); ?>">
<span class="rollover r2"> </span>
<?php the_post_thumbnail(array(226,150)); ?>
</a>
<div class="right p-special">
<h2 class="h2-article-menu h2-ma"><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<p class="date"><?php the_time('j F Y'); ?></p>
<?php the_excerpt(); ?>
Know more
</div>
</div>
<div class="sep sp-s"> </div>
</article>
<?php endwhile; ?>
<nav class="nav-pages">
<?php previous_posts_link('« Previous') ?>
<span class="nombre-pages"><?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
echo $paged.' / '.$wp_query->max_num_pages;
?></span>
<?php next_posts_link('Next »') ?>
</nav>
<?php
$wp_query = null;
$wp_query = $temp; // Reset
?>
<?php else : ?>
<div class="aucun-resultat">
<?php _e( 'No results' ); ?>
</div>
<?php endif; ?>
<?php
get_footer();
?>
So i add the pages nav just after the endwhile of the search results. I don't know why my system doesn't work. I'm a wordpress beginner, thank you for your help. Bernard
You don't need a custom query for this. Just add paginate_links() which generates pagination with arrows and numbers (can be configured to display as you wish).
http://codex.wordpress.org/Function_Reference/paginate_links
I update my post, because I made a pagination for 1 post type and It works fine. But now I would like to do a pagination of 2 post types. How i can change this code to make it works ?
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('showposts=4&post_type=dossiers'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>

Share Buttons Will Not Show

I've created a custom blog page to go along with my WordPress website. This page is made to show only 1 category form the blog feed. I've added the "AddThis" plugin share buttons and manually coded it in the theme.
The problem is the buttons will not show. I've attempted other share plugins into the page but they will not show either. Now, the buttons do work as they show up on other blog pages and the articles themselves.
Here is the website of the page and the code, am I missing something or do I need to change a line of code?
Page with non-working share buttons
Page with working share buttons
<?php /* Template Name: Page - Online Reviews */ ?>
<div class="main_container">
<div class="page_container">
<h2 style="border-bottom: solid thin #000; line-height: 50px; margin-bottom: 50px;"><?php the_title(); ?></h2>
<?php
$temp = $wp_query;
$wp_query = NULL;
$wp_query = new WP_Query();
$wp_query->query('cat=4&paged='.$paged); $tb_counter = 1;
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div <?php if(function_exists('post_class')) : ?><?php post_class(); ?><?php else : ?>class="post post-<?php the_ID(); ?>"<?php endif; ?>>
<h3><?php the_title(); ?></h3>
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_linkedin_counter"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dd51ec729a7fec7"></script>
<!-- AddThis Button END -->
<footer class="entry-meta">
<?php the_time(__('M d, Y', 'easycarebath')); ?> | <?php _e('Categories:','easycarebath'); if (the_category(', ')) the_category(); ?> <?php if (get_the_tags()) the_tags(__('| Tags: ','easycarebath')); ?> | <?php comments_popup_link(__('Leave A Comment »', 'easycarebath'), __('1 Comment »', 'easycarebath'),__ngettext('% Comment »', '% Comments »',get_comments_number (),'easycarebath')); ?> <?php edit_post_link(__('Edit','easycarebath'), '| ', ''); ?>
</footer>
<?php $tb_counter++; endwhile; ?>
<nav id="nav-below" class="navigation" role="navigation">
<div class="nav-previous alignright"><?php next_posts_link(__('« Older Entries','easycarebath')); ?></div>
<div class="nav-next alignleft"><?php previous_posts_link(__('Newer Entries »','easycarebath')); ?></div>
</nav>
<?php $wp_query = NULL; $wp_query = $temp;?>
</div>
<?php get_sidebar(); ?>
</div>
I found the problem. It's not the code that was the issue, it was Transmit that was not saving the code properly. After a restart of the program, I was able to save the code and the share buttons were able to show up.
Thanks everyone for your attempt, it was a software problem. :)

Categories