Been researching on this issue. Found lots of advice but none that seem to work or that applies to my site. In the search results page, my website displays shortcodes from plugins as code. I'd like to hide this code from being displayed.
This is the code from my search.php page
<?php
/**
* Search results page
*
* #package shaka-pt
*/
get_header();
$shaka_sidebar = get_field( 'sidebar', (int) get_option( 'page_for_posts' ) );
if ( ! $shaka_sidebar ) {
$shaka_sidebar = 'left';
}
get_template_part( 'template-parts/page-header' );
?>
<div id="primary" class="content-area container">
<div class="row">
<main id="main" class="site-main masonry col-xs-12<?php echo 'left' === $shaka_sidebar ? ' col-lg-9 col-lg-push-3' : ''; ?><?php echo 'right' === $shaka_sidebar ? ' col-lg-9' : ''; ?>" role="main">
<?php if ( have_posts() ) : ?>
<div class="grid js-pt-masonry row">
<div class="grid-sizer col-xs-12 col-sm-6 col-lg-4"></div>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content', 'search' ); ?>
<?php endwhile; ?>
</div>
<?php
the_posts_pagination( array(
'prev_text' => '<i class="fa fa-long-arrow-left"></i>',
'next_text' => '<i class="fa fa-long-arrow-right"></i>',
) );
?>
<?php else : ?>
<?php get_template_part( 'template-parts/content', 'none' ); ?>
<?php endif; ?>
</main>
<?php get_template_part( 'template-parts/sidebar', 'blog' ); ?>
</div>
</div>
<?php get_footer(); ?>
Here is the code from the template-parts/content-search.php
<?php
/**
* The template part for displaying results in search pages.
*
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* #package shaka-pt
*/
$blog_columns = get_theme_mod( 'blog_columns', 6 );
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( array( 'grid-item', 'col-xs-12', 'col-sm-6', esc_attr( sprintf( 'col-lg-%s', $blog_columns ) ) ) ); ?>>
<!-- Featured Image -->
<?php if ( has_post_thumbnail() ) : ?>
<header class="hentry__header">
<a class="hentry__featured-image" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'post-thumbnail', array( 'class' => 'img-fluid' ) ); ?>
</a>
</header><!-- .hentry__header -->
<?php endif; ?>
<!-- Content Box -->
<div class="hentry__content entry-content">
<!-- Date -->
<time class="hentry__date" datetime="<?php the_time( 'c' ); ?>"><?php echo get_the_date(); ?></time>
<!-- Author -->
<span class="hentry__author"><i class="fa fa-user"></i> <?php echo esc_html__( 'By' , 'shaka-pt' ) . ' ' . get_the_author(); ?></span>
<!-- Content -->
<?php the_title( sprintf( '<h2 class="hentry__title">', esc_url( get_permalink() ) ), '</h2>' ); ?>
<p>
<?php echo wp_kses_post( get_the_excerpt() ); ?>
</p>
<p>
<?php printf( esc_html__( 'Read more %s', 'shaka-pt' ), the_title( '<span class="screen-reader-text">', '</span>', false ) ); ?>
</p>
<?php if ( has_category() || comments_open( get_the_ID() ) ) : ?>
<div class="hentry__meta meta">
<!-- Categories -->
<?php if ( has_category() ) : ?>
<span class="meta__item meta__item--categories"><?php the_category( ' ' ); ?></span>
<?php endif; ?>
<!-- Comments -->
<?php if ( comments_open( get_the_ID() ) ) : // Only show comments count if the comments are open. ?>
<span class="meta__item meta__item--comments"><?php ShakaHelpers::pretty_comments_number(); ?></span>
<?php endif; ?>
</div><!-- .hentry__meta -->
<?php endif; ?>
</div><!-- .hentry__content -->
</article><!-- #post-## -->
Once I had the same problem, it inserted shortcodes that I doesn't even used on my site, it was a "feature" of the theme... If I switched off the not used plugins, it looked like exactly this on the search result page. Don't know why exaclty on that page...:) My problem has been solved by editing and deleting this shortcodes from a search_result.php in my child theme.
I am guessing those shortcodes come from the posts that appear in the search results, assuming the red text is the excerpt.
You can strip these shortcodes before passing it
using strip_shortcodes()
Using your code from template-parts/content.php inside your content if else statement you make a call to the_content(), which returns your full content including shortcodes. You could try using the following code:
strip_shortcodes(
the_content( sprintf(
esc_html__( 'Read more %s', 'shaka-pt' ),
the_title( '<span class="screen-reader-text">"', '"
</span>', false )
) );
);
This should be your new content for template-parts/content.php
<?php
/**
* Template part for displaying posts.
*
* #package shaka-pt
*/
$blog_columns = get_theme_mod( 'blog_columns', 6 );
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( array( 'grid-item', 'col-xs-12', 'col-sm-6', esc_attr( sprintf( 'col-lg-%s', $blog_columns ) ) ) ); ?>>
<!-- Featured Image -->
<?php if ( has_post_thumbnail() ) : ?>
<header class="hentry__header">
<a class="hentry__featured-image" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'post-thumbnail', array( 'class' => 'img-fluid' ) ); ?>
</a>
</header><!-- .hentry__header -->
<?php endif; ?>
<!-- Content Box -->
<div class="hentry__content entry-content">
<!-- Date -->
<time class="hentry__date" datetime="<?php the_time( 'c' ); ?>"><?php echo get_the_date(); ?></time>
<!-- Author -->
<span class="hentry__author"><i class="fa fa-user"></i> <?php echo esc_html__( 'By' , 'shaka-pt' ) . ' ' . get_the_author(); ?></span>
<!-- Content -->
<?php the_title( sprintf( '<h2 class="hentry__title">', esc_url( get_permalink() ) ), '</h2>' ); ?>
<?php
$shaka_is_excerpt = ( 1 === (int) get_option( 'rss_use_excerpt', 0 ) );
if ( $shaka_is_excerpt ) : ?>
<p>
<?php echo strip_shortcodes(wp_kses_post( get_the_excerpt())); ?>
</p>
<p>
<?php printf( esc_html__( 'Read more %s', 'shaka-pt' ), the_title( '<span class="screen-reader-text">', '</span>', false ) ); ?>
</p>
<?php else :
/* translators: %s: Name of current post */
strip_shortcodes(
the_content( sprintf(
esc_html__( 'Read more %s', 'shaka-pt' ),
the_title( '<span class="screen-reader-text">"', '"
</span>', false )
) );
);
endif;
?>
<div class="hentry__meta meta">
<!-- Categories -->
<?php if ( has_category() ) : ?>
<span class="meta__item meta__item--categories"><?php the_category( ' ' ); ?></span>
<?php endif; ?>
<!-- Comments -->
<?php if ( comments_open( get_the_ID() ) ) : // Only show comments count if the comments are open. ?>
<span class="meta__item meta__item--comments"><?php ShakaHelpers::pretty_comments_number(); ?></span>
<?php endif; ?>
</div><!-- .hentry__meta -->
</div><!-- .hentry__content -->
</article><!-- .hentry -->
Try this : add this in your theme's functions.php, additionally you would wrap the strip_shortcodes in if statement so that it runs only when you need
// remove shortcode from excerpt
function remove_shortcode_from_excerpt($content) {
$content = strip_shortcodes( $content );
return $content;
}
add_filter('the_excerpt', 'remove_shortcode_from_excerpt');
Related
I am using Dokan for a Multipurpose store. I have already set up 2 vendors with their individual products. When I click on each vendor, I want to see the categories of products and not the products directly. I need guidance on how to go about it.
Here is the link to the website: https://entertainers.vipclubguest.com/
Thank you.
SO, after contacting the plugin owner, he could not help as the edit I need is out of their support scope. However, he gave me a pointer of where to look and below is the code that is in the file:
<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$store_user = dokan()->vendor->get( get_query_var( 'author' ) );
$store_info = $store_user->get_shop_info();
$map_location = $store_user->get_location();
$layout = get_theme_mod( 'store_layout', 'left' );
get_header( 'shop' );
if ( function_exists( 'yoast_breadcrumb' ) ) {
yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
?>
<?php do_action( 'woocommerce_before_main_content' ); ?>
<div class="dokan-store-wrap layout-<?php echo esc_attr( $layout ); ?>">
<?php if ( 'left' === $layout ) { ?>
<?php dokan_get_template_part( 'store', 'sidebar', array( 'store_user' => $store_user, 'store_info' => $store_info, 'map_location' => $map_location ) ); ?>
<?php } ?>
<div id="dokan-primary" class="dokan-single-store">
<div id="dokan-content" class="store-page-wrap woocommerce" role="main">
<?php dokan_get_template_part( 'store-header' ); ?>
<?php do_action( 'dokan_store_profile_frame_after', $store_user->data, $store_info ); ?>
<?php if ( have_posts() ) { ?>
<div class="seller-items">
<?php woocommerce_product_loop_start(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php woocommerce_product_loop_end(); ?>
</div>
<?php dokan_content_nav( 'nav-below' ); ?>
<?php } else { ?>
<p class="dokan-info"><?php esc_html_e( 'No products were found of this vendor!', 'dokan-lite' ); ?></p>
<?php } ?>
</div>
</div><!-- .dokan-single-store -->
<?php if ( 'right' === $layout ) { ?>
<?php dokan_get_template_part( 'store', 'sidebar', array( 'store_user' => $store_user, 'store_info' => $store_info, 'map_location' => $map_location ) ); ?>
<?php } ?>
</div><!-- .dokan-store-wrap -->
<?php do_action( 'woocommerce_after_main_content' ); ?>
<?php get_footer( 'shop' ); ?>
I want to add a simple load more button to the front page of my wordpress site that will load more posts. I'm using a query and bootstrap to have 1 post per line, and then 2, and then 1, and so on. I want 15 posts to be displayed and then a load more button, and then when you press the button 15 more posts are loaded. I've started to try to add this button, but every time I try it does not work. I have tried plugins and making my own. If anyone can help me add in a load more button I would be extremely appreciative.
my front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 15,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();
EDITS FROM DOMINIQUE'S ANSWER
front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 15,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) { ?>
<button id=load-more>load more</button>
<?php
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();
loop.php
<?php if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
<?php
$i = 0;
$j = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<div class="row">
<article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
</div>
<?php
} else { // Small posts ?>
<?php if($j % 2 === 0) echo '<div class="row">'; ?>
<article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
<?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'front-shop-the-post' ); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</article>
<?php $j++; if($j % 2 === 0) echo '</div>'; ?>
<?php
}
$i++;
}?>
}
?>
functions.php
//LOAD MORE
add_action( 'wp_ajax_load_more', 'load_more' );
function load_more() {
if ( isset($_POST['action']) && $_POST['action'] === 'load_more' ){
$loopFile = $_POST['loop_file'];
$paged = $_POST['page_no'];
$posts_per_page = $_POST['posts_per_page'];
$args = array('paged' => $paged,
'post_type' => 'post',
'posts_per_page' => $posts_per_page);
$query = new WP_Query($args);
get_template_part( $loopFile );
}
wp_reset_query();
exit;
}
js
// AJAX to grab more posts, wrap with a vanilla javascript or
// jQuery click event function.
function loadMorePosts(pageNumber, postsPerPage) {
var query = 'action=load_more&page_no=' + pageNumber +
'&loop_file=loop&posts_per_page=' + postsPerPage;
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
data: query,
success: function(response){
// handle response
}
});
}
One approach you can take is to move your query to functions.php and add an action to wp_ajax. For example:
add_action( 'wp_ajax_load_more', 'load_more' );
function load_more() {
if ( isset($_POST['action']) && $_POST['action'] === 'load_more' ){
$loopFile = $_POST['loop_file'];
$paged = $_POST['page_no'];
$posts_per_page = $_POST['posts_per_page'];
$args = array('paged' => $paged,
'post_type' => 'post',
'posts_per_page' => $posts_per_page);
$query = new WP_Query($args);
get_template_part( $loopFile );
}
wp_reset_query();
exit;
}
Create a loop.php that resides in the root of your theme. This will be a template for your posts that can be iterated over:
<?php if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// populate your post template here
echo '<h2>' . get_the_title() .'</h2>';
}
?>
Place this code in a javascript file. When you need to grab more posts make an AJAX call to the action 'load_more':
// AJAX to grab more posts, wrap with a vanilla javascript or
// jQuery click event function.
function loadMorePosts(pageNumber, postsPerPage) {
var query = 'action=load_more&page_no=' + pageNumber +
'&loop_file=loop&posts_per_page=' + postsPerPage;
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
data: query,
success: function(response){
// handle response
}
});
}
This is a very simple implantation, you will want to include a NONCE for security and handle when max number of pages has been reached.
I used this http://jsfiddle.net/cburgmer/NfE3c/166/ example in a wordpress loop. But the code is working for once only. I want to make this code working for all posts in the page given below.
Here is the page link where I am working http://corey.bluwebz.com/find-a-business-card/
Full code is given below
<?php
/* Template Name: Blog page
*/
?>
<?php get_header(); ?>
<div id="content" class="home clearfix">
<div id="inner-content" class="wrap cf">
<?php query_posts('post_type=post&post_status=publish&posts_per_page=3&paged='. get_query_var('paged')); ?>
<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post(); ?>
<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
<article id="post-<?php get_the_ID(); ?>" <?php post_class(); ?>>
<?php the_post_thumbnail( array(200,220) ); ?>
<header class="article-header">
<h1 class="page-title" itemprop="headline"><?php the_title(); ?></h1>
<p class="byline vcard">
<?php printf( __( 'Posted', 'bonestheme').' <time class="updated" datetime="%1$s" itemprop="datePublished">%2$s</time> '.__( 'by', 'bonestheme').' <span class="author">%3$s</span>', get_the_time('Y-m-j'), get_the_time(get_option('date_format')), get_the_author_link( get_the_author_meta( 'ID' ) )); ?>
</p>
</header> <?php // end article header ?>
<section class="entry-content cf" itemprop="articleBody">
<div class="bsnscontent">
<?php the_content(); ?>
<!-- custom field -->
<?php
$phn_num = get_post_meta( $post->ID, 'phone_number' );
$address = get_post_meta( $post->ID, 'address' );
$email = get_post_meta( $post->ID, 'email' );
$web_site = get_post_meta( $post->ID, 'web_site' );
if($address)
{
echo "<br> Address: ".$address[0];
}
echo "<br> Phone Number: ".$phn_num[0];
echo "<br> Email: ".$email[0];
echo "<br> Website: ".$web_site[0];
?></div><?php
$images = get_post_meta( $post->ID, 'business_card' );
if ( $images ) {
foreach ( $images as $attachment_id ) {
$thumb = wp_get_attachment_image( $attachment_id, 'large' );
$full_size = wp_get_attachment_url( $attachment_id );
printf( '<div class="bsnscard">%s</div>', $full_size, $thumb );
}
}
if ( !$images ) {
?>
<!-- HTML TO CANVAS -->
<script type="text/javascript" src="http://cburgmer.github.com/rasterizeHTML.js/rasterizeHTML.allinone.js"></script>
<canvas id="canvas" width="300" height="200" style="border: 1px solid black;background:#EEEEEE;"></canvas>
<div id="thehtml" style="display: none;">
<style>
.test {
font-size: 20px;
}
</style>
<div class="test"><?php if($address)
{
echo "<br> Address: ".$address[0];
}
echo "<br> Phone Number: ".$phn_num[0];
echo "<br> Email: ".$email[0];
echo "<br> Website: ".$web_site[0]; ?></div>
</div>
<script>
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d'),
html_container = document.getElementById("thehtml"),
html = html_container.innerHTML;
rasterizeHTML.drawHTML(html).then(function (renderResult) {
context.drawImage(renderResult.image, 10, 25);
});
</script>
<!-- HTML TO CANVAS -->
<?php } ?>
<!-- custom field -->
<!-- /#post-<?php get_the_ID(); ?> -->
</section>
<footer class="article-footer cf">
<p class="footer-comment-count">
<?php comments_number( __( '<span>No</span> Comments', 'bonestheme' ), __( '<span>One</span> Comment', 'bonestheme' ), __( '<span>%</span> Comments', 'bonestheme' ) );?>
</p>
<?php printf( '<p class="footer-category">' . __('filed under', 'bonestheme' ) . ': %1$s</p>' , get_the_category_list(', ') ); ?>
<?php the_tags( '<p class="footer-tags tags"><span class="tags-title">' . __( 'Tags:', 'bonestheme' ) . '</span> ', ', ', '</p>' ); ?>
</footer>
</article>
</main>
<?php endwhile; ?>
<div class="navigation clearfix">
<span class="newer"><?php previous_posts_link(__('« Newer','bonestheme')) ?></span> <span class="older"><?php next_posts_link(__('Older »','bonestheme')) ?></span>
</div><!-- /.navigation -->
<?php else: ?>
<div id="post-404" class="noposts">
<p><?php _e('None found.','bonestheme'); ?></p>
</div><!-- /#post-404 -->
<?php endif; wp_reset_query(); ?>
</div> <!-- inner content -->
</div>
<?php get_footer(); ?>
id="canvas" there might be your problem. If you have multiple canvas elements you will need mutiple unique identifiers to address them. So add an index, or something.
Also you should call the rasterize code via https:
https://cburgmer.github.io/rasterizeHTML.js/rasterizeHTML.allinone.js
Last but not least:
You get a 404 for your bootstrap request:
http://corey.bluwebz.com/wp-content/themes/eddiemachado-bones-9db85e4/js/bootstrap.min.js
I have a wordpress site that uses a thumbnail grid (9 posts, 3 posts wide, responsive ) the featured image on each post creates the grid.
My code that controls the grid is
<?php
/**
* controls main grid images
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>
<div class = "box-ovrly">
<h2 class="box-title"><?php the_title(); ?></h2>
<div class="box-meta"><?php the_category(', '); ?></div>
</div>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 750, 560, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive" src="<?php echo $image ?>"/>
<?php endif; ?>
</article><!-- #post-## -->
It creates a grid but it shows up in the reverse order (9 to 1, instead of 1 to 9) This wouldn't be a huge deal but I have 'next' and 'previous' buttons which don't co-ordinate to the post.
Ex. on my first post the 'previous' button shows up cause it thinks its on the 9th post, etc.
the back/next menu is created with the following
function web2feel_content_nav( $nav_id ) {
global $wp_query, $post;
// Don't print empty markup on single pages if there's nowhere to navigate.
if ( is_single() ) {
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
$next = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous )
return;
}
// Don't print empty markup in archives if there's only one page.
if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
return;
$nav_class = ( is_single() ) ? 'post-navigation' : 'paging-navigation';
?>
<nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?> row">
<h1 class="screen-reader-text"><?php _e( 'Post navigation', 'web2feel' ); ?></h1>
<?php if ( is_single() ) : // navigation links for single posts ?>
<?php previous_post_link( '<div class="nav-previous col-xs-6">%link</div>', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'web2feel' ) . '</span> %title' ); ?>
<?php next_post_link( '<div class="nav-next col-xs-6">%link</div>', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'web2feel' ) . '</span>' ); ?>
<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous col-md-6"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'web2feel' ) ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next col-md-6"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'web2feel' ) ); ?></div>
<?php endif; ?>
<?php endif; ?>
</nav><!-- #<?php echo esc_html( $nav_id ); ?> -->
<?php
}
When I used POST instead of GET for the call, it was taking a really long time for the wait. So, since I wasn't actually sending any data, I tried switching to GET. The speed increased a bit but now instead of grabbing the one post I need, it returns several posts. I'm guessing I need to alter the loop somehow in the function but I'm not sure what to do. Can someone help me out?
Call
$.ajax({
type: 'get',
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
success: function(response) {
// Wait until all images are loaded
$('#project-container').html(response).imagesLoaded().then(function() {
// Fire again to rearrange the slide in the DOM
resize();
// Remove all 'hover' classes
$('article.project').removeClass('hover-sticky grayscale-sticky');
$('article.project img').removeClass('nohover');
// Remove the loading icon
$('.loading-icon').remove();
// If the user has scrolled...
if ($(window).scrollTop() !== 0) {
// First scroll the page to the top
$('html, body').animate({
scrollTop : 0
},400, function() {
matchContainerHeight();
projectStyles();
});
// If the user has not scrolled...
} else {
matchContainerHeight();
projectStyles();
}
return false;
});
}
});
Function
<?php
/**
* Ajax functions
*/
// Return the post content to the AJAX call
function my_load_ajax_content () {
$args = array(
'p' => $_POST['post_id'],
'post_type' => 'projects'
);
$post_query = new WP_Query( $args );
while( $post_query->have_posts() ) : $post_query->the_post(); ?>
<div class="post-container">
<div id="project-left-content">
<?php
the_title( '<h1 class="entry-title">', '</h1>' );
the_content();
if( get_field('client') ): ?>
<div class="client">
Client(s): <?php the_field('client'); ?>
</div>
<?php endif; ?>
<div class="project-cats">
<?php
$cat_names = wp_list_pluck( get_the_category(), 'cat_name');
echo join( ', ', $cat_names );
?>
</div>
<?php if( get_field('url') ): ?>
<div class="project-link">
<a class="first after" href="http://<?php the_field('url'); ?>" target="_blank"><?php the_field('url'); ?></a>
</div>
<?php endif; ?>
</div>
<div id="project-right-content">
<?php if( have_rows('slides') ): ?>
<div id="slider">
<!-- Slider Setup -->
<?php if( have_rows('slides') ):
$slideNumber = 0;
while ( have_rows('slides') ) : the_row();
$slideNumber++;
?>
<input type="radio" name="slider" id="slide<?php echo $slideNumber; ?>">
<?php endwhile;endif; ?>
<!-- Slide -->
<?php if( have_rows('slides') ): ?>
<div id="slides">
<div id="overflow">
<div class="inner">
<?php if( have_rows('slides') ):
while ( have_rows('slides') ) : the_row();
$slideImage = get_sub_field('slide_image');
?>
<article>
<img src="<?php echo $slideImage; ?>" alt="<?php the_title(); ?>">
</article>
<?php endwhile;endif; ?>
</div><!-- #inner -->
</div><!-- #overflow -->
</div><!-- #slides -->
<?php endif; ?>
<!-- Controls -->
<?php if( have_rows('slides') ):
$slideNumber = 0;
?>
<div id="active">
<?php while ( have_rows('slides') ) : the_row();
$slideNumber++;
?>
<label for="slide<?php echo $slideNumber; ?>"></label>
<?php endwhile; ?>
</div><!-- #active -->
<?php endif; ?>
</div><!-- #slider -->
<?php endif; ?>
</div><!-- #project-right-content -->
</div><!-- .post-container -->
<?php
endwhile;
wp_reset_postdata();
wp_die();
}
add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' ); // when the user is logged in
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' ); // when the user is not logged in
Change
$args = array(
'p' => $_POST['post_id'],
'post_type' => 'projects'
);
To
$args = array(
'p' => $_GET['post_id'],
'post_type' => 'projects'
);
as your ajax is GET and not POST anymore!