We Keep Coding

Adding Pagination to a wordpress post list

I am trying to add pagination to this post list https://cutt.ly/tjuH6lJ , the code i used was
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<!-- the shortcode to the list -->
...............................
<script>
var myList = new List('main_blog', {
valueNames: ['pis-li'],
page: 3,
pagination: true
});
</script>
I also tried the PHP pagination code and added it to my functions.php
function pagination_nav() {
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) { ?>
<nav class="pagination" role="navigation">
<div class="nav-previous"><?php next_posts_link( '← Older posts' ); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer posts →' ); ?></div>
</nav>
<?php }}
and invoke it with <?php pagination_nav(); ?>
i am using the "Extra" theme from "DIVI" and the post list was made with a plugin called "Posts in Sidebar"

You are looking for the_posts_pagination() function.
Displays a paginated navigation to next/previous set of posts, when applicable.
Source # https://developer.wordpress.org/reference/functions/the_posts_pagination/
It uses the arguments of the get_the_posts_pagination and paginate_links() functions.
See get_the_posts_pagination() for available arguments.
Source # https://developer.wordpress.org/reference/functions/get_the_posts_pagination/
Source # https://developer.wordpress.org/reference/functions/paginate_links/
Pagination & loop
<?php
if( have_posts() ):
while( have_posts() ): the_post();
echo '<article>';
if( get_the_title() !== '' ):
esc_attr( the_title( '<h1>', '</h1>' ) );
endif;
if( get_the_content() !== '' ):
esc_attr( the_content() );
endif;
echo '<article>';
endwhile;
/**
* the_posts_pagination
* Displays a paginated navigation to next/previous set of posts, when applicable.
* #link https://developer.wordpress.org/reference/functions/the_posts_pagination/
* #link https://developer.wordpress.org/reference/functions/get_the_posts_pagination/
* #link https://developer.wordpress.org/reference/functions/paginate_links/
*/
the_posts_pagination( array(
'screen_reader_text' => ' ',
'prev_text' => '←',
'next_text' => '→',
'show_all' => true,
) );
else:
echo 'No posts yet!';
endif; ?>
If I remember correctly by default, Wordpress will show 12 posts, before showing the pagination.

How to add/close a shortcode to functions.php in WordPress

How would I go about adding the following shortcode properly to functions.php in WordPress? When I add it works but it isn't closed properly and gives me an error.
<?php echo do_shortcode( '[brb_collection id="297"]' ); ?>
I am getting the following error:
"Your PHP code changes were rolled back due to an error on line 55 of file wp-content/themes/betheme-child/functions.php. Please fix and try saving again.
syntax error, unexpected '<', expecting end of file"
Here is my functions.php
<?php
// // Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
function chld_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
$uri = get_template_directory_uri() . '/rtl.css';
return $uri;
}
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
// END ENQUEUE PARENT ACTION
/* Tillad at uploade fonts */
function wp39550_disable_real_mime_check( $data, $file, $filename, $mimes ) {
$wp_filetype = wp_check_filetype( $filename, $mimes );
$ext = $wp_filetype['ext'];
$type = $wp_filetype['type'];
$proper_filename = $data['proper_filename'];
return compact( 'ext', 'type', 'proper_filename' );
}
add_filter( 'wp_check_filetype_and_ext', 'wp39550_disable_real_mime_check', 10, 4 );
/* CF7 redirects */
add_action( 'wp_footer', 'redirect_cf7' );
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '117' == event.detail.contactFormId ) { // Sends sumissions on form 947 to the first thank you page
location = 'https://example.com/thank-you/';
} else if ( '118' == event.detail.contactFormId ) { // Sends submissions on form 1070 to the second thank you page
location = 'https://example.com/thank-you/';
} else if ( '541' == event.detail.contactFormId ) { // Sends submissions on form 1070 to the second thank you page
location = 'https://example.com/da/tak/';
} else if ( '542' == event.detail.contactFormId ) { // Sends submissions on form 1070 to the second thank you page
location = 'https://example.com/da/tak/';
}
}, false );
</script>
<?php
}
/* Google reivew widget */
<?php echo do_shortcode( '[brb_collection id="297"]' ); ?>

You’re reopening php, while already in a php section
Just remove the php opening tag right before your last echo
Or close the previous php section before the comment
/* Google reivew widget */

Getting AJAX load more to work with custom Wordpress related posts Query?

I"m using the tutorial from this blog post to implement Ajax Load More functionality. https://rudrastyh.com/wordpress/load-more-posts-ajax.html
I've successfully implemented this on my archive page for all blog posts. However, I've got several "RElated Posts" sections that use custom WP Queries that I can't get to work. I've tried the solution in this comment: https://rudrastyh.com/wordpress/load-more-posts-ajax.html#comment-1055
It loads new posts, but they are not adhering to the argumenets of the custom query (specifically displaying posts only in the same category).
The custom query is working (it displays 4 related posts from the same category). When i'm loading more, it is not respecting pagination (it's loading 6 posts instead of 4) and it is not respecting the query (it is loading posts not in the same category).
<div class="related-blog-posts gray-bg pt-5 pb-5 blog">
<div class="related-title pb-3">
<h1 class="mb-2">Related Stories</h1>
<img src="/dcustom/wp-content/uploads/2019/04/Path-137#2x.png" />
</div><!-- scroll-down-->
<div class="container">
<div class="row">
<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$query_args = array(
'category__in' => wp_get_post_categories( $post->ID ),
'paged' => $paged,
'post_type' => 'post',
'posts_per_page' => 4,
'post__not_in' => array( $post->ID ),
'orderby' => 'date',
'order' => 'DESC'
);
$third_query = new WP_Query( $query_args ); ?>
<?php
//Loop through posts and display...
if($third_query->have_posts()) : ?>
<?php while ($third_query->have_posts() ) : $third_query->the_post(); ?>
<?php get_template_part('template-parts/content-related-blog-posts'); ?>
<?php endwhile; ?><!-- end the loop-->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php // don't display the button if there are not enough posts
if ( $third_query->max_num_pages > 1 )
echo '<a class="custom_loadmore btn btn-primary">More posts</a>'; // you can use <a> as well
?>
<?php endif; ?><!-- end loop if--->
</div><!-- row -->
</div><!-- container -->
</div><!-- related-case-studies-->
<script>
var test = '<?php echo serialize( $third_query->query_vars ) ?>',
current_page_myajax = 1,
max_page_myajax = <?php echo $third_query->max_num_pages ?>
</script>
<script src="<?php bloginfo('template_url')?>/js/myloadmore.js"></script>
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function(){
var button = $(this),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
'page' : misha_loadmore_params.current_page
};
$.ajax({ // you can also use $.post here
url : misha_loadmore_params.ajaxurl, // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( 'More posts' ).prev().after(data); // insert new posts
misha_loadmore_params.current_page++;
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
button.remove(); // if last page, remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {
button.remove(); // if no data, remove the button as well
}
}
});
});
$('.custom_loadmore').click(function(){
//custom query on front-page.php
var button = $(this),
data = {
'action': 'loadmore',
'query': test,
'page' : current_page_myajax
};
$.ajax({
url : '/dcustom/wp-admin/admin-ajax.php', // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( 'More posts' ).prev().after(data); // insert new posts
current_page_myajax++;
if ( current_page_myajax == max_page_myajax )
button.remove(); // if last page, remove the button
} else {
//button.remove(); // if no data, remove the button as well
}
}
});
});
});
function misha_my_load_more_scripts() {
global $wp_query;
// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');
// register our main script but do not enqueue it yet
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/js/myloadmore.js', array('jquery') );
// now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages,
) );
wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
/* AJAX LOOP FOR THE ARCHIVE PAGE */
function misha_loadmore_ajax_handler(){
// prepare our arguments for the query
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
// it is always better to use WP_Query but not here
query_posts( $args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post();
// look into your theme code how the posts are inserted, but you can use your own HTML of course
// do you remember? - my example is adapted for Twenty Seventeen theme
get_template_part( 'template-parts/content-index', get_post_format() );
// for the test purposes comment the line above and uncomment the below one
// the_title();
endwhile;
endif;
die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

WooCommerce custom shortcode product categories dropdown

I am trying to add a WooCommerce categories-dropdown-shortcode, but this seems to not work. I am able to see the drop down, but when i choose a category it doesn't register and nothing happens.
sc: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
Code that's placed in my functions.php file
<?php
/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown','woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract(shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
ob_start();
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = document.getElementById("dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
}
}
product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php
return ob_get_clean();
}

Update (2019)
Here below is the working code version for this custom product category dropdown shortcode since woocommerce 3 release:
wc_product_dropdown_categories() replace woocommerce_product_dropdown_categories() which was deprecated since woocommerce 3
Modified Javascript/jQuery code.
Some other light changes.
The new working code:
add_shortcode( 'product_categories_dropdown', 'shortcode_product_categories_dropdown' );
function shortcode_product_categories_dropdown( $atts ) {
// Shortcode Attributes
$atts = shortcode_atts( array(
'show_count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts, 'product_categories_dropdown' );
ob_start();
wc_product_dropdown_categories( array(
'show_count' => $atts['show_count'],
'hierarchical' => $atts['hierarchical'],
'orderby' => ( isset($atts['orderby']) && empty($atts['orderby']) ? $atts['orderby'] : 'order' ),
) );
?>
<script type='text/javascript'>
jQuery(function($) {
$('.dropdown_product_cat').change(function(){
if( $(this).val() !=='' ) {
location.href = '<?php echo home_url(); ?>/?product_cat='+$(this).val();
}
});
});
</script>
<?php
return ob_get_clean();
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
USAGE example:
1) Inside a Page or post content text Editor (or a text widget):
[product_categories_dropdown orderby="title" count="0" hierarchical="0"]
2) On a php template or code:
echo do_shortcode("[product_categories_dropdown orderby='title' count='0' hierarchical='0']");
Original answer:
If you read the comments for the source of this code that you have picked here, they were some errors and they found some turn around recently.
So the correct updated code seems to be this one:
/**
* WooCommerce Extra Feature Shortcode
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract(shortcode_atts(array(
'show_count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
ob_start();
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = jQuery(".dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
}
}
product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php
return ob_get_clean();
}
But it will not work, as woocommerce_product_dropdown_categories() is a buggy function that is deprecated. See this reference about.
May be you could try to use this plugin instead, for that purpose.

For anyone still stuck on this then here is the currently working solution:
/**
* WooCommerce Extra Feature Shortcode
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract(shortcode_atts(array(
'show_count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
ob_start();
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
wc_product_dropdown_categories( $c, $h, 0, $o );
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = jQuery(".dropdown_product_cat");
product_cat_dropdown.change(function() {
if ( product_cat_dropdown.val() !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.val();
}
});
/* ]]> */
</script>
<?php
return ob_get_clean();
}

Wordpress WooCommerce content-product.php javascript

http://intelmarketing.mk/demos/boutiques/
this is the wordpress theme that i'm building and i have this problem:
Try and open http://intelmarketing.mk/demos/boutiques/
Scroll down to NEW ARRIVALS
Do the mouseover on the first image
than you'll see that the only first image is working with the script and why is that?
here is the code from the content-product.php file that i have used
<script>
$('#div1').mouseover(function() {
$('#div2').fadeIn(500);
});
$('#div2').mouseover(function() {
$('#div2').fadeIn(500);
});
$('#div1').mouseout(function() {
$('#div2').fadeOut(500);
});
$('#div2').hide().mouseout(function() {
$('#div2').fadeOut(500);
});
</script>
<?php
/**
* The template for displaying product content within loops.
*
* Override this template by copying it to yourtheme/woocommerce/content-product.php
*
* #author WooThemes
* #package WooCommerce/Templates
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $product, $woocommerce_loop;
// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) )
$woocommerce_loop['loop'] = 0;
// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) )
$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );
// Ensure visibility
if ( ! $product || ! $product->is_visible() )
return;
// Increase loop count
$woocommerce_loop['loop']++;
// Extra post classes
$classes = array();
if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] )
$classes[] = 'first';
if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] )
$classes[] = 'last';
?>
<li <?php post_class( $classes ); ?>>
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<a href="<?php the_permalink(); ?>">
<div id="div1">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?>
</div>
<div id="div2">
<h3><?php the_title(); ?></h3>
<?php
/**
* woocommerce_after_shop_loop_item_title hook
*
* #hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
?>
</div>
</a>
<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
</li>
If any one knows how to fix this problem please let me know :)
Thank you!
UPDATE
i changed the script to
<script>
$('.attachment-shop_catalog').mouseover(function() {
$('.amount').fadeIn(500);
$('#div2 h3').fadeIn(500);
});
$('.amount').mouseover(function() {
$('.amount').fadeIn(500);
});
$('#div2 h3').mouseover(function() {
$('#div2 h3').fadeIn(500);
});
$('.attachment-shop_catalog').mouseout(function() {
$('.amount').fadeOut(500);
$('#div2 h3').fadeOut(500);
});
$('.amount').hide().mouseout(function() {
$('.amount').fadeOut(500);
});
$('#div2 h3').hide().mouseout(function() {
$('#div2 h3').fadeOut(500);
});
</script>
but now they are all hidden but if you mouseover no metter what image will show all the titles and price above all images and i just want when i go to one image to show me that title and price of only that image.. i hope you'll understand me what i mean..
Thanks

Try this,
First set those buttons style:none for hiding on first load add following CSS to your stylesheet.
ul.products li.product h3, ul.products li.product .amount{display:none;}
Instead of your script try following.
jQuery('ul.products li.product').hover(function(){
jQuery(this).find('h3').fadeIn(500);
jQuery(this).find('.amount').fadeIn(500);
},function(){
jQuery(this).find('h3').fadeOut(500);
jQuery(this).find('.amount').fadeOut(500);
});
Hope it works..

Try this:
If you put your mouseover event listener on a class you are able to let them fade in on every image which has that particular class.
$('.attachment-shop_catalog').mouseover(function() {
$(this).fadeIn(500);
});
If you are using this aproach, you don't need to add a event listener for #div1, #div2 and #div3 individually.